All You Need to Know About Most Popular Javascript Libray React.Js

hi, Buddy today I am going to tell you about the most popular javascript library react.js so let's get start!

1.What is react.js?

React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. like we can use it to make web applications more easily. if we used vanilla javascript it will be complicated and expensive as well but react make it easier and simple though.in the current situation react more popular than vue.js and angular.js

2.why use it?

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple.It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

3.What is Babel?

Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript.With Babel, you can use the newest features of JavaScript Babel is available for different conversions. React uses Babel to convert JSX into JavaScript.

4.What is JSX?

JSX stands for JavaScript XML.JSX is an XML/HTML like extension to JavaScript.which makes the HTML file really easy to understand. This marriage between a programming language and the markup language makes applications robust and boosts their performance. The reason behind using it with React is to describe what the UI should look like. JSX produces React “elements”, which are rendered into rich user interfaces.

5.React DOM

ReactDOM is a package that provides methods that can be used to interact with the DOM, which is needed to insert or update React elements. It provides many helper functions such as render,hydrate,unmountComponentAtNode ,findDOMNode,createPortal.

6.JSX

JSX stands for JavaScript XML.JSX allows us to write HTML in React.JSX makes it easier to write and add HTML to React.JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

7.React Elements

React applications are usually built around a single HTML element. React developers often call this the root node. We will have a parent div element in the main HTML file. This div can be called as root.

<div id=”app”> </div>

ReactDOM manages everything which is inside the app div. We can add multiple such an isolated div in applications if required.

8.React Components

React components are JavaScript functions. Components are one of the things that make React…well, React! They are one of the primary ways you have for defining the visuals and interactions that makeup what people see when they use your app.

9.React Component Properties

You can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax. So don’t forget the curly braces. export default App; As you can see, the props are received in React’s class component via this instance of the class.

This example creates a React component named “Welcome” with property arguments:

Example:

function Welcome(props) {
return <h1>Hello {props.name}!</h1>;
}
ReactDOM.render(<Welcome name=”John Doe”/>, document.getElementById(‘root’));

10.The Component API

A component-based API is able to make a single request to the server by requesting the data for all of the resources in each component which is accomplished by keeping the relationships among components in the API structure itself.

this is for today I will bring more interesting topics about react stay tuned.

thank you all!