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

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

1、检查本地环境

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

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

js

复制代码

node -v npm -v

2、安装yarn

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

js

复制代码

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

3、创建React项目

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

bash

复制代码

npx create-react-app nexusa --template typescript

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

目录结构

你的目录结构应该如下：

4、使用yarn启动

js

复制代码

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

启动成功！

5、 配置craco

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

js

复制代码

npm run eject

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

安装

js

复制代码

yarn add @craco/craco

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

找到package.json

json

复制代码

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

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

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

ini

复制代码

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

6、Ant Design的使用

js

复制代码

yarn add antd

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

js

复制代码

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

js

复制代码

yarn add react-router-dom

完善文件夹

src文件夹下新建

js

复制代码

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

About.tsx文件

js

复制代码

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

Home.tsx文件

js

复制代码

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

srx文件夹下的index.tsx文件

js

复制代码

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 引入使用路由：

js

复制代码

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包裹起来

js

复制代码

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文件

js

复制代码

//更改后 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;

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

原文呢链接：https://juejin.cn/post/7348264380260630563