React

React:

  • npx create-react-app my-react-app
  • cd my-react-app
  • npm start

How to create the route in React js:

  • npm latest version: npm install -g npm@latest
  • npm i react-router-dom

Folder structure:

  • Within the src folder, we'll create a folder named components with several files: 
  • Home.js
  • Blogs.js
  • Contact.js

     In index.js add the below line:

  • import { BrowserRouter } from 'react-router-dom';
  • const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>
    );

      In App.js paste this code:

  • import { Routes, Route } from 'react-router-dom'
    import Home from './components/Home'
    import Blog from './components/Blog'
    import Contact from './components/Contact'

    function App() {
        return (
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/Blog' element={<Blog />} />
            <Route path='/Contact' element={<Contact />} />
          </Routes>
        );
      }
     
      export default App;

           Home.js

  • import React from 'react'

    const Home = () => {
      return (
        <div>Home Page</div>
      )
    }

    export default Home

           Blog.js

  • import React from 'react'

    const Blog = () => {
      return (
        <div>Blog Page</div>
      )
    }

    export default Blog

           Contact.js

  • import React from 'react'

    const Contact = () => {
      return (
        <div>Contact Page</div>
      )
    }

    export default Contact

Import component on the home page:

  • In App.js import Navbar.js
  • import Navbar from "./components/Navbar";
  • <Navbar />

Blink page title:

  • When you onClick() the button
  • setInterval(() => {
          document.title = "React | Button clicked";
        }, 1000);
        setInterval(() => {
          document.title = "React | Home";
        }, 2000);

How to create a router in react:

  • npm i react-router-dom
  • In App.js:
  • import {
      BrowserRouter,
      Routes,
      Route,
    } from "react-router-dom";
  • <BrowserRouter>
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
    </BrowserRouter>

  • import { Link } from "react-router-dom";

    function Home() {
      return (
        <div>
          <h1>Home</h1>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/blog">About</Link>
            <Link to="/contact">About</Link>
          </nav>
        </div>
      );
    }

           













































Location: India

Comments

Post a Comment

Popular posts from this blog

Create a Connection in Node js and make an API

server.js import express from "express" ; import mongoose from "mongoose" ; import bodyParser from "body-parser" ; import dotenv from 'dotenv' ; import router from "./routes/index.js" ; import cors from "cors" ; dotenv . config (); const app = express (); app . use ( cors ({     origin : '*' , })) app . use ( bodyParser . json ()); app . use ( express . static ( 'public' )); app . use ( '/media' , express . static ( 'media' )); mongoose . connect ( process . env . MONGO_URI , {     useNewUrlParser : true ,     useUnifiedTopology : true , }). then (() => {     console . log ( 'Connected to MongoDB' ); }). catch (( error ) => {     console . error ( 'MongoDB connection error:' , error ); }); app . use ( '/api' , router ); app . get ( '/' , ( req , res ) => {     res . send ( 'Hello, API!' ); }); const PORT = process . env . ...
Read more

React JS | Store form data in localStorage

 Register.jsx import React , { useState } from 'react' ; import { Link , useNavigate } from 'react-router-dom' ; export default function Register () {   const [ user , setUser ] = useState ({     name : "" ,     email : "" ,     password : ""   });   const navigate = useNavigate ();   const handleSubmit = ( e ) => {     e . preventDefault ();     const formData = {       name : user . name ,       email : user . email ,       password : user . password     };     localStorage . setItem ( "userData" , JSON . stringify ( formData ));     navigate ( "/login" );   }   return (     <>       < section className = 'container w-25' >         < div className = "card my-5" >           < div className = "card-header" > ...
Read more

React Redux Toolkit

  1. Install Redux Toolkit and React-Redux: npm install @reduxjs/toolkit react-redux 2. Create a Redux Store: import { configureStore } from "@reduxjs/toolkit" ; import counterReducer from "./slices/counterSlice" ; // Import your slice export const store = configureStore ({   reducer : {     counter : counterReducer , // Add your reducers here   }, }); export default store ; 3. Create a Slice:  import { createSlice } from "@reduxjs/toolkit" ; const initialState = {   count : 0 , }; const counterSlice = createSlice ({   name : "counter" ,   initialState ,   reducers : {     increment : ( state ) => {       state . count += 1 ;     },     decrement : ( state ) => {       state . count -= 1 ;     },     incrementByAmount : ( state , action ) => {       state . count += action . payload ;  ...
Read more