react脚手架的搭建

react脚手架的搭建

1、全局安装 create-react-app

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

2、用脚手架创建 react项目

2.1）、创建目录

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

2.2）、图片文件夹

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

2.3) 、创建组件时记得引入react和css

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

2.4) 、js中写代码 rcc 快捷词 需要下载vscode插件

例：建立一个简单地样板（使用redux）

1.先建立脚手架

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

2.下载redux模块，redux-thunk模块，react-redux模块(进入到项目目录中)

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

3.为了整齐在src中建立一个文件夹store(作用为仓库)，

//- 在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.在组件中使用,可以找要使用仓库数据的组件的最外围组件，

比如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、 启动项目：

  npm start   |   yarn start

4、打包

  npm run  build    |    yarn build

5、如果要解构出配置文件：

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

6、如果需要调试，安装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