Post
Ask Question

React Tutorials - Day One - React Introduction

In this series, we will learn about React, and will start with the basics of React and later, will cover the advanced level topics in React. Whenever we start to learn a new technology, the first question that comes in our mind is “ What is it and how can we use it?“ Here, the question mark (?) indicates a particular technology. Let’s have a brief introduction to  React.

What is React?


What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React was developed by Facebook to help the developers and designers to create interactive user interfaces very quickly. React handles the View layer of any application. Currently, MVC (Model, View, Controller) is the most popular pattern to create applications and React only deals with the View section of an application. React is mostly used in large applications where data is frequently changed on user-interactions.

What should I know?

One of the best features of React is that its learning curve is very simple. Anyone with basic previous knowledge in programming can easily start with React. If you want to learn React, you should have the following basic knowledge.

  • HTML and CSS
  • JavaScript
  • JS specially with NPM
  • Webpack and babel (not mandatory)

Features of React

  • Open Source tool developed by Facebook
  • Ideal for large and single page applications
  • Using React Native, we can create mobile applications for iOS and Android with native looks and features.
  • React uses reusable component so we don’t need to write the same code multiple times but we can reuse the components.
  • Uses high speed Virtual DOM
  • Easy to understand the JSX syntax.
  • One way data binding.
  • Supports SEO
  • Doesn’t use Shadow DOM

Virtual DOMS

React is very lightweight and fast in rendering the View. The main concept of React is Virtual DOM. DOM manipulation is the heart of modern applications. DOM (Document Object Model) are the structures of the HTML and XML elements that are used to make web pages. DOM manipulation is the process of reading and writing the data to HTML DOM.

React

When we use getElementById, getElementByClass or another query selector and read the data, that means we are reading the data from HTML DOMS.

React

When we change any elements, this means we change the classes and change the attributes when we are writing the DOM. When we repeat this process multiple times, it will render that element each time that makes the application little bit slow because we are interacting with the real DOM each time. Now, React makes some changes to overcome this situation and making the process fast.

React Virtual DOM

In React, we only interact with the virtual DOM. We read and write the data into virtual DOM each time and later reflect these changes to HTML pages using the Render method. Actually, React reduces the number of interactions with Real DOM that makes it very fast.

JSX


JSX

JSX stands for the “JavaScript Syntax XML." JSX is a preprocessor step that adds XML syntax to JavaScript. JSX is syntax extension to JavaScript. React uses JSX for templating instead of regular JavaScript. We can write code without JSX but there are benefits of using JSX like.

  • Easy to use and a more human readable syntax.
  • Provide compile time error checking
  • JSX is fast because it perform the optimization when convert the code into JavaScript.
  • Write the code into HTML and XML syntax.

Let’s take an example of React using the plain JavaScript syntax and understand the drawbacks of this approach.

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.      <head>  
  4.           <meta charset="utf-8">  
  5.            <title>React Hello World</title>  
  6.             </head>  
  7.         <body>   
  8.              <div id='root'></div>   
  9.               <script src="https://fb.me/react-15.0.1.js"></script>  
  10.             <script src="https://fb.me/react-dom-15.0.1.js"></script>    
  11.              <script>  
  12.              var id=document.getElementById('root');  
  13.                ReactDOM.render(React.createElement('h1',null,'This is React Example'),id);  
  14.             </script>  
  15.         </body>  
  16. </html>  

Output

React

In this example, we created a React element (component) using the “React.ceateElement” method. This method takes three arguments - the first one is “tag” named for the element, the second is properties that we want to pass in this element, and the third parameter is HTML content for the element. After creating the React element, we used the “ReactDOM.render” method to render this React element into “root” div. Let’s take another example to make the things more clear.

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.      <head>  
  4.           <meta charset="utf-8">  
  5.            <title>React Hello World</title>  
  6.             </head>  
  7.         <body>   
  8.              <div id='root'></div>   
  9.               <script src="https://fb.me/react-15.0.1.js"></script>  
  10.             <script src="https://fb.me/react-dom-15.0.1.js"></script>    
  11.              <script>  
  12.              var id=document.getElementById('root');  
  13.              var element=React.createElement('p',null,'This is child element');  
  14.                ReactDOM.render(React.createElement('div',null,'This is Parent Example',element),id);  
  15.             </script>  
  16.         </body>  
  17. </html>  

Output

React

In this example, we created two elements and used the first element as a child element of the second element. You can see that the whole syntax looks much too complex to understand for such a simple example. As the size of our application will increase and we need to create a high level of parent child hierarchy, it will become more complex to manage.

