一步步搭建React项目（一）：把React跑起来
varHarrie opened this issue · 3 comments
本教程侧重点在于项目结构的演变过程，为初学者提供渐进式的React搭建方法，React相关基础知识请查阅官方文档。
本教程为本人在学习过程中总结而记录下来，难免存在错误，或您有任何建议，欢迎提出
1. 创建项目
$ mkdir react-demo
$ cd react-demo
$ npm init2. 添加入口文件
首先创建一个html入口文件index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>通过emmet，
!+Tab键可以生成HTML模板代码。值得注意的是，body中有一个id为app的div，后面用到
创建一个js入口文件src/main.js（为了便于后续工作，放在src目录内）：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
)将src/main.js引入到index.html中：
<!-- ... -->
<body>
<div id="app"></div>
<script src="src/main.js"></script>
</body>
<!-- ... -->实现的效果将会是，把内容为
Hello, world!的h1标签渲染到id为app的div内
毫无疑问，使用浏览器打开
index.html是跑不起来的。一是因为我们没有引入react和react-dom包，二是因为这里用到了jsx语法，需要通过babel进行转义
3. 安装相关依赖
为了方便起见，我们将react和react-dom通过cdn形式引入，添加到index.html的body中
<!-- ... -->
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="src/main.js"></script>
</body>
<!-- ... -->后续教程中，我们会使用
webpack进行模块管理
安装babel-cli和babel-preset-react
$ npm install --save-dev babel-cli babel-preset-react我们将babel-cli安装到了本地依赖，运行babel需要借助npm script，将运行脚本添加到package.json的scripts中：
// ...
"scripts": {
"build": "babel --presets react src --out-dir build --watch"
},
// ...你也可以将
babel-cli安装到全局，那么不需要借助npm script来运行
紧接着运行npm run build，我们可以看到新产生的build目录，以及该目录里面的main.js文件
别忘了修改index.html的script，引用的位置：
<!-- ... -->
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="build/main.js"></script><!-- 修改位置 -->
</body>
<!-- ... -->刷新浏览器，我们可以看到Hello, world!在页面中显示，恭喜成功入门。
4. 总结和改进
回顾整个项目，不难发现有许多可以改进的地方：
- 没有使用
模块管理，模块单纯使用script标签引入，甚至通过CDN引入到全局 - 没有
热加载，每次编辑都要刷新页面 - 没有使用
ES2015+的语法，严重影响开发效率 - 没有引入
环境变量，项目缺少适用性 - ...
后续教程中，我们将一一解决这些问题
不需要用到npm吗
为啥不直接用 create-react-app
卡在 src\main.js -> build\main.js 了
手动打开index 页面正常显示了
npm run build 没有自动打开页面