Mac环境搭建react工程并引入ant design

1、安装node

确认电脑上已安装node.js，可以在终端输入命令$ node -v 按回车键若有返回版本号说明已安装

2、安装npm

验证方法同一$ npm -v

3、全局安装 create-react-app

其中sudo表示mac系统特有的授权，windows上无需加上这个

$ sudo npm install -g create-react-app

4、create-react-app 快速构建React开发环境

$  create-react-app project_name

create-react-app自动创建的项目是基于webpack+ES6；搭建完成后会生成一个名为project_name的文件夹。

5、安装React

$ npm init
$ npm install --save react react-dom

6、开启ES6和JSX

$ npm install --save-dev babel-cli

$ npm install @babel/preset-env --save-dev

安装完后，项目跟目录新建一个.babelrc文件 ，并进行配置，如下

{
  "presets": ["@babel/preset-env"]
}

7、运行项目

进入上一步生成的项目 cd project_name ；然后再执行 npm start

在浏览器中打开http://localhost:3000/，就可以访问了

8、安装路由

因为React Router DOM已经被发布到npm上去了，所以可以通过npm和yarn来安装它。

$ npm install react-router-dom

Router.js

import React from 'react'
import { BrowserRouter as Router , Route , Link } from 'react-router-dom';
import One from '../component/one'
import Two from '../component/two'

function Index() {
  return <h2>Home</h2>
}

function About() {
  return <h2>About</h2>
}

function Users() {
  return <h2>Users</h2>
}

function AppRouter() {
  return(
      <Router>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
        <Route path="/one/" component={One} />
        <Route path="/two/" component={Two} />
      </Router>
  )

}

export default AppRouter;

App.js

import React, { Component } from 'react';
import './App.css';
import Router from './router/Router'

class App extends Component {
  render() {
    return (
      <div className="App">
       <Router />
      </div>
    );
  }
}

export default App;

one.js

import React, { Component } from 'react';
import './App.css';
import Router from './router/Router'

class App extends Component {
  render() {
    return (
      <div className="App">
       <Router />
      </div>
    );
  }
}

export default App;

two.js

import React, { Component } from 'react';

class Two extends Component {
  render() {
    return (
        <div className="App">
          Here...
        </div>
    );
  }
}

export default Two;

9、引入 Ant Design

$ yarn add antd

然后修改src/App.css文件，在文件顶部导入antd.css，完成

@import '~antd/dist/antd.css';

参考地址：

https://www.jianshu.com/p/7343578ad5e9
https://blog.csdn.net/qq_34208844/article/details/83750847