La construcción de andamios de reacción.

La construcción de andamios de reacción.

1. Instalar crear-reaccionar-aplicación globalmente

npm install create-react-app -g    |   yarn global add create-react-app 

2. Crea un proyecto de reacción con scaffolding

2.1), crea un directorio

 在src目录下创建以下文件夹：
 - assets ：静态资源文件夹
 - components：组件文件夹
      /components/a组件/  a.js  和 a.css
 - pages：页面文件夹
 - styles：样式文件夹 (根据自己喜好定)

2.2), carpeta de imágenes

 1．在public里放图片。
     把图片放到public文件夹中 直接使用图片名使用，这样的图片不会打包，使用绝对路径
 2．使用require引用，require(‘图片的相对路径').default，Require中只能使用字符串不能使用变量，这样的图片会打包。如：
   <img src={require("../../assets/img/banner04.jpg").default} />

2.3) Recuerde introducir reaccionar y css al crear componentes

 import "./index.css"
      //引入css时有可能属性名冲突
 import React from "react"
      //可以结构一个 import {Component} from "react" ;继承的时候就只写Component

2.4) Para escribir accesos directos de código rcc en js, debe descargar el complemento vscode

Ejemplo: Cree un repetitivo simple (usando redux)

1. Primero construye el andamio

create-react-app reduxdemo (就是项目名称)

2. Descargue el módulo redux, el módulo redux-thunk, el módulo react-redux (ingrese al directorio del proyecto)

yarn add redux -S
yarn add redux-thunk -S
yarn add react-redux -S

3. Para crear ordenadamente un almacén de carpetas en src (como almacén),

//- 在store中创建文件index.js文件
import {
    
    createStore,applyMiddleware,combineReducers} from"redux";
import thunk from "redux-thunk";
import count from "./reducers/count" ;
import todos from "./reducers/todolist";

let rootReducers = combineReducers({
    
    
	count,todos
})
export default createStore(rootReducers,applyMiddleware(thunk));
//- 在store中创建文件夹reducers(管理的数据,和对数据的操作)，在reducers中建立相对应的js文件，例：todolist.js和count.js
//在count.js中
   //计数器
let initCount = 0;
   //计数器的操作
let reducer = (count=initCount,action)=>{
    
    
	let {
    
    type,payload} = action;
	switch(type){
    
    
		case "INCREMENT":count+=payload; break;
		case "DECREMENT":count-=payload; break;
	}
	return count;
}
export default reducer ;
//在todolist.js中
   //计数器
let todos = [
       {
    
    },{
    
    }
];
   //计数器的操作
let reducer = (todos,action)=>{
    
    
	let {
    
    type,payload} = action;
	switch(type){
    
    
		case "ADDTODO":{
    
    
		    return [...todos,payload]
		}
        case "REMOVETODO":{
    
    
            todos.spilce(payload)
            return [...todos]
        }
    }
    return todos;
}
export default reducer ;

4. Utilizado en componentes, puede encontrar los componentes más periféricos de los componentes que utilizan datos de almacén,

比如APP。那就在最外面的index.js中用Provider将APP组件包裹
    先引入store仓库中的index.js和解构出Provider
        例：import store from "./store";
        import {
    
    Provider} from "react-redux";
    调用时用Provider将APP包裹起来,这样APP中的所有组件就都可以使用
        <Provider store={
    
     store}>
            <App />
        </Provider>
    在APP中引入connect,使用高阶组件
        import {
    
    connect} from "react-redux"
// connect()函数的参数:
//第一个参数mapStateToProps:是函数,传入全部的state,返回当前组件需要的state
        export default connect((state)=>({
    
    
            count:state.count
        }))(App);
//之后调用count的时候只需要this.props.count调用就行
注：在App中使用类组件rcc，函数组件没有props属性
5.在Home组件中改变，在APP中显示。需要用到dispatch，那么就需要使用 connect 将Home包裹。否则没有dispatch属性
add(){
    
     //事件处理函数，比如单击事件
    this.props.dispatch({
    
    
        type:"INCREMENT",
        payload:2
    });
}
export default connect(state=>({
    
    {
    
    }}))(Home);
可以将{
    
    type:"INCREMENT",payload:2}命令封装在一起，然后引用，但记得传dispatch

3. Inicie el proyecto:

  npm start   |   yarn start

4. Embalaje

  npm run  build    |    yarn build

5. Si desea deconstruir el archivo de configuración:

 npm  run  eject  |  yarn eject   解构出所有的配置文件 可选

6. Si necesita depurar, instale la herramienta react-dev-tools

  1. 先进入到https://github.com/facebook/react网址
  2. 通过git clone https://github.com/facebook/react-devtools.git下载到本地（或者直接点击下载）
  3. 下载之后进入到react-devtools目录下，用npm安装依赖
     npm --registry https://registry.npm.taobao.org install
  4. 然后在npm run build:extension:chrome