标签：npm 学习 项目 创建 记录 react 工具 脚手架
前言：公司有个项目框架用的是react，所以需要学习一下相关内容，开立此贴记录一下自己的学习过程，同时也督促自己持续学习。
文章目录
一、搭建开发环境：
看了半天文档，也不知道应该怎么搭建环境，也许是vue开发习惯太深，总想找个脚手架来生成。而react里似乎没有对应的描述，只找到了几个工具链，不知道这里的工具链是否就是指的脚手架？
不纠结了，随便选一个工具链来开发。
最终选择基于Create React App工具链来开发学习。
首先基本的环境配置：
1.1、node和npm环境要求。
node和npm的环境要求为：
1、Node >= 10.16
2、npm >= 5.6
1.2、创建项目
我也不知道为啥就直接到了创建项目这一步，我并没有全局安装一个叫做Create React App的工具，看文档说npx是 npm 5.2+ 附带的 package 运行工具，推测使用npx指令来创建项目，也许就不用全局安装这些脚手架或者工具链之类的吧。
创建项目命令为：
npx create-react-app my-app
随手创建了一个项目，结果发现报错了，原来是因为项目名称不能包含大写字母，改成短横线写法吧。
改写完后，项目创建成功，可以看到一些基本的指令提示，以后再看看是啥意思。先赶紧进去看看项目结构。
1.3、本地启动项目
好家伙，这熟悉的项目结构，看来这个所谓的工具链其实就是脚手架工具。帮我们生成基本的项目结构，引入一些基础的依赖。
那么启动项目的指令就应该也是一样的，可以通过package.json来配置。
这里就先用脚手架生成的默认指令本地启动一下项目看看吧。
npm start
项目启动成功。
1.4、打包项目
那同理，打包项目就是run build了
npm run build
打包成功，和vue不太一样的是代码是存放在build文件夹下的，估计后面有配置的地方吧。
粗略的瞟了几眼，package.json里面没有webpack相关的依赖，不知道是否是通过webpack打包构建的。翻了翻node_modules，发现了webpack的安装包，那么这里的react-scripts的内部应该用的也是用webpack那套东西。
那相关的包分析，管理工具应该也可以加 。
。。。晚上再来看看。
标签：npm,学习,项目,创建,记录,react,工具,脚手架 来源： https://blog.csdn.net/SilenceJude/article/details/115580841
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。