Basic root reactjs

 Today i will share tutorial or anything name about basic root in React.

Let see and analyzed scripts below :

import {

    BrowserRouter,

    Route,

    Routes,

    Navigate,

  } from "react-router-dom";

   

  // import Home component

  import Home from "./pages/layout";

  // import About component

 

   

  function App() {

    return (

      <>

        {/* This is the alias of BrowserRouter i.e. Router */}

        <BrowserRouter>

          <Routes>

           

            <Route path="/" element={<Home/>} />

           

          </Routes>

        </BrowserRouter>

       

      </>

    );

  }

  export default App;

This scripts support version like below :

"version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.16.5",

    "@testing-library/react": "^13.4.0",

    "@testing-library/user-event": "^13.5.0",

    "react": "^18.2.0",

    "react-dom": "^18.2.0",

    "react-scripts": "^5.0.1",

    "use-force-update": "^1.0.11",

    "web-vitals": "^2.1.4"

  },

  "scripts": {

    "start": "react-scripts --openssl-legacy-provider start",

    "build": "react-scripts --openssl-legacy-provider build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  },

  "devDependencies": {

    "react-router-dom": "^6.11.2"

  }

I am sorry cannot explaining above scripts, because i'm too busy to typing and explaining more.

Thanks,