React JS
Open Source Javascript Front-end library
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies and used by Instagram and Facebook.
Why use React JS ?
The main agenda of React JS is the UI(user interface) that increases the speed of the apps. React JS uses virtual DOM(Javascript) object which increases the performance of the apps. Virtual DOM is faster than the regular DOM. React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.
Workflow of a React Application
React elements : Javascript representation of HTML DOM . React provides an API , React.createElement to create element .
JSX: Extension to design user interface. JSX is a XML based which is an extensible language supporting HTML syntax with little modification.JSX can be compiled to React Elements and used to create user interface.
React Component:Building block of the React application. React component is basically a JavaScript class (extends the React.component class) or pure JavaScript function.
- Open your command prompt and go to your project folder
cd Desktop/React project
2. Next, create a folder, static_site and change directory to newly created folder.
mkdir static_site
cd static_site
3. create a file, Index.html and write a simple React application.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>my react</title>
<script></script>
</head>
<body>
<div id=”root”></div>
</body>
</html>
Architecture of React Application
- React app starts with a single root component.
- Root component is build using one or more component.
- Each component can be nested with other component to any level.
- Composition is one of the core concepts of React library. So, each component is build by composing smaller components instead of inheriting one component from another component.
- Most of the components are user interface components.
- React app can include third party component for specific purpose such as routing, animation, state management, etc.
Advantages of using React JS
- Seo-Friendliness : React.js is capable of making sure that the render is performed way faster than in other frameworks, ensuring it works at lightning speed, thus reducing the loading times.
- Declarative: ReactJS enables significant data changes that result in automatic alteration in the selected parts of user interfaces. Owing to this progressive functionality, there is no additional function that you need to perform to update your user interface.
- Reusable Components: ReactJS enables significant data changes that result in automatic alteration in the selected parts of user interfaces. Owing to this progressive functionality, there is no additional function that you need to perform to update your user interface.
Resources to learn React …
Beginners please take into consideration to learn JAVASCRIPT and then dive into ReactJS…
- Learn React for free (Scrimba)
- Full Modern React Tutorial (Net Ninja)
- The Beginner’s Guide to React (egghead.io)
- Epic React (Kent C. Dodds)
- React — The Complete Guide (Academind)
For such blogs .. Follow Techno Freak..