本篇文章会讲解如何创建一个小的TodoList的例子，真正适合react新手去理解，每次搜别人做的例子的功能比较多一点点，不太好看懂，我的这个只有两个组件，只是单纯的涉及到父子组件的之间的数据交互，相信大家看完这篇文章一定可以自己动手做出东西。
这篇文章用的工具全部都是最新的版本，不会出现什么因为版本不同而造成的bug，请放心；如果你会搭建环境，就请跳过第一部分，直接看第二部分。
目录
1.第一部分：搭建环境
2.第二部分：写TodoList
先看一下效果图，很简单
添加事项前效果
就是这么简单，实现的功能有：
1.在文本框中输入内容，点击添加按钮或者按回车都可以将文本框中的内容输入到下面的列表中
2.如果文本框中的内容为空，会提醒要输入内容
3.每一项待办事项都可以点击完成进行标记，点击删除进行删除
4.当有三条内容时，删除中间的那条，序号会自动改变
5.完成按钮只能点击一次，文本输入到列表后自动恢复初始值
以上就是要实现的基本功能，后面我会再出一个功能更完善的版本，下面我们就开始学习如何做出一个这样的TodoList，添加事项后是这样的
添加后的效果
第一部分：搭建环境
第一步：创建文件夹，如TodoList
第二步：在文件夹中新建文件目录，目录结构如下图
目录结构
src文件里面我们通常放置源代码，dist文件里通常放后面要和后端联合起来的内容，里面可以放图片资源，样式文件，以及打包好的内容等；form.js和list.js分别是父子组件，index.html是模板文件。
第三步：开始安装环境
（1）初始化package.json文件
（注意：此文件中千万不能添加注释，json文件中都不能写注释）
打开终端，在终端中输入
初始化命令
如果你用的是npm/cnpm都一样，yarn和它们只是有细微的区别，除了有差别的地方，将yarn换成npm/cnpm是一样的（不过墙裂推荐yarn，速度是真的比它们快很多）
运行这个命令后，可以一路回车（也可以按照习惯填写内容，回车表示默认）,你会发现在TodoList文件夹中多了一个package.json文件，里面的内容大概应该是这样
初始化后的package.json
（2）安装依赖，安装在devDependencies中，依赖我就不一一讲解了，不知道的可以自己去搜
yarn add react react-dom -D（react的依赖）
yarn add babel-core babel-cli -D（babel的依赖）
yarn add babel-loader css-loader style-loader -D（打包的加载器）
yarn add webpack webpack-cli webpack-dev-server -D（webpack的依赖）
yarn add babel-preset-es2015 babel-preset-react babel-preset-stage-0 -D（识别JSX语法的依赖）
package.json中新增的内容
这里yarn和npm的语法有一点点不同，将上述命令中的add换成install即可
加载完这些依赖后，你会发现你的package.json文件中多了很多东西，如上图，这个时候你就要配置你的webpack.config.js了。
（3）在TodoList文件中创建配置文件webpack.config.js，是以下的内容、
webpack.config.js中的内容
将上面的内容写入到webpack.config.js中即可
（4）配置识别JSX语法的文件，新建一个.babelrc文件，在里面放置输入以下内容
.babelrc配置文件中的内容
注意：这个文件前面有一个点，保存在TodoList文件下
（5）在package.json中写启动服务的语句
添加的语句
在package.json中添加这些内容，保存。
（6）执行命令，启动服务
到了这一步，基本就是搭建成功了，在终端运行命令yarn run server，不会报错并且出现这样的情况就是运行成功了
运行服务
（7）点击链接，跳转到页面看效果
点击上方图片中的http://localhost:8080/就可以看到目录结构了，点击src会自动跳到html页面可以在html文件中写些简单的结构，如下图
index.html中的内容
跳转的页面
html中的内容
这样就是运行成功了，也就是环境的搭建成功了，接下来就可以在父子组件中写内容实现功能了，那么进入我们的第二部分。
网友评论