React实战项目从0到1搭建（CRA官方版本）

React实战项目从0到1搭建（官方版本）

1、检查本地环境

我本地采用的nvm控制的版本，尽量建议采用nvm然后使用最新的版本来开发。

nvm:进行控制node版本的工具。 nvm版本20.10.0 node版本 20.10.0 检查node和npm环境

node -v
npm -v

2、安装yarn

个人建议使用yarn，别用什么pnpm之类的，除了bug非常难解决，而且还没有原因。

npm install -g yarn
yarn --version //1.22.21

3、创建React项目

官方推荐的方式，并且直接建造ts版本的

npx create-react-app nexusa --template typescript

创建过程之中可以看到安装了React核心的东西

目录结构

你的目录结构应该如下：

4、使用yarn启动

cd nexusa 进入目录
yarn start 启动
yarn build 打包

启动成功！

5、 配置craco

官方修改webpack需要暴露出来webpack配置,给项目配置webpack内容。必须在package.json中

npm run eject 

craco可以帮助我们可以自己配置启动的webpack，或者一些环境变量等等，允许我们在不 eject 的情况下，对 Create React App 默认配置进行灵活的定制和覆盖.

安装

yarn add @craco/craco

下载完成后，我们需要在启动环境中替换为craco

找到package.json

json
复制代码
"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "craco eject"
},

在项目根目录下面创建craco.config.js

文件名字不能写错。默认采用craco来加载项目，读取这个文件。 可以在这个文件中配置webpack相关的内容

ini
复制代码
module.exports = {
​
}

6、Ant Design的使用

yarn add antd

修改 src/App.js，引入 antd 的按钮组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd';
function App() {
  return (
    <div className="App">
    <Button type="primary">Button</Button>
  </div>
  );
}
export default App;

7、路由react-router-dom使用

安装路由react-router-dom

yarn add react-router-dom

完善文件夹

src文件夹下新建

src
    pages
        --About.tsx
        --Home.tsx
    router
        --index.tsx
    index.tsx

About.tsx文件

import React from "react";
import { Button } from 'antd';
export default function About(){
    return (<><div><Button type="primary">我是About</Button></div></>)
}

Home.tsx文件

import React from "react";
import { Button } from 'antd';
export default function Home(){
    return (<><div><Button type="primary">我是Home</Button></div></>)
}

srx文件夹下的index.tsx文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Home.tsx 引入使用路由：

 import React from "react";
 import { useNavigate, Link ,BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { Button } from 'antd';
 export default function Home(){
    let navigate = useNavigate();
    const toHome=()=>{
        console.log('去Home页面');
        navigate("/home", { replace: true });
    }
    const toAbout=()=>{
        console.log('点击去about页面');
        navigate("/about", { replace: true });
    }
   return (<>
    <div className="home">
        <Button type="primary" onClick={toHome}>去Home页面</Button>
        <Button type="primary" onClick={toAbout}>点击去about页面</Button>
        <Button type="primary"><Link to="/about?a=10">去about</Link></Button>
    </div>
    </>)
  }

这里直接使用路由跳转我们会发现报错：

这里运行你会发现，奇怪，项目怎么会报错呢。

因为我们还没在App.jsx里面包裹我们的路由

App.tsx文件中新增路由，并且将app包裹起来

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
    <div className="App">
        <Home/> 
    </div>
    </BrowserRouter>
  );
}

实现路由跳转App.jsx

App.jsx里面引入路由v6 版本里面的路由 注意你的"react-router-dom": "^6.22.3",版本，路由四五六的方式都有些不一样

更改根目录下面App.jsx实现路由跳转

App.jsx文件

//更改后
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Home from '../src/pages/Home'
import About from '../src/pages/About'
// import Routers from '../src/router/index';
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 主页路径 */}
          <Route path="/" element={<Home />} /> 
          <Route path="/Home" element={<Home />} />
          <Route path="/About" element={<About />} /> {/* 登录页路径 */}
        </Routes>
      </Router>
    </div>
  );
}

export default App;

借助路由我们实现效果点击如下

8、