Skip to content

Latest commit

 

History

History
142 lines (86 loc) · 3.39 KB

总结.md

File metadata and controls

142 lines (86 loc) · 3.39 KB
Raw

对从零开始搭建一个react 项目的总结()

从零开始搭建一个react项目

github:https://github.com/CTCSU/ct-learn-react

首先说下对这篇文章学习的概况。大概从3/12-4/2，每天平均花费半个小时，也就是一共10个小时来做这个事。时间确实比较零碎，对效率可能有一定的影响。此外，本文的内容有部分有错漏，出现很多问题要一一解决，整体上来说不是特别好。

全篇分为三部分：

  1. 环境的构建；
  2. 用React 构建出一个项目；
  3. 使用Redux 对此前的项目进行优化；？

环境的构建

  1. 安装npm
  2. 使用npm init 生成package.json 文件
  3. 使用 npm install 安装各种依赖
    • react ，react-dom,
    • webpack, webpack-dev-server
    • babel (babel-core,babel ...)
  4. 安装其他的内容。

项目启动

  1. 添加scripts;
  2. 通过命令行启动；

React 项目

  1. componet

    App extends React.Componet{}

  2. set state 方法

  3. 通过render 来构建html 的元素

  4. React 项目的历程：

    • 在html 中声明div
    • 使用APP extends React的Componet，用render 方法输出html 元素
    • 创建组件文件，
    • 引入组件，并将state 中的值按照props 传下去；并且可以将一些方法也传递进去。

在这个过程遇到了两个问题：

  1. 读懂webpack.config.js 的配置，将文件的后缀改为jsx后，jsx的文件无法打包、一开始项目指定的目录不一致，导致项目无法启动
  2. js 的格式化问题，使用vscode 时，右下角可以指定js 的类型，要选中react 才能格式化js 中的html 标签
  3. bind 的用法，其实我现在也不太明白；后面再学吧；反正要用bind（null,i) 这样的方式，然后a（i) 就可以接受到i
  4. 在jsx 中使用style 要用style={{"margin-bottom":20px}} 这样的方式

转换成Redux

  1. 创建redux 的modules; 在其中定义state 和一些方法；

  2. 创建containers，里面指定如何将state 映射成props 和将方法映射成props，关键是通过dispatch 来做；

    connect(mapStateToProps, mapDispatchToProps)(ToDoApp);

  3. 组件需要的那些方法就在props中，通过上面一步就已经将所有的值都放到了props里面去了，同时，原来在state 里面拿的值也需要从props 里面获取；

  4. 需要configureStore.js 配置store

import {
  createStore,
  applyMiddleware,
  combineReducers
} from 'redux'
import {
  createLogger
} from 'redux-logger'
import toDoApp from './modules/toDoApp'

const loggerMiddleWare = createLogger();

const createStoreWithMiddleware = applyMiddleware(loggerMiddleWare)(createStore);

const reducer = combineReducers({
  toDoApp
});

const configureStore = (initialState) => createStoreWithMiddleware(reducer, initialState);

export default configureStore;

通过上面的代码，主要要combinereducer、增加Logger的Middleware层；

同时需要在APP.js 中指定Provider 和Container

 <Provider store={store}>
        <ToDoAppContainer />
      </Provider>

代码结构：

--src

--components

​ --input.jsx

​ --List.jsx

​ --ToDoApp.jsx

​ --containers

​ --toDoAppContainer.js

​ --redux

​ --modules

​ --toDoAppContainer.js

​ --configureStore.js

​ --app.js