【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile最详细教程

​​​​前提相关：

npm install -g create-react-app    创建React项目

create-react-app -V        检测React版本号

npm install [email protected] [email protected] --save  降低版本

在创建该项目前我们需要准备的是：

版本号不低于6.14.8的node.js 以及 git

node.js官方网址：Node.js 中文网        这里我们推荐下载长期支持版本

一、通过create-React-app 脚手架搭建项目

1.打开目标文件夹 在地址栏中输入cmd 呼出命令提示窗

2.输入React脚手架项目搭建命令，我们需要注意的是项目名称中不能出现大写字母

npx create-react-app vipshop --template typescript

此时回车就可以正式创建React项目了，当出现如下图中所示的Happy hacking就说明下载乘成功，然后我们进入我们的VsCode中进入我们的目录中，就可以看到我们生成的React项目，如出现后缀名为.tsx的文件就说明我们的React+TypeScript项目雏形搭建完成。

 二、运行我们的React脚手架

进入项目跟目录下，输入运行命令 ：npm start

npm start

三、配置React路由

第一步、

• 在cmd中输入npm路由下载路由指令

npm i [email protected] [email protected] react-router-config @types/react-router-config @types/react-router-dom -S

第二步、

• 在src目录下创建views文件夹，并在文件夹下 创建Home，Contact，About，Navbar四个tsx文件夹，其中Navbar用来控制路由其他三个页面用来展示

•  Home.tsx

import React, { Component } from "react";
export default class Home extends Component {
  render() {
    return (
      <div className="home">
        <div className="container">
          <h3 className="center"> Home页面</h3>
          <p>欢迎来到首页</p>
        </div>
      </div>
    );
  }
}

• Contact.tsx

import React, { Component } from "react";
export default class Contact extends Component {
  render() {
    return (
      <div className="contact">
        <div className="container">
          <h3 className="center"> Contact页面</h3>
          <p>欢迎来到联系我们页面！</p>
        </div>
      </div>
    );
  }
}

• About.tsx

import React, { Component } from "react";
export default class About extends Component {
  render() {
    return (
      <div className="about">
        <div className="container">
          <h3 className="center"> About页面</h3>
          <p>欢迎来到关于我们页面！</p>
        </div>
      </div>
    );
  }
}

• Navbar.tsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class Navbar extends Component {
    render() {
        return (
            <nav className="nav-wrapper">
                <div className="list">
                    <ul>
                        <li><Link to='/'>Home</Link></li>
                        <li><Link to='/about'>About</Link></li>
                        <li><Link to='/contact'>Contact</Link></li>
                    </ul>
                </div>
            </nav>
        )
    }
}

第三步、

src目录下创建routes文件夹，同时创建index.ts.使用ReactConfig对路由进行管理 

• index.ts

// 导入路由组件
import Home from '../views/Home'
import About from '../views/About'
import Contact from '../views/Contact'
// 导入路由管理工具
import {RouteConfig} from 'react-router-config'
 
const routes:RouteConfig = [
  {
    path:'/',
    exact:true,
    component:Home
  },
  {
    path:'/about',
    exact:true,
    component:About
  },
  {
    path:'/contact',
    exact:true,
    component:Contact
  }
]
 
export default routes;

第四步、

• 在src根目录App.tsx引入Route，Navbar路由管理工具 

import React from "react";
// 引入路由导航栏
import Navbar from "./views/Navbar";
// 引入routes组件
import routes fr