react搭建项目（create-react-app）

一，初始化

这里使用create-react-app直接初始化一个基本的react项目：

步骤：

1 npm install -g create-react-app   全局安装

2 初始方式：（项目命名不要含有大写字母）

2.1 

create-react-app react-cli-app 

 [这种最常见遇见报 create-react-app不是命令的错，解决方案有：https://stackoverflow.com/questions/38751830/create-react-app-installation-error-command-not-found

但是我最后，也依然没有可行，有兴趣可以试试]

2.2  

npx create-react-app react-cli-app

npm run start    运行

到这一步后项目能运行成功，但是如果再想配置更多就需要找到配置文件，

运行命令： 

npm run eject

然后就能看到新增两个目录 

二，【新建一个/Home    /Account   /Goods 页面】

多页面，底部导航切换使用路由

1 创建文件先。

创建 home account goods  底部导航footernav,导航内容下面：

import React,{Component} from 'react'
import {Link} from 'react-router-dom'
class FooterNav extends Component {
    constructor(props) {//getInitialState()
        super(props);

    }
    componentWillMount() {
    }
    render() {
        return (
            <div>
                FooterNav
                <Link to="/Home">home</Link>
                <Link to="/Goods">Goods</Link>
                <Link to="/Account">Account</Link>
            </div>
        )
    }


export default FooterNav

 

【这里我将原来的css文件都改scss了，然后会报错提示你下载node-sass,npm install node-sass下载重新运行就好了】

 

2 配置路由切换：

下载npm i  react-router-dom -s

route.jsx

import React,{Component} from 'react'
import { HashRouter as Router, Route, Switch} from 'react-router-dom'

import Home from '../views/Home/Home.jsx'
import Goods from '../views/Goods/Goods.jsx'
import Account from '../views/Account/Account.jsx'
class RouterMap extends Component {
    constructor(props) {//getInitialState()
        super(props);
      
    }

    componentWillMount() {
    }


    render() {
        const location = this.props.location
        return (
            <div id="RouterMap">
                <Switch location={location}>
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/Home" component={Home}></Route>
                    <Route path="/Goods" component={Goods}></Route>
                    <Route path="/Account" component={Account}></Route>
                </Switch>
            </div>
        )
    }

 
}

export default RouterMap

然后修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

最后修改app.js

import React,{Component,Fragment} from 'react';
import {HashRouter as Router} from 'react-router-dom'
//公共组件方法
import FooterNav from './component/FooterNav.jsx'//底部导航
import RouterMap from './router/router.jsx'
import './App.css';

function App() {
  return (
    <div className="App">
        <Router>
            <Fragment>
                <RouterMap></RouterMap>
                <FooterNav></FooterNav>
            </Fragment>
        </Router>
    </div>
  );
}

export default App;

【这里的路由是v4以上版本的写法，v3与v4差异：https://blog.csdn.net/github_38928905/article/details/89239090】

然后在运行通过路由就能切换了；

 

如果执行浏览器自动打了断点，并且控制台输出：

这时候去下载就好。

步骤：

1 git clone https://github.com/facebook/react-devtools.git

然后得到一个react-devtools文件夹；

2 在react-devtools里面安装依赖，这里可以使用淘宝镜像

npm  install  

3 依赖安装完成后

npm run build:extension:chrome 

然后在当前目录中生成一个新的文件夹，react-devtools -> shells -> chrome -> build -> unpacked文件夹

4 在chrome中的扩展程序中将打包的文件夹放入

然后就行了。