We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
本教程侧重点在于项目结构的演变过程,为初学者提供渐进式的React搭建方法,React相关基础知识请查阅官方文档。
本教程为本人在学习过程中总结而记录下来,难免存在错误,或您有任何建议,欢迎提出
$ mkdir react-demo $ cd react-demo $ npm init
首先创建一个html入口文件index.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,后面用到
!
Tab键
创建一个js入口文件src/main.js(为了便于后续工作,放在src目录内):
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内
Hello, world!
h1
app
div
毫无疑问,使用浏览器打开index.html是跑不起来的。一是因为我们没有引入react和react-dom包,二是因为这里用到了jsx语法,需要通过babel进行转义
react
react-dom
jsx
babel
为了方便起见,我们将react和react-dom通过cdn形式引入,添加到index.html的body中
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进行模块管理
webpack
安装babel-cli和babel-preset-react
babel-cli
babel-preset-react
$ npm install --save-dev babel-cli babel-preset-react
我们将babel-cli安装到了本地依赖,运行babel需要借助npm script,将运行脚本添加到package.json的scripts中:
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文件
npm run build
build
main.js
别忘了修改index.html的script,引用的位置:
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!在页面中显示,恭喜成功入门。
回顾整个项目,不难发现有许多可以改进的地方:
模块管理
热加载
ES2015+
环境变量
后续教程中,我们将一一解决这些问题
The text was updated successfully, but these errors were encountered:
不需要用到npm吗
Sorry, something went wrong.
为啥不直接用 create-react-app
卡在 src\main.js -> build\main.js 了
手动打开index 页面正常显示了 npm run build 没有自动打开页面
No branches or pull requests
1. 创建项目
$ mkdir react-demo $ cd react-demo $ npm init
2. 添加入口文件
首先创建一个html入口文件
index.html
:创建一个js入口文件
src/main.js
(为了便于后续工作,放在src
目录内):将
src/main.js
引入到index.html
中:3. 安装相关依赖
为了方便起见,我们将
react
和react-dom
通过cdn形式引入,添加到index.html
的body中
安装
babel-cli
和babel-preset-react
我们将
babel-cli
安装到了本地依赖,运行babel
需要借助npm script
,将运行脚本添加到package.json
的scripts
中:紧接着运行
npm run build
,我们可以看到新产生的build
目录,以及该目录里面的main.js
文件别忘了修改
index.html
的script
,引用的位置:刷新浏览器,我们可以看到
Hello, world!
在页面中显示,恭喜成功入门。4. 总结和改进
回顾整个项目,不难发现有许多可以改进的地方:
模块管理
,模块单纯使用script
标签引入,甚至通过CDN引入到全局热加载
,每次编辑都要刷新页面ES2015+
的语法,严重影响开发效率环境变量
,项目缺少适用性后续教程中,我们将一一解决这些问题
The text was updated successfully, but these errors were encountered: