react脚手架

react

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

入口文件index.js不能删。

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

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


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

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

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


安装完后在输入命令


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


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

当你去找到某一个文件夹的时候,默认找到文件夹里面的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 指向问题


以上是 react脚手架 的全部内容, 来源链接: utcz.com/z/381743.html

回到顶部