react脚手架

脚手架包含webpack,babel的复杂配置(基于webpack+ES6+react)，上来就可开发项目

入口文件index.js不能删。

index.html是模板页面，没有script标签，自动生成script标签

新建的项目包依赖不是基于NPM5,所以在这个项目基础上开发，如果要继续添加包依赖的话，要用npm命令，之前的包依赖都不能用了

决解办法：把package-lock.json删掉，在重新输入命令npm install

然后根据模板文件index.html，用npm run build去构建一个用户真正看到的页面

之后会发生路径不对的问题，所以得下载一个包去矫正路径

安装完后在输入命令

扫描二维码关注公众号，回复： 102075 查看本文章

基于脚手架去开发 创建的目录结构可以如下

拆分组件是根据功能点去拆

当你去找到某一个文件夹的时候，默认找到文件夹里面的index.js文件，如下面 ./compnents/App 找到该文件夹底下的 index.js

例子：

第一步：写静态页面  把bootstrap.css放到public底下，并在其中的index

第二步：把index.css放到src下面

第三步：然后拆分html结构

虚拟dom对象里面的display, 找轮子的时候还必须注意 1：往input标签加结束标签 2：class 改为className

不能这样写

要这样

接下来是弄好数据源，1.在App组件当中去初始数据，用state中的一个数组表示

                                  2.接着在list显示数据，那在render方法中得先获取 let {comments}=this.state;

                                  3.然后 <List comments={comments}/>  然后在List.js里面的render里面去通过属性获取传入的数组

                                     let {comments}=this.props;

                                  4.再拆分一个item组件 

                                        

                                5.在item当中获取传入的每一个对象值

                       6.删除功能，需要 点击一个item，它能够告诉上级组件它的index，解决key不能够当props的特点

                        

                        

                        7.如何完成数据层层传递

                    

                

    

    

在使用PubSubJs.js  的时候 订阅的代码部分 回调函数记得写成箭头函数 因为此时this 指向问题