react入门

这篇文章是提供给有一定的框架开发经验的阅读
1、首先采用脚手架的方式，创建react项目，我使用的是官方提供的create-react-app这个脚手架，首先

npm intall -g create-react-app

image.png

然后，使用脚手架的命令，去初始化一个项目

create-react-app my-app

但是这里提示了command not found，表示该命令并没有被加入到环境变量中，这里可以换个命令去创建

npx create-react-app my-app

这种方式去创建，简单介绍下npx，它是npm5.2版本后新增的命令，在这里是避免全局安装了create-react-app模块，他临时下载一个create-react-app模块，使用完之后再删除它
创建成功：

image.png image.png

然后进入my-app项目：

cd my-app

这个时候，已经可以使用npm start来启动本地服务了,但是我这边由于还存在其他版本的eslint,在启动服务时，出现了版本兼容的问题.如果没有遇到这个问题，请略过以下步骤，直接访问localhost:3000即可。

image.png

刚开始以为是由于网络问题，切换过npm源进行重装，也使用yarn install过，都没法解决问题，其实，看这个报错提示里面的解决方式就可以解决问题，最后在项目中（跟package.json目录同级）添加了一个.env文件，文件内容为：

SKIP_PREFLIGHT_CHECK=true

可以解决问题，重新执行npm start，得到结果：

image.png

访问localhost:3000:

image.png

——————————————————————— 分割线 ———————————————————————

接下来开始研究目录文件的作用：

image.png