react学习笔记-01搭建项目环境

1、安装node.js以及npm，这一步较为简单就不做说明，具体可以参照其他博客。安装完成之后检查版本号，测试是否安装成功。

2、安装react-app：npm install -g create-react-app。

3、创建react-app：create-react-app +（项目名）


4、在上一步的最后给出了下一步建议，我们依次输入 cd todolist和npm start，在浏览器中会自动打开localhost：3000，运行项目。

5、我们用vscode命令行命令打开项目：code. ，我们可以看到最外层的文件（见图）。其中package-lock中包含了项目的一些依赖以及版本号，package当中是一个nodejs包的一些信息，包括name，是否私有项目等，一些命令也被定义在里面，包括之前用到的 npm start 也是因为在这里有定义才能使用（见图）。node_modules当中包含了项目需要用到的一些外部的node包文件。

6、public文件夹当中有一个icon（见图）。实际上就是网页当中标题旁边的icon（见图）。

7、public文件夹当中有一个index.html的文件，它是一个自动生成的网页模板，其中有一个不常见的东西。（见图）这个表示当你在禁用掉了网页当中的script的时候它会给你一个提示。

8、src目录下的就是我们所有最重要的代码源文件（见图）。其中index.js是整个程序运行的入口文件。我们会注意到在index.js文件中竟然引入了css文件（见图），这是一种react的理念：all in js。把所有的东西当作js的一个模块引入，不再单独分离。index.js当中还有一个引入（见图），这种引入方式实际上就是引入了当前目录下的App.js文件，编译器会自动补全js后缀。



9、编辑app.js文件，我们把网页中引入的logo.svg,app.css删掉，没啥用，把文字换成hello world。最后的文件目录是这样的（见图）。

小tips：
1.windows环境下shift+右键可以在当前目录下打开命令行工具。
2.清空命令行界面命令：cls。