React-Todo—环境搭建

淡淡的烟草味﹌ 2022-05-31 10:53 255阅读 0赞

我也是初学react，一切都在探索中。  
具体的步骤我可能会略去，重点谈一下，搭建过程中我遇到的问题和觉得重要的部分。如果有误请指正。

--------------------

## npm init 生成的 package.json文件 ##

这个文件主要是你的项目的名称、版本、描述，以及各**依赖**的目录、版本。  
这里的**依赖**就是我们能在各个教你搭项目的教程、博客中看到的最开始可能看不懂的一些，react，react-dom,babel-core,babel-preset-react等等。  
下载这些依赖时可能会需要一段时间，请耐心等待(｀・ω・´)  
以下是我收集的一些他们的介绍：（有的名字可能有所改变）

*  react-dom：安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装react-native
 *  webpack：Webpack, 现在最流行的模块打包工具
 *  babel-core：安装Babel, 可以把ES6转换为ES5
 *  babel-loader：webpack中需要用到的loader
 *  babel-runtime：Babel transform runtime 插件的依赖
 *  babel-preset-react：Strip flow types and transform JSX into createElement calls
 *  babel-preset-es2015：Babel preset for all es2015 plugins

--------------------

下载好依赖后就要 npm start了

## npm start ##

在最开始的环境搭建中，npm start非常容易报错，真的是让人感到绝望￣へ￣  
我在反复地尝试中，虽然没有正面地解决这个问题，但是也算是积累了一些经验。

npm start 是npm run start的简略写法，而npm run start的默认值是node server.js，前提是项目根目录下有server.js这个脚本。[阮一峰：npm scripts使用指南][npm scripts]  
npm start是为了运行项目在本地配置一个服务器环境，npm start首先会安装一系列的必要程序，这些程序依赖package.json中的内容。[npm start 作用][npm start]

**在npm start报错的时候，命令行里一般是会给出错误原因的，请务必仔细阅读！！！然后，多百度。**

--------------------

**附议**  
webpack相关  
因为我最后成功的第一个项目使用了 webpack 这条指令打包，没有用到npm start，所以查找了一些webpack的教程、答疑。  
我的第一个项目的教程来源：[React+webpack从0到1开发一个todoMvc][React_webpack_0_1_todoMvc]

[命令webpack和npm run webpack有什么区别？][webpack_npm run webpack]

最后，大力推荐这篇教程！！！  
[入门 Webpack，看这篇就够了][Webpack]

[npm scripts]: http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
[npm start]: https://www.cnblogs.com/zhang-jian/p/5035424.html
[React_webpack_0_1_todoMvc]: https://www.jianshu.com/p/aa02a10c5b69
[webpack_npm run webpack]: https://www.imooc.com/qadetail/229523?t=363240
[Webpack]: https://segmentfault.com/a/1190000006178770