Mac OS环境下搭建react项目、安装4.0及以上路由

一、安装node

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

二、安装npm

  验证方法同一$ npm -v

三、安装全局create-react-app

$ sudo npm install -g create-react-app

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

创建成功提示图

   其中还需要特别注意的是，这里的代码输入过程中，若了的Tab空格，会报如下错误，重新输入正确的即可。（错误提示：Display all 1376 possibilities?(y or n)）

报错的情况

四、使用create-react-app 快速构建React开发环境

$  create-react-app project_name

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

五、安装React

使用npm来安装 React：

npm init
npm install --save react react-dom

六、开启ES6和JSX

Babel安装

进入Babel安装说明，https://babeljs.io/en/setup/#installation，说明了如何在多种不同环境中配置Babel。因为我用的是webstorm编辑器，所以选择wenstorm。

babel安装
根据提示安装即可

npm install --save-dev babel-cli

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

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

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

七、运行项目

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

  在浏览器中打开http://localhost:3000/，就可以访问了，结果图如下

八、安装路由

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

npm install react-router-dom

示例：基本路由

• 在src下新建一个文件夹router — Router.js 用来进行路由配置。

• 在src下新建一个文件夹component用来存放组件。

  
  目录

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 { Link } from 'react-router-dom';

class One extends Component {
  render() {
    return (
        <div className="App">
          <Link to="/two/">oneoneoneone</Link>
        </div>
    );
  }
}

export default One;

two.js

import React, { Component } from 'react';

class Two extends Component {
  render() {
    return (
        <div className="App">
          就是这里，开心
        </div>
    );
  }
}

export default Two;

根目录

根目录

url为 /one/ :

one组件

点击one组件跳转到two组件

two组件