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/…