重学react系列（一）—— hello-react

最新推荐文章于 2025-05-28 19:34:53 发布

dreamer_sen

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量256

点赞数 2

分类专栏：重学react 文章标签： reactjs javascript html web前端

本文链接：https://blog.youkuaiyun.com/dreamer_sen/article/details/108730011

版权

重学react 专栏收录该内容

2 篇文章

订阅专栏

本文是重学React系列的第一篇，介绍了如何在HTML中直接运行React程序，解释了JSX语法和Babel转码过程，并讨论了使用create-react-app创建项目的意义。通过这些内容，读者将理解React的基础概念和开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不用JSX运行react程序

最简单的运行一个react程序，莫过于直接在HTML页面上引入react代码。
需要引入的js文件有两个：react和react-dom，（代码中的development后缀，表示开发版本，是未压缩的代码）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello React</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    ReactDOM.render(
      React.createElement('h1', null, 'Hello, React!'),
      document.getElementById('root')
    );
  </script>
</body>

打开html文件得到一个这样的页面

通过这个例子我们可以大概知道：

1.React.createElement(component, props, …children) 可以用于创建DOM节点（也可以创建组件）
2.ReactDOM.render(template,targetDom) 可以将template挂载到targetDom

后面的文章我们还可以再来深入实现一下这两个方法。

使用JSX运行react程序

什么是JSX呢？

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。—【百度百科】

可以理解为在js文件中写HTML代码的语法，但是它多了组件的标签和组件属性与方法等。

来看一个JSX例子：

const element = <h1>Hello, React!</h1>;

这个代码直接运行在js中是会报错的，因为js中的变量赋值不支持这样的格式，所以得将这个js转码后再运行，这里就需要用到babel

如何转码呢？直接上代码看下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello React</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, React!</h1>,
      document.getElementById('root')
    );

  </script>
  <!--
      提示: 页面引入的方式只是用于理解react，并不适用于实际的生产环境.
    -->
</body>

</html>

可以看到这里主要的改变点有三个：

1.引入babel.min.js，用于对script标签下的代码进行转码
2.script 新增属性 type="text/babel"来标记这个js是需要转码的，否则跳过处理
3.移除React.createElement('h1', null, 'Hello, React!')，替换为JSX语法：<h1>Hello, React!</h1>

所以babel的作用在这里也很明显了，就是将JSX语法转码成React.createElement()语法。

可以在babel官网看下babel前后的代码对比：JSX-babel转换对比

加上/*#__PURE__*/的作用是为了标记纯函数，使得tree-shaking生效，可以看这里tree shaking

使用脚手架工具运行react程序

什么是脚手架工具？

前端的脚手架工具一般是这样的作用：在命令行运行一些命令就能快速搭建起项目的框架，比如vue-cli和我们这次要用到的：create-react-app

使用create-react-app 创建一个react项目十分简单：

1.得确保你安装了node，npm工具也是能使用的，

2.全局安装create-react-app

3.使用create-react-app命令创建项目

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app hello-react 
cd hello-react 

# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start 
# 或者npm run start

但是脚手架帮我们做了太多的事情：配置webpack，配置babel，实现热更新，搭建http服务等，这样不太方便我们理解react项目的工作原理。但是后续文章还是会基于脚手架搭建的项目来继续，因为它更适合于我们的开发，也更方便，至于运行原理会放在最后来探究。