To overcome all these issues, we can use JSX. JSX writes the code in a very simple and easy way. So, it becomes easy to handle and manage a large amount of the code using the JSX. Let’s write the above example using JSX.

  1. <!DOCTYPE HTML>  
  2. lt;html>  
  3.     <head>  
  4.          <meta charset="utf-8">  
  5.            <title>React Hello World</title>  
  6.     </head>  
  7.      <body>   
  8.           <div id='root'></div>  
  9.        <script src="https://fb.me/react-15.0.1.js"></script>  
  10.        <script src="https://fb.me/react-dom-15.0.1.js"></script>  
  11.        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>  
  12.        <script type="text/babel">  
  13.         var ChildElement = React.createClass({  
  14.              render: function () {  
  15.                   return (<div>   
  16.                       <p>This is Child Element</p>  
  17.                       </div>);  
  18.                     }  
  19.                     });  
  20.   
  21.        var ParentElement = React.createClass({  
  22.              render: function () {  
  23.                   return (<div>   
  24.                       <p>This is Parent Element</p>  
  25.                       <ChildElement/>  
  26.                       </div>);  
  27.                     }  
  28.                     });  
  29.            ReactDOM.render(<ParentElement></ParentElement>, document.getElementById('root'));   
  30.            </script>  
  31.             </body>  
  32.             </html>  

Output

React

In JSX, we used the React.createClass method to create a component. Each component contains a render function that returns the HTML content for the component. You can see that JSX code is very simple and easy to understand as compared to the traditional JavaScript method.

In JSX, we have two methods to create the components.

  • createClass
  • Component
  1. import React from 'react';  
  2.   
  3. const myComponent= React.createClass({  
  4.   render() {  
  5.     return (  
  6.       <div></div>  
  7.     );  
  8.   }  
  9. });  
  10.   
  11. export default myComponent;  

React.Component

Let’s take the above example and convert it using the ES6.

  1. import React from 'react';  
  2.   
  3. class myComponent;extends React.Component {  
  4.   constructor(props) {  
  5.     super(props);  
  6.   }  
  7.   render() {  
  8.     return (  
  9.       <div></div>  
  10.     );  
  11.   }  
  12. }  export default myComponent;

In the previous example, we just used the JSX to create the component, in this example we use the JSX with ES6. So it totally depends upon you and which syntax you want to use. I think if you are from OOPS background then you will prefer the second option using the ES6 because using ES6 we can write the component like a class syntax. It is just a matter of taste. It has no real impact, which syntax you use while the semantics stay the same. In this series we use the second approach (using ES6) to write the codes but you can also code without the ES6 only just using the simple JSX syntax.

One Way Databinding

Two Way Data Binding 

Another features that makes React very fast is one way data flow. If we compare React to another JavaScript framework like Angular or Backbone.js that the use the two way data flow from model to view and view to model we will find that it reduces the digest cycle and increases the performance of React. In Angular the digest cycle always performs the dirty checking, that means if we make any changes in view then it will reflect the model and a digest cycle will run until all the changes are reflected.

But in React we can’t change the properties and states directly from the views. For this we have to call the function and that makes the changes into states and properties. If you are not aware of states and properties then don’t worry we will cover all these topics in our upcoming articles. States and properties in React are used to store and flow the data into the application.

Flux is a pattern that helps keep your data unidirectional. The data enters the app and flows through it in one direction until it renders on the screen.

React

Support SEO

React

One of the disadvantages with the JavaScript framework is that they are not search engine friendly. The reason is that the search engine can’t read the JavaScript code. But React stands out from the crowd because React supports server side rendering which means we execute the React and server and all the virtual Doms will be rendered to the browser as the regular HTML page.

Doesn’t use Shadow DOM


React

Shadow DOM is a new DOM feature that helps you build components. You can think of shadow DOM as a scoped subtree inside your element. Components are the future of web development. Other JavaScript frameworks like Angular2 use the concept of ShadowDOM. React doesn’t use the Shadow DOM, instead it provides the capability to create the components that can later reuse and combine into another component.

Limitations of React

  • React only focuses on the View section of an application so, if you are developing a large application then you have to include some other libraries to handle the other parts of applications.
  • Fewer features compared to any monolithic framework such as AngularJS. For example in Angular routing is inbuilt but in React you have to include some external files to perform the routing.
  • React JSX so Babel is used to transpile the JSX into plane JavaScript and Webpack & npm is used to build and run the application. If you are not familiar with these technologies and you get any error into code then it will be difficult for you to handle and resolve the error.
  • Difficult to configure with other MVC frameworks like AngularJS.

Where to Use

  • If you are developing an application where data is frequently changes on view then React may be a best option.
  • you are developing an application that mainly focused on view section and needs more user functionality at view layer then React is best option for such application.

React Developer Tools

There are some useful React tools that can help us during the React development.

React

You can install this extension in your Chrome browser from this link “https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi”.

React developer tool indicates if any page or website is using React or not.

React

Using this tool, we can also check which elements of the page are built using React, and we can also debug and examine the React code.

React

Conclusion

In this article, we had a brief intro to React and also learned about the features and limitations of React. From the next article, we will start coding on React, and cover the basics and advanced topics in React. Until then, keep coding.


Similar Articles