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

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

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

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

项目运行成功vue

配置webstorm支持react语法提示

删除项目没必要要的文件

在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" />
复制代码

开始配置

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
复制代码

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

/* 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>
        )
    }
}
复制代码

开始创建第一个样式react

效果以下webpack

3、打包本地部署ios

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

本地部署成功git

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

配置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')
    ]
},
复制代码

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

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>
        )
    }
}
复制代码

6、尝试引入第三方库zepto

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

效果

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

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