第一章：react项目的构建和web端项目初始化的一些基本配置

第一：如何使用 create-react-app 快速构建 React 开发环境

npm install -g create-react-app
create-react-app react-demo
cd react-demo/
npm start

自动浏览器中打开 http://localhost:3000/ ，结果如下图所示： 

第二：项目构建完之后，由于本人喜欢使用sass编辑css

yarn add node-sass

然后把App.css 和 index.css 分别改成 App.scss 和 index.scss 

立刻就支持了，简单直接

第三：配置移动端自适应—淘宝弹性布局方案lib-flexible和postcss-px2rem

第一步：安装 lib-flexible，postcss-px2rem

yarn add lib-flexible postcss-px2rem

第二步：引入 lib-flexible

在项目入口文件 index.js 里 引入 lib-flexible

import 'lib-flexible'

第三步：在 config/webpack.config.js 文件里 做如下修改

你或许初始化之后 找不到这个文件：

npm run eject

运行 npm run eject  把项目配置文件config展示出来，进行自定义配置的模式 ，你会在config文件夹中找到webpack.config.js 这个配置js

const px2rem = require('postcss-px2rem')

px2rem({ remUnit: 75 })

// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62

 

第四步：修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了，舒服多了

 

第四：加入fastclick、解决web端点击延迟问题

yarn add fastclick

在index.js文件下加入

import FastClick from 'fastclick'

FastClick.attach(document.body);

第五：加入axios，http-proxy-middleware 配置请求代理

yarn add axios http-proxy-middleware

简单说明一下http-proxy-middleware的配置：

在src目录下新增setupProxy.js文件：

const {createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      '/index',
      {
        target: 'https://www.bilibili.com',
        changeOrigin: true
      }
    )
  )
};

然后在组件中测试一下：

componentDidMount = () => {
   //代理测试
    axios.get('/index/recommend.json')
        .then((res) => {
            console.log(res.data.list);
         })
           
 }

第六：加入react-router-dom路由管理

yarn add react-router-dom

简单运用一下：

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    // NavLink,
    Link
} from 'react-router-dom';
import './router.scss';
import Home from './home/Home';
import About from './about/About';

class Demo1 extends Component {
  render() {
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to='/'>首页</Link></li>
                    <li><Link to='/about'>about路由跳转</Link></li>
                </ul>
                <hr/>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </div>
        </Router>
    );
  }
}

export default Demo1;

第七：build的文件路径改成相对路径

这时候就要我们制定我们的项目根目录 —— 在package.json中配置 homepage

  "version": "0.1.0",
  "private": true,
  "homepage": ".",
 {
   ...
 }

 

备注：暂时新增这些配置先，有需要的再继续新增进去

源码地址：https://github.com/hwq888/react-demo