当前位置：首页 > news >正文

【React项目】从0搭建项目，项目准备和基础构建

news 来源：原创 2024/5/3 11:58:38

一.项目准备

1.项目搭建

初始化项目

1.初始化项目：当前目录下执行cmd npx create-react-app hkzf-mobile
在这里插入图片描述
2.创建完成

3.启动项目，在项目根目录里面执行命令：yarn start

在这里插入图片描述
要先cd 到穿件好的项目目录里面去

4.项目启动成功

浏览器会自动打开http://localhost:3000/

就算成功！

5.调整目录

1.因为有很多东西，是初始化项目多余的
2.因此我们是需要调整当前模板的文件，来当作我们开发的初始化
3.优化成下面这样，多的就删掉，少的就创建

在这里插入图片描述
如下

1.2组件库antd-mobile

介绍和使用

1.打开antd-mobile的文档
2.安装：yarn add antd-mobile
3.在App.js根组件中导入要使用的组件
4.渲染组件
5.在index.js中导入组件库样式

App.js文件

import React from "react";

// 导入要使用的组件
import {Button} from 'antd-mobile'

function App() {
  return (
    <div className="App">
     项目根组件
     <Button>Button</Button>
    </div>
  );
}

export default App;

查看效果
在这里插入图片描述

1.3配置基础路由

步骤

1.安装：yarn add react-router-dom
2.导入路由组件：Router /Route /Link
3.在pages 文件夹中创建Home/index.js和CityList/index.js两个组件
4.使用Route组件配置首页和城市选择页面

在这里插入图片描述

app.js

import React from "react";


import {BrowserRouter as Router , Route ,Link} from 'react-router-dom'
// 导入首页和城市选择两个组件（页面）
import Home from './pages/Home'
import CityList from './pages/CityList'

// 导入要使用的组件
import {Button} from 'antd-mobile'

function App() {
  return (
    <Router>
      {/* <div className="App"> */}
        <Link to={'/home'}>首页</Link>
        <Link to={'/cityList'}>城市选择</Link>

        <Route path="/home" component={Home}></Route>
        <Route path="/cityList" component={CityList}></Route>
      {/* </div> */}
    </Router>
  );
}

export default App;