ReactJS

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.

Features of React.js: There are unique features are available on React because that it is widely popular.

Use JSX: It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. It makes it easier for us to create templates.
Virtual DOM: Virtual DOM exists which is like a lightweight copy of the actual DOM. So for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen.
One-way Data Binding: This feature gives you better control over your application.
Component: A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
Performance: React.js use JSX, which is faster compared to normal JavaScript and HTML. Virtual DOM is a less time taking procedure to update webpages content.

Create a new React project

                
                    npx create-react-app myapp

class based component

                                        import React, { Component } from 'react'                                      
                                        export class Contact extends Component {
                                        render() {
                                          return (
                                            Contact
                                          )
                                        }
                                      }
                                      
                                      export default Contact

fuction based component

                                         import React from 'react'                                      
                                        const Contact = () => {
                                        return (
                                          Contact
                                        )
                                      }
                                      
                                      export default Contact

start reactjs app
```
    
        npm start
```

File structure in src folder (use cmd)

    
      mkdir Utils Assets Components Config Layouts Middleware Pages Routes Services Utils

ADD blank many js files

    
      type NUL > sideBar.js 
      type NUL > Footer.js 
      type NUL > header.js

import react-router-dom
```
    
      npm i react-router-dom
```

import router and routes

    
      import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

  
    
    <Router>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="" element={<Singlemovie />}/>
        <Route path="*" element={<Errorpage />}/>
      </Routes>
      </Router>

create nested routes

    
      import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

  
    
    <Router>
    <Routes>
      <Route path="/" element={<Home />}>
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="*" element={<Errorpage />} />
      </Route>
    </Routes>
  </Router>

add outlet in parent route in above ex: home.js

  
    
    import { Outlet } from 'react-router-dom'

  
   <Outlet/>

create go back button feature

          
            import { useNavigate } from 'react-router-dom'

          
            <button onClick={()=>{navigate(-1);}}>Go back</button>

for fetch id from link(route)
useParams();
According to the definition in React Router doc, useParams returns: an object of key/value pairs of URL parameters. Use it to access match.params of the current route
- What does it mean in plain English?
- It means whatever you set up in useParams(ex: title), your params have to match with the < Route path='/path/:title' > .
```
          
            import { useParams } from 'react-router-dom'
      
      
```
```
    
      const { id }=useParams();
```

React useContext Hook

React Context is a way to manage state globally.
It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

Context provides a way to pass data or state through the component tree without having to pass props down manually through each nested component. It is designed to share data that can be considered as global data for a tree of React components, such as the current authenticated user or theme(e.g. color, paddings, margins, font-sizes).

Context API uses Context. Provider and Context. Consumer Components pass down the data but it is very cumbersome to write the long functional code to use this Context API. So useContext hook helps to make the code more readable, less verbose and removes the need to introduce Consumer Component. The useContext hook is the new addition in React 16.8.

Import usecontext

                            
                  import React, { useContext } from "react";

For Create context value

                            
                              const AppContext = React.createContext();

For set provider value

                            
                              return <AppContext.Provider  value="soham">{children}</AppContext.Provider>

For access value

                            
                              const auth = useContext(AuthContext);

add appprovider in index.js

                            
                            <AppProvider>         </AppProvider>

create props

                    
                      function Avatar(props) {
                        let person = props.person;
                        let size = props.size;
                        // ...
                      }

                        
                          function Avatar({ person, size }) {
                            // ...
                          }

useState is a React Hook that lets you add a state variable to your component.

          
            const [state, setState] = useState(initialState)

Enable dark mode (create onClick toogle fuction in buuton and mode input to style)

          
            const [statebtn, setbtn] = useState("Enable dark mode");
            const [mode, setMode] = useState({
              color: "black",
              backcolor: "white",
            });
            const toogle = () => {
              if (mode.color === "black") {
                setMode({
                  color: "white",
                  backgroundColor: "black",
                });
                setbtn("Enable light mode");
              } else {
                setMode({
                  color: "black",
                  backgroundColor: "white",
                });
                setbtn("Enable dark mode");
              }
            };

ReactJS

Reactjs

useParams();

React useContext Hook