React学习笔记之简单项目搭建

React.jpeg

(1)使用到的技术及类库
create-react-app + Ant Design of React + redux + React-router + jQuery（jQuery纯属个人喜好哈哈）

(2)废话不多说直接上搭建流程
先装脚手架

npm install -g create-react-app

然后运行

create-react-app 你的项目名

然后一顿回车就ok了
cd 进项目文件夹

npm i

安装完毕后

npm start

运行效果.png

接下来扩展create-react-app项目的Webpack 配置
执行命令

npm run eject

执行完这个命令后会将封装在 CRA 中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。
接下来我们扩展下项目中package.json的dependencies加上如下代码

    "antd": "^3.1.3",
    "babel-plugin-import": "^1.6.3",
    "jquery": "^3.3.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"

然后再执行一下命令，把这些类库安装进去（jquery、路由、redux、蚂蚁组件等）

npm i

安装完成后我们现在已经把antd组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。

接下来找到项目中config文件夹下webpack.config.js找到下图位置添加代码如下 antd按需加载配置

['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]

接下来找到项目App.js改造代码如下

import React, {Component} from 'react';
import {createStore, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import thunk from "redux-thunk";
import Reducers from "./reducers/index"
import './App.css';
import $ from "jquery"
import {Switch, Route, Redirect} from "react-router-dom";
import page1 from "./page1/page1"
import page2 from "./page2/page2"
import {HashRouter} from "react-router-dom";

const store = createStore(Reducers, applyMiddleware(thunk));

class App extends Component {
    render() {
        $(window).scroll(function () { // 测试下jquery是否可用
            console.log("滚动打印")
        });
        return (
            <Provider store={store}> // 引入redux
                <HashRouter>  // 开始路由配置
                    <Switch>
                        <Route path="/" exact render={() => (<Redirect to="/index"/>)}/> // 匹配不到重定向路由
                        <Route path="/index" component={page1}/> // page1页面路由
                        <Route path="/page2" component={page2}/> // page2页面路由
                    </Switch>
                </HashRouter>
            </Provider>
        );
    }
}

export default App;

接下来创建src下文件夹page1、page2、reducer

page1文件夹下page1.js

import React, { Component } from 'react';
import {Button} from "antd"
import {NavLink} from "react-router-dom";
import {connect} from "react-redux";
class page1 extends Component {
    render() {
        return (
            <div className="App">
                <NavLink to={"/page2"}><Button>go page2</Button></NavLink> // 这里就是路由跳转到page2
                <div>这里是页面1</div>
                <br/>
                <br/>
                <br/>
                <Button onClick={() => { // 在这里面测试redux，顺便使用下antd组件Button
                    this.props.dispatch(function(dispatch){
                        dispatch({
                            type: "COUNT_ADD"
                        });
                    })
                }}>测试redux</Button>
                <div>{this.props.count}</div>
            </div>
        );
    }
}

export default connect(state=>(state.page1))(page1);

reducer文件夹下index.js

import {combineReducers} from "redux";
import page1 from "./page1";
let Reducers = combineReducers({
    page1
});
export default Reducers;

page1的reducer：reducer文件夹下page1.js

export default function page1(state={
    count: 0
},action) {
    switch(action.type){
        case "COUNT_ADD": { // 注册个加一的事件
            return {
                count: state.count + 1
            };
        }
        default:
            return state;
    }
}

page2文件夹下page2.js

import React, { Component } from 'react';
import {Button} from "antd"
import {NavLink} from "react-router-dom";
class page1 extends Component {
    render() {
        return (
            <div className="App">
                <NavLink to={"/index"}><Button>go page1</Button></NavLink> // 这里是跳转到page1
                <div>这里是页面2</div>
            </div>
        );
    }
}

export default page1;

都搭建完毕后执行下面命令运行

npm start

运行效果如下，从page1跳到page2，利用redux实现点击按钮进行+1：

效果.gif

到此我们的一个简单的小实例就搭建完毕了，万事开头难，先搭建个架子后面自己可以往里面一点点完善，动手很重要，动手很重要，动手很重要重要的事情说三遍，哈哈。
欢迎小伙伴们留言交流，一起成长。