Create react scaffolding project - demo (react18 + react-router 6)

1. Install create-react-app

1.1 Execute the installation command

• Global installationcreate-react-app

  npm i -g create-react-app
  
  sudo npm i -g create-react-app
  

  
• Note: It is not recommended to install globally. It is recommended to use the npx command to install. For details, please refer to the official website, as follows:

  npx create-react-app my-app
  

  
  Official website:
  https://zh-hans.legacy.reactjs.org/docs/create-a-new-react-app.html .

1.2 Problems encountered during installation

1.2.1 Problem 1——npm ERR! code ENOTFOUND

• The problem description is as follows:

  npm ERR! code ENOTFOUND
  npm ERR! syscall getaddrinfo
  npm ERR! errno ENOTFOUND
  npm ERR! network request to https://registry.npmmirror.com/create-react-app failed, reason: getaddrinfo ENOTFOUND registry.npmmirror.com
  npm ERR! network This is a problem related to network connectivity.
  npm ERR! network In most cases you are behind a proxy or have bad network settings.
  npm ERR! network 
  npm ERR! network If you are behind a proxy, please make sure that the
  npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
  

  
• Solve the problem
  • If you use clashx, it may be a problem. The solution is as follows：
    • Just cancel the proxy
    • If after canceling the proxy and exiting clashx, the computer still cannot access the Internet, the solution is as follows:
      • 1⃣️: Update crashx;
      • 2⃣️: If it is already the latest version, then deal with the dns. The processing method is as follows (Mac): On the
        Mac computer, click the wifi icon – click Network Preferences – Advanced – dns, click the plus sign, add and 114.114.114.114save, and then you can go online.
        
  • If you have other questions, please refer to the following post:
    npm command create-react-app failled.

2. Create a project

2.1 Create project command

• The command is as follows:

  create-react-app react-demo1
  

  

2.2 View project structure

• as follows:
  

2.2.1 Directory structure

2.2.2 Points to note

• Note that the new version is different from the boss’s. The one automatically generated here is react18. The points to note are as follows:
  
• For details, please refer to the official website
  on how to upgrade to React 18 .
  

3. Start the project

• Start command:

  npm start
  

  
  

4. react-demo

• Create a reacr-demo2 and write your own small demo, mainly 3 files, as follows:
  
  

• Start to see the effect:
  

• It can be started, but it's so boring, so I'll just write something simple and continue...

5. react-demo optimization

5.1 Install routing

• It will be used in the project, so install it first.

  npm i react-router-dom
  

• Introduction:

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

• What needs attention is that different versions may have different syntax. I installed the latest version 6 here. If it is version 5, the syntax may be different. You need to pay attention to:
  
• For more detailed introduction, please refer to the official website:
  • https://react-router.docschina.org/.
  • react-router6----https://reactrouter.com/en/main.

5.2 Problems encountered

5.2.1 No routes matched location “/dog”

• The problem is described as follows:

  No routes matched location "/dog"  
  

  

• To solve the problem, pay attention to the new version of writing, as follows:

  <Routes>
      <Route exact path="/" element={
        
        <Home/>} />
      <Route path="/dog" element={
        
        <Dog/>} />
      <Route path="/cat" element={
        
        <Cat/>} />
  </Routes>
  

  

• For more reference, please go to the official website to see examples

  • https://reactrouter.com/en/6.6.1/start/examples.
  • https://github.com/remix-run/react-router/blob/dev/examples/basic/src/App.tsx.

5.2.2

5.3 Simple project design

5.3.1 Project effects

• as follows:
  
  
  
  

5.3.2 Project directory structure

• as follows:
  

5.3.3 Core code

• App.js is as follows:

  import PetHeader from './PetHeader/index'
  import PetBottom from './PetBottom/index'
  import PetLeft from './PetLeft';
  
  function App() {
        
        
    return (
      <div>
        <PetHeader></PetHeader>
        <PetLeft></PetLeft>
        <PetBottom/>
      </div>
    );
  }
  
  export default App;
  

• PetLef component
  

  import React from "react"
  import {
        
        BrowserRouter,Route,Routes,Link} from 'react-router-dom'
  import Home from "../Home"
  import Dog from "../Dog"
  import Cats from "../Cat/Cats"
  import './index.css'
  
  class PetLef extends React.Component{
        
        
      render(){
        
        
          return(
              <BrowserRouter>
                  <div className="myMainData left" >
                      {
        
        /* 编写路由链接  靠路由链接实现切换组件 */}
                      <ul>
                          <li><Link to="/">Home</Link></li>
                          <li><Link to="/dog">狗狗信息</Link></li>
                          <li><Link to="/cats">猫咪信息</Link></li>
                      </ul>
                  </div>
  
                  <div className="myMainData right" >
                          {
        
        /* 注册路由 */}
                      <Routes>
                          <Route exact path="/" element={
        
        <Home/>} />
                          <Route path="/dog" element={
        
        <Dog/>} />
                          <Route path="/cats/*" element={
        
        <Cats/>} />
                      </Routes>                       
                  </div>
              </BrowserRouter>
          )
      }
  }
  
  export default PetLef;
  
  

• Cats and Cat components
  

  import React from "react";
  import CatInfo from "./Info/CatInfo";
  import {
        
        Route,Routes,Link} from 'react-router-dom'
  
  class Cats extends React.Component{
        
        
      state = {
        
        
          cats:[
              {
        
        catId:'A1001',catName:'点点',catAge:5,catKind:'德文'},
              {
        
        catId:'A1002',catName:'阿苔',catAge:6,catKind:'德文'},
              {
        
        catId:'A1003',catName:'花花',catAge:2,catKind:'布偶'}
          ]
      };
      render(){
        
        
          const {
        
        cats} = this.state;
          return(
              <div>
                  <h2>猫咪信息</h2>
                  <ul>
                      {
        
        
                          cats.map((cat)=>{
        
        
                              return(
                                  <li key={
        
        cat.catId}>
                                      {
        
        /* <Link to='/cats/info/'> */}
                                      <Link to={
        
        `/cats/info/${
          
          cat.catId}/${
          
          cat.catName}`}>
                                          {
        
        cat.catId}--{
        
        cat.catName}--{
        
        cat.catAge}--{
        
        cat.catKind}
                                      </Link>
                                  </li>
                              )
                          })
                      }
                  </ul>
                  <br /><br />
                  <Routes>
                       {
        
        /* <Route path='info' element={<CatInfo/>} /> */}
                       <Route path='info/:catId/:catName' element={
        
        <CatInfo/>} />
                  </Routes>
              </div>
          )
      }
  }
  export default Cats;
  

  import React from "react";
  
  //这个注意：router6新特性，新增的hooks  必须函数式组件
  import {
        
         useParams } from "react-router-dom";
  
  function Cat(){
        
        
      // console.log(useParams());
      let {
        
        catId,catName} = useParams();
      return(
          <div>
              <h3>
                  {
        
        catId}--{
        
        catName}
              </h3>
          </div>
      )
  }
  
  export default Cat;
  

5.4 Project download

• It’s just a demo shown above. If you need more, you can optimize it yourself.
• If needed, you can download:
  react entry demo (react18 + react-router6) .