React电商项目--01项目搭建

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战。

一、使用create-react-app脚手架搭建项目

// 搭建
create-react-app react-shop2.0
// 进入项目
cd react-shop2.0
// 运行项目
npm run start

项目运行成功

1. 配置webstorm支持react语法提示

2. 删除项目不必要的文件

3. 在index.html中加入一些移动端的适配属性

// 视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
// ios下电话邮箱识别
 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
 // ie兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

4. 开始配置

npm run eject // 导出配置
// 在package.json中安装三个依赖
"url-search-params-polyfill": "^5.0.0",
"babel-plugin-react-html-attrs": "^2.1.0",
"react-router-dom": "^4.3.1"
// 重新安装
npm i

二、开始配置路由和样式 改造app.js 为router.js

/*
 HashRouter:有#号

 BrowserRouter:没有#号

 Switch:只要匹配到一个地址不往下匹配，相当于for循环里面的break

 Link:跳转页面，相当于vue里面的router-link
exact :完全匹配路由

* */
import React from 'react';
import  {HashRouter as Router,Route,Switch}  from  'react-router-dom';
//import {PrivateRoute} from './routes/private';
// import asyncComponents from './components/async/AsyncComponent'; 
// const IndexComponent=asyncComponents(()=>import('./pages/home/index/index'));
import IndexComponent from './pages/home/index/index';
//import {PrivateRoute} from './routes/private';
export default class RouterComponent extends React.Component{
    render(){
        return(
            <React.Fragment>
                <Router>
                    <React.Fragment>
                        <Switch>
                            <Route exact path="/" component={IndexComponent} ></Route>
                        </Switch>
                    </React.Fragment>
                </Router>
            </React.Fragment>
        )
    }
}

开始建立第一个样式

效果如下

三、打包本地部署

// 安装服务
npm i -g serve
// 打包
npm run build
// 本地起服务
cd build
serve -s build

本地部署成功

四、CSS模块化（这些配置多，后面提供git地址，搭建好的项目）

配置webpack dev， prod都需要配置
{
  test: cssRegex,
  //exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
      modules: true, //开启css模块化
      //[path]-[name]-[local]-[hash:base64:6]
      localIdentName: '[local]-[hash:base64:6]'
  }),
    exclude:[//排除这两个文件夹下面的css文件
        resolve('node_modules'),
        resolve('src/assets/css/common')
    ]
},

五、路由模块化 引入官方提供的异步导入路由的方法

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
    class AsyncComponent extends Component {
        constructor(props) {
            super(props);

            this.state = {
                component: null
            };
        }

        async componentDidMount() {
            const { default: component } = await importComponent();

            this.setState({
                component: component
            });
        }

        render() {
            const C = this.state.component;

            return C ? <C {...this.props} /> : null;
        }
    }

    return AsyncComponent;
}

更改router.js配置

/*
 HashRouter:有#号

 BrowserRouter:没有#号

 Switch:只要匹配到一个地址不往下匹配，相当于for循环里面的break

 Link:跳转页面，相当于vue里面的router-link
exact :完全匹配路由

* */
import React from 'react';
import  {HashRouter as Router,Route,Switch}  from  'react-router-dom';
//import {PrivateRoute} from './routes/private';
import asyncComponents from './components/async/AsyncComponent';
const IndexComponent=asyncComponents(()=>import('./pages/home/index/index'));
export default class RouterComponent extends React.Component{
    render(){
        return(
            <React.Fragment>
                <Router>
                    <React.Fragment>
                        <Switch>
                            <Route exact path="/" component={IndexComponent} ></Route>
                        </Switch>
                    </React.Fragment>
                </Router>
            </React.Fragment>
        )
    }
}

六、尝试引入第三方库zepto

在asserts/js/libs/下添加zepto
在index.js 中引入
在homepage中使用获取dom元素
componentDidMount(){
    console.log($(".app").html());
}

效果

由于使用了路由模块化，加载的js变多了，变小了，速度也提升了

好了， 项目基本搭建好了， 后面的文章和我一起来做react商城项目吧。 git地址： github.com/liujun8892/…