Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

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

Jump to bottom

一步步搭建React项目（一）：把React跑起来 #13

Open
varHarrie opened this issue Feb 25, 2017 · 3 comments
Open

一步步搭建React项目（一）：把React跑起来 #13

varHarrie opened this issue Feb 25, 2017 · 3 comments
Labels
Javascript React
Milestone
Posts

Comments

@varHarrie
Copy link
Owner

varHarrie commented Feb 25, 2017 •
edited
Loading

本教程侧重点在于项目结构的演变过程，为初学者提供渐进式的React搭建方法，React相关基础知识请查阅官方文档。

本教程为本人在学习过程中总结而记录下来，难免存在错误，或您有任何建议，欢迎提出

1. 创建项目

$ mkdir react-demo
$ cd react-demo
$ npm init

2. 添加入口文件

首先创建一个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+的语法，严重影响开发效率
  • 没有引入环境变量，项目缺少适用性
  • ...

后续教程中，我们将一一解决这些问题
@varHarrie varHarrie mentioned this issue Mar 1, 2017
Open
@meicuihui
Copy link

不需要用到npm吗

@xiaomizhou66
Copy link

为啥不直接用 create-react-app

@varHarrie varHarrie added this to the Posts milestone Aug 5, 2021
@ass315
Copy link

ass315 commented Sep 1, 2021 •
edited
Loading

卡在 src\main.js -> build\main.js 了

手动打开index 页面正常显示了
npm run build 没有自动打开页面

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Javascript React
Projects
None yet
Milestone
Posts
Development

No branches or pull requests
4 participants
@varHarrie @meicuihui @xiaomizhou66 @ass315