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?

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 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.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>React Hello World</title>
</head>
<body>
<div id='root'></div>
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script>
var id=document.getElementById('root');
ReactDOM.render(React.createElement('h1',null,'This is React Example'),id);
</script>
</body>
</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.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>React Hello World</title>
</head>
<body>
<div id='root'></div>
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script>
var id=document.getElementById('root');
var element=React.createElement('p',null,'This is child element');
ReactDOM.render(React.createElement('div',null,'This is Parent Example',element),id);
</script>
</body>
</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.

<!DOCTYPE HTML>
lt;html>
<head>
<meta charset="utf-8">
<title>React Hello World</title>
</head>
<body>
<div id='root'></div>
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
var ChildElement = React.createClass({
render: function () {
return (<div>
<p>This is Child Element</p>
</div>);
}
});
var ParentElement = React.createClass({
render: function () {
return (<div>
<p>This is Parent Element</p>
<ChildElement/>
</div>);
}
});
ReactDOM.render(<ParentElement></ParentElement>, document.getElementById('root'));
</script>
</body>
</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

import React from 'react';
const myComponent= React.createClass({
render() {
return (
<div></div>
);
}
});
export default myComponent;

React.Component

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

import React from 'react';
class myComponent;extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
} 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

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

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

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.

7 Comments

Join the conversation! Your thoughts help the community grow.

Hitanshi Mehta7y ago
It is amazing!! Thank you for sharing!!
Naveen Bisht9y ago
Its just waoooo awesome
Puneet Kankar9y ago
Nice article thanks sir.,one suggestion your html tag not start properly lt;html> please correct.
Madhan Thurai9y ago
Thanks a Ton,its more Informative and helpful (Y)
Dao Duy Vu9y ago
Great Article, thanks
Ravi Patel9y ago
Nice article, thanks
Thiruppathi R9y ago
Nice Article.Thanks for sharing..