ReactJS Fundamentals - Zero To Hero Series - Part One

Introduction

This is my first article on ReactS and later on, I will be continuing this series of articles on React JS. This article will mainly focus on React JS Fundamentals.

We know that, from the earlier days of client-side web development, there were many interfaces and frameworks, which were developed very fast, and almost all of them are free. There are many frameworks in the market, which are very famous like AngularJS, Ember and Meteor; however, React has taken a different approach.

React mainly focuses on the rendering and event handling of client-side user interface components and it depends on the developer to choose other specialized components to complete their application. It gives the developer an opportunity to select the approach, which depends on the business requirements of the project.

React is an Open-Source client side web library for building user interfaces and it is developed by Facebook and Instagram. The Instagram Website, Facebook’s Comment and Like components, as well most of the new Facebook components are developed using React.  

The official homepage of React.



This official page of React has documentation, code examples, and useful links. All the code examples run live in the page, so we can test and change the examples and on the right-hand side, the live output shows the modified code.



There is also a JSFiddle website, which I generally use for experimenting with JavaScript and various other web technologies. So, in the JSFiddle, they have set up a JSFiddle for React JS, so it has the React source code loaded and ready to go and below example showing the “Hello World” example in React JS.

Link to JSFiddle.



Advantages of React JS

• Speed
  Speed is the major design goal of React. (It uses a novel rendering algorithm)
  
  
• Declarative
  A React application is a set of components, each of which declaratively defines a mapping between some state and the desired UI. The interface gets changed by changing only the state. It helps in preventing bugs and it’s easier to write. It’s easy to see how code changes or events will affect the programs outcome.
  
  
• Composable
  React components are self-contained units of functionality. They publish a simple interface that defines their inputs as properties and their output as callbacks. React components can be nested within each other. Hence, composition ultimately leads to reuse of code.

Basic Code

Let’s understand the React code (Hello World) at a very high level:-

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

The above code shows two of the major pieces of the React library.

First is the React.createClass function and this is the function that is used to define the components. So here we are defining a Hello World component and assigning to a variable called Hello, and to define the Hello World component, we are using a function called render, and in this render function, we are returning a HTML code with some kind of variable interpolation ({this.props.name}) involved.

Second, there is a call to another React function, ReactDOM.render and within it; we are passing HTML with an element name that refers to the component that we previously defined (Hello) and an attribute (name) that is matching the interpolation within the render function. The second parameter (document.getElementById('container')), tells React where to render the Hello component.

 I created a simple React application in JSFiddle to display the current time,



The above output prints Hello and then the string version of the current date.

Every time I refresh the page, the seconds keeps on changing, as shown below, 



Architecture of React JS

A React application is composed of components. Each component has the design as represented in the below diagram,



The inputs to a component are properties, referred to as props and state. The state can change and the flow of data is in the same direction. This goes to Render function and then to the DOM. Props and state collectively represent the model. The way to change the DOM is to change the model. Once the DOM is rendered, it can generate events, which goes back into the component state and trigger another render cycle.





React maintains its own document abstraction. Therefore, it has a fake DOM, which is very fast. Hence, this fake DOM updates the real DOM in the most efficient way possible.

We can say that, React provides two features,

• Rendering a model to the DOM and keeping the DOM synchronized with changes to the model.
• Publishing, handling and managing events.

Summary

• React is Facebook’s client-side user interface library
• React’s top features are,
  
  
  • Speed
  • Declarative binding
  • Composability
    
    
• We saw a simple Hello World example and how we can use React components.