Django5+React18前后端分离开发实战13 使用React创建前端项目

embedded/2024/10/22 14:37:28/

先将nodejs的版本切换到18：
在这里插入图片描述

接着，创建项目：

npx create-react-app frontend

在这里插入图片描述

接着，使用webstorm打开这个刚创建的项目：
在这里插入图片描述

添加一个npm run start的配置：
在这里插入图片描述

通过start启动服务：
在这里插入图片描述

在这里插入图片描述

浏览器访问：http://localhost:3000/

在这里插入图片描述

安装bootstrap

执行命令安装：

yarn add react-bootstrap bootstrap

在这里插入图片描述

安装react-router

这里我们安装5版本：

yarn add react-router-dom@5

在这里插入图片描述

整理依赖

修改 package.json ，移除不必要的依赖：

{"name": "frontend","version": "0.1.0","private": true,"dependencies": {"bootstrap": "^5.3.3","react": "^18.3.1","react-bootstrap": "^2.10.2","react-dom": "^18.3.1","react-router-dom": "5","react-scripts": "5.0.1","web-vitals": "^2.1.4"},"scripts": {"start": "react-scripts start","build": "react-scripts build"},"browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]}
}

之后执行命令更新依赖：

yarn

优化代码

删除不必要的文件，将App.js修改如下：

function App() {return (<div className="App">你好，React18</div>);
}export default App;

在这里插入图片描述

index.js也需要修改：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App/></React.StrictMode>
);
reportWebVitals();