React is the second loved frontend technology after that JavaScript
React is a JavaScript library for building modern applications. React libary are components base libary. Each component is a self-taken component that renders some output. Almost we are when react start to learn, some important concept need to know. let’s start react core concept.
1. Virtual DOM
Virtual DOM is most important part of react. When react app loads, react creates a virtual document object model copy of real DOM tree. DOM tree process by the Diffing Algorithm rules.
2. JSX
JSX is the JavaScript extension syntax. JSX is an important part of react. It is write in the HTML and JavaScript together. It make easy to writing code. let’s see the example.
const Numbers = () => {
const elements = [‘one’, ‘two’, ‘three’]
return (
{
elements.map(element => <li>{element}</li>)
}
)
};
3. Components
Components as like blueprints, when is similar in look different in data then we can say component. React component is a collection of data. It is define all components element and function.
4. Routing
When we are handle routes in a web app then react router dynamically rendering on the browser. For this able to navigate from page to page and stored the navigation history. React Router is routing library for react.
5. Hooks
React Hooks are a special functions in the React. Has many advantages of react hooks. As like optimizes all component data, handles functional components, state readability.
import React, { useState } from ‘react’;
const Text = () => {
const [text, setText] = useState(“ ”);
return (
<p>{text}</p>
);
};
6. Props
Props is a special object of react it stands of react properties. we can to pass data from parent component to child component by props. but not possible with props to pass data from child component to parent component. we can practice that example.
import Example from ‘./Example’;
function App() {
return (
<div>
<Example name=”John”></Example>
</div>
);
}:Here we created a property in the form of name and value Johe. Now we will destructure accessing the props to use.
function Example(props) {
return <h1>Hello {props.name}</h1>
}
7. useContext()
React’s useContext makes it easy to pass data another component without passing props. This is the alternative to “prop drilling” or passing props from grandparent to parent to child. The state of the another component can be through globally, and across multiple components.
8. useState()
UseState is a built in react hook it allows you to add state variables in functional components. UseState takes the initial value of the state variable as an argument. And returns two values, first one current state value and a function that updates this value.
9. useEffect()
useEffect is the special hook that manages side-effects in functional components. If you want to fetch something from an API when rendering a component you can use useEffect. That will be called every time something affects your component.
10. Babel
Babel is a JavaScript transpiler it can be converts the JSX to HTML and Javascript. If you write JavaScript codes for websites, or applications, may not support your modern JavaScript. That’s where Babel work in, which will transpile the JS version to make it backward compatible.