Introduction
React, It is a very famous JavaScript libraries used for building complex user interfaces.It is created by Facebook in May 29, 2013. Nowadays 8789 top fortune companies are used react. For example Facebook itself, Netflix, Twitter, Uber, Airbnb etc.
When it compared with Angular, it is a framework but React is a library.not a framework.It is open-source project created by facebook. It used to create the view layer of an MVC application(Model View Controller).
What you need to know
When we look about JavaScript in distance it seems very difficult. But when give a try on it actually it is very easy to learn. All it does is creating DOM(Document Object Model) elements in form of components by using the virtual DOM.
When some one try to learn React he/she should know these skills mention in below:
- Basic familiarity with HTML5 & CSS
- Basic knowledge of JavaSCript
- Basic understanding of the DOM
- Familiarity with ES6 syntax and features
- How to use npm out of the nodeJS
React basic Concept
React renders HTML to the web page by using a function called ReactDOM.render().
Creating React elements:
- Creating ES6 module pattern,we are importing our React and reactDOM from the downloaded packages into our script.
- In above figure(Fig 1) we are creating a component named Test using ES6 class feauture.The class is inherited from React in-built component class.Observe the ‘extends’ keyword.
- React’s render method returns on HTML element.This here is called JSX.
ReactDOM.render() Method :
ReactDOM.render() function take two arguments, HTML code and an HTML element.The purpose of the function is to display the specified HTML code.
In our case, the ”<p> Hello World! </p>” inside the specified HTML element.This ”<p>Hello</p>” element is to be displayed inside the second argument(root).The root element is an HTML tags in the index.html page shown in next figure(Fig 3).
The index.html generated by create react installation has a <div> with the id of ‘root’. This is where the ReactDOM.render() method attaches our jsx components.
Geek for World 