React JS

26th Jul 18
Thumbnail

React JS is used for client side web applications, server side web apps, desktop apps, native phone apps.  Used by many applications.  In React newer syntax and language features have made it much easier to work with.  There is much more consistency between browsers, jquery is not necessarily required.  Javascipt is gateway to other languages such as TypeScript, ClojureScript, Dart, Elm, 3d graphics/games, NodeJs, machine learning.  

Why use React

You can break down your code into components.  An example of component would be a header or footer or a sidebar.  These components can be built and reused in different parts of your website making a more efficient website.

React DOM

React DOM imported to your react project exposes an object called ReactDOM.  This object has a render method and this method allows us to render a javascript function as a react component to the DOM.  Within the render method you pass the component in jsx code and where you want this component to be rendered.

function Person(){
  return(
    <div className="person">
        <h1>
          Natalie
        </h1>
        <p>Your Age:37</p>
    </div>
  );
}

ReactDOM.render(<Person />, document.querySelector('#p1'));

 

Passing props to the component

function Person(props){
  return(
    <div className="person">
        <h1>
          {props.name}
        </h1>
        <p>Your Age:{props.age}</p>
    </div>
  );
}

ReactDOM.render(<Person name="max" age="28"/>, document.querySelector('#p1'));

You can make it reusable by passing props to the component.  In the below example I pass the name and age.  This way you can create multiple components passing different props to it.

You can hold the JSX code within a variable then pass that variable to that render method.

function Person(props){
  return(
    <div className="person">
        <h1>
          {props.name}
        </h1>
        <p>Your Age:{props.age}</p>
    </div>
  );
}

var app = (
<div>
  <Person name="max" age="28"/>
  <Person name="natalie" age="37"/>
</div>
);

ReactDOM.render(app, document.querySelector('#app'));

 

I have recently completed my apprenticeship.  I am currently building the API to a React JS site using Firebase.