创建项目 & 启动

方式一 npm

全局安装脚手架工具包

npm i -g create-react-app

项目初始化

create-react-app + 项目名称

方式二 npx

npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用

直接创建项目

`npx create-react-app `+ 项目名称

启动

使用yarn包管理工具安装依赖包，执行 yarn start 启动项目

工作目录

去除

删除脚手架src下的所有文件

编写

在src下自己新建 index.js pages router util components 等文件目录

入口文件(src/index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './router/index';
import { BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  </React.StrictMode>
);

路由文件

[tips]: react-router-dom需要自己手动安装，router 6 版本有个改动 Switch不再使用,而使用Routes

import React from 'react'
import { Routes, Route} from 'react-router-dom'
import Home from '../pages/home/index.jsx'


const Router = () => {
    return (
            <Routes>
                <Route path="/home" element={<Home />}></Route>
            </Routes>
    )
}

export default Router

react 脚手架使用基础