Getting Started With React

Unless you are living under a rock you probably know that react is the need of the hour in web and mobile development.So, it’s better to learn it.Let’s get started.

React is a JavaScript Library Released in 2013 by facebook and it is regularly updated eversince.React is completely component-based meaning everything in react is based on concept of components. There are two ways to define components in react :

1. Functional Components
2. Class Components

Functional Components

As the name suggests these components are defined as a function and they return an output.For example

function Welcome(props) {  
   return <h1 className="app-title">Hello, {props.name}</h1>;
}

const element = <Welcome name="Vishal" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

This is a simple React functional component returning an <h1> tag with some text inside it. The text inside <h1> might seem a little weird since it is not plain HTML instead it is JSX(JavaScript Syntax Extension) which is used in react to define the UI, since JSX is not plain javascript it needs to be translated into plain Javascript so that browser can understand it.

"use strict";
function Welcome(props) {
  return /*#__PURE__*/React.createElement("h1", {
    className: "app-title"
  }, "Hello, ", props.name);
}
var element = /*#__PURE__*/React.createElement(Welcome, {
  name: "Sara"
});
ReactDOM.render(element, document.getElementById('root'));

This is the compiled version of the above functional component(Compiled using Babel Compiler), as we can see there is a function React.createElement() which is being used repeatedly so let’s understand this function.

React.createElement(
  type,
  [props],
  [...children]
)

As you can see this element takes has 3 different arguments, the type argument can be any tag name(‘div’,’span’) so in our case it will be ‘h1’.This could also be another React Component if we are creating an HTML element.

The Second Argument is a props object containing properties so in our case it would be {className:”app-title”} (since class is a keyword in JS so we use className to specify a css class to the element), if we would have added inline-styles to this element it would have also been added to the props object as a key-value pair.

The third and final argument is the children of the component so as we can see in case of our component it has 2 children which are a string “Hello, ” and a variable props.name(we will talk more about props object later) so our compiled JSX code will be

React.createElement(“h1”,{className:”app-title”},”Hello, ”,props.name);

Now, coming back to functional components , as we saw our Welcome Component was returning some JSX code.

So, as we know from concept of functions there is a function definition and a function call so we also need to call our Welcome functional component so it is done again using JSX syntax as

<Welcome name=”Vishal” /> so here name will be added as a props object as {name:”Vishal”} as you might remember from JSX compilation so we use this in our function as {props.name}

Now, Since we also need to render this in the DOM of our browser since ultimately DOM is visible on the browser so we render this component inside an element which is present in the DOM (By default, root element is present in the React app at the topmost heirarchy). So we write,

ReactDOM.render(

<Welcome name=”Vishal”/>,

document.getElementById(‘root’));

Phew! That was a long post.Let’s cover Class Components in the next post. Meanwhile, please try to build a simple React-app using Functional Components.Until then,

PEACE OUT!