重学react系列(一)—— hello-react

不用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项目的工作原理。但是后续文章还是会基于脚手架搭建的项目来继续,因为它更适合于我们的开发,也更方便,至于运行原理会放在最后来探究。

总结

本次文章主要是学习如何搭建起一个react网页,理解了JSX,babel的作用等。引入js的方式其实只适用于理解和练习,真正开发的时候一般都会在脚手架工具的帮忙下进行,因为这样可以提高开发效率。

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页