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 Home
}

function About() {
  return About
}

function Users() {
  return Users
}

function AppRouter() {
  return(
      
        
          
            
              Home
            
            
              About
            
            
              Users
            
          
        

        
        
        
        
        
      
  )

}

export default AppRouter;

App.js

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

class App extends Component {
  render() {
    return (
      
       
      
    );
  }
}

export default App;

one.js

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

class App extends Component {
  render() {
    return (
      
       
      
    );
  }
}

export default App;

two.js

import React, { Component } from 'react';

class Two extends Component {
  render() {
    return (
        
          Here...
        
    );
  }
}

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