重学前端 - react 项目第一节：创建react 项目

重学前端 - react 项目第一节：创建react 项目

• 简介：之前一直使用的都是 vue 全家桶开发项目，现在在新的项目上开始使用react开发。
  
  现在开始在重新学习一下 react 相关技术。
  
  本项目使用：
  • react 18.1.0
  • react-router-dom 6.3.0 管理路由
  • redux 全局状态管理
  • typescript 加强
  • Ant Design 4.20.4 全局 UI
  • axios 网络请求
    
    下面开始我们学习 react

创建项目

// 跟着控制提示选择自己项目配置项
npx create-react-app <项目名称>

目录结构

├── public
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components // 公共组件
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── route // 自己新建 route 管理文件夹 方便后续对路由进行统一管理
    ├── setupTests.js
    └── views // 页面

开始运行项目

// 进入新建好的项目
cd <新建的项目名称>
// 开始命令
npm start
// 会直接打开默认浏览器，或者访问http://localhost:3000 就会开间 react logo

配置路由

npm install react-router-dom

页面添加路由配置

• 新建 Home.jsx/Home/index.jsx 文件

import * as React from "react";

class Home extends React.Component{
  constructor(porps) {
    super(porps);
    this.state = {
      message: '首页'
    }
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default Home;

• 新建 Login 登陆页面

import React from "react";

class Login extends React.Component{
  render() {
    return (
      <div> 登陆 </div>
    )
  }
}

export default Login;

• 编辑 App.js

import './App.css';
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Home from "../views/Home";
import Login from "../views/Login";

function App() {
  return (
    <BrowserRouter>
        <Routes>
            <Route path={'/'} element={<Home/>} />
            <Route path={'/login'} element={<Login/>}/>
        </Routes>
    </BrowserRouter>
  );
}

export default App;

• 配置成功访问 http://localhost:3000 会直接看到页面上显示 Home
  
  或者 http://localhost:3000/login 页面显示 登陆，到此路由配置完成

下一节 配置 typescript + scss

关注公众号: 影的记忆 同步更新