Some basic Knowledge about React

# About React: React is not a programming language. It is a JavaScript library. That’s means it fully depends on JavaScript language. React is an open source project. React focused on doing one thing and doing that one thing really well and that is the second part building user interfaces. The other aspects of our application like routing or HTTP request .It is responsible only for building rich user interfaces. React has a rich ecosystem and plays really well with other libraries and is more than capable of building full fledged web applications.

# Virtual Dom: For reading dom manipulation issues React has made a different dom for itself. Where it works on javascript. Also it won’t have to obey the browser rules. React mainly makes a simple row javascript object,it creates a browser dome replica, which is called Virtual Dom. This Virtual Dom is cheaper than the browser dom.It doesn’t render unnecessary.

#JSX: Basically JSX stands for JavaScript XML. IT allows us to write and add HTML in react. React module has a compiler, which converts html code into JavaScript code. Because of jsx we can use html in JavaScript and also JavaScript in html.

#React Components: It is some pieces of code that we can use multiple times. If we want to access a different file components it needs to export the components file. And where we want to use it needs import io access

import React from ‘react’;

import ReactDOM from ‘react-dom’;

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car!</h2>;

}

}

export default Car;

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import Car from ‘./App.js’;

ReactDOM.render(<Car />, document.getElementById(‘root’));

#Props: When we call a child components and also want to pass some value to that component, we use props. We can also pass a function as props.But we can never send any props into parent components from child components.that’s mean it can work only one way

#State: Simply it means data of its own component. State is mainly a javascript object, where we can store anything. If our application has data and we also render it in the browser and it could be changed in future, that case we store this dynamic data in state.When we use state in components, then this state or components acts like a store.

#Event: Event is an object which only triggers when something is going to happen and also going to return an object to the listener.Which contains information related to the event. Like Button clicked, Input Element, Form submission etc. Also events are the only way to interact with users and get user feedback . In every event has a name and a listener function

#REST API: Representational State Transfer Application Programming Interface (REST API). A REST API defines a set of functions in which developers can perform requests and receive responses via HTTP protocol such as get and post. It can come from our own server application’s own back end or it can come from the third party like jsonplaceholder. It’s a structured request and response.

#Context: Context provides a way to pass data through the components tree without having to pass down manually at every level .State management in React is very painful. That’s why we usually use popular third party state management solutions like redux. But it is very complicated for a beginner. That’s why React introduces a new feature called Context to manage state.To use context needs to create a userContext method from React. Then it also need to export and import from the provider and consumer components as well

#Hook:Hooks are a new feature addition in React which allow you to use React features without having to write a class.React component is state.

For example we could state only within class components with hooks.

It is now possible to use state and also other React features without writing a class.

Because hooks don’t work inside classes.

They let us use React without classes.

We should use hooks because people can understand props state and unidirectional data flow but will struggle to implement class components.

We also have to remember to bind event handlers in class components.

On the React side it is also observed that classes don’t minify very well and make not reloading very unreliable.

With hooks since we are not working with classes anymore we will not have to face these problems.