React

• What is reactjs
• JSX
• How does react work?
• How to start to react app in vs code?
• Components
• Props
• Fragments
• Hooks
• UseEffect() Hook
• Redux

What is reactjs
React is a JavaScript library for building user interfaces. It might be an extra building block, and indeed. React.js is a client-side JavaScript library. It helps us with writing that client-side JavaScript code and it’s all about building modern reactive user interfaces for websites.

JSX
JSX stands for JavaScript XML. JSX allows developers to write HTML code in React. JSX makes it easier to write and add HTML in React this is simple JSX code in React. But the browser does not understand this JSX because it’s not valid JavaScript code. This is because we’re assigning an HTML tag to a variable that is not a string but just HTML code.

How does react work?
With React we defined the desired target state/component and React is then responsible for running and generating the actual DOM instructions which update what’s visible on the app screen.

How to start to react app in vs code?
Just run the command: my-app is a folder name

npx create-react-app my-app
And after installing the app run the command to start your app.

cd my-app
npm start

Component
Mainly two types of components:

1. 1. Class component
2. Function component

Class component:- Class component is a simple javaScript class that creates a render function that returns react element or returning HTML. React lifecycle methods can be used inside this.

Function component:- Functional component doesn’t contain state or lifecycle-hooks, So they are much easier to read and test with less code. One of the main reasons for using the functional components is better performance as compared to the class components because the JS V8 engine first needs to compile the class component but the functional components directly execute without compile.

Props
Props stand for properties and we can say that props are like arguments. So we can pass the properties from one component to another or we can say we can pass the properties from parent component to child component.

For example, we have two files App.js and Author.js and we can pass the name attribute App.js to Author.js using props.

Fragments
Fragments allow us to write cleaner code, end up with fewer unnecessary HTML elements and group a list of components/children without adding extra nodes to the DOM.

Hooks
Hooks provide us with all React Features without using classes. React Hooks is the new feature through this we can use the state and lifecycle method inside the functional component without having to write the class component.

UseEffect() Hook
useEffect is the hook that provides us the methods through which we can use lifeCycle inside the functional component. This useEffect runs whenever the component renders. Basically, useEffect is the combination of componentDidMount, componentDidUpdate and componentWillUnMount lifeCycle’s. We can use this useEffect in multiple ways like componentDidMount lifecycle, etc.

Redux
Redux is a state management system for a cross-component or app-wide state. So it helps us manage state, data that changes and affects our application and what we display on the screen. It helps us to manage across multiple components and app-wide state.

We can split the definition of the state into three main kinds of state

1. Local state
2. Cross-component/ Cross multiple components
3. App-wide state.

Local state:- State that belongs to a single component.

Example:- Listening to user input in the input field. (text field)

Cross-component/ Cross multiple components:- State that affects multiple components.

Example:- Open/close state of a modal overlay. (prop drilling)

App-wide state:- State that affects the entire app or almost all components.

Example:- User authentication status. (prop drilling)

So both React Context (prop drilling) and Redux are there to help us manage such cross-component or app-wide States.