打开项目的 src 目录下的 index.js 文件, 这个文件就是程序的入口文件, 代码从这里开始.
打开 index.js 文件, 你会看到类似这样的代码:
image.png
你可能对现在这一堆代码有疑惑, 我们现在可以精简一下, 变成这样:
image.png
现在你会看到, 浏览器上输出的内容变成了这样:
Hello React!! 🍅
我们先看前两行代码, 引入了 React 和 ReactDOM 这两个 API.
import React from 'react';
import ReactDOM from 'react-dom';
重要的部分从第 5 行开始, 我们调用了 ReactDOM.render 方法, 并传入了两个参数.
ReactDOM.render(
<p>Hello React!! 🍅 </p>
, document.getElementById('root')
);
第一个参数类似 html 标签, 第二个参数是我们获取到的一个 DOM 节点.
它的意思是, 把第一个参数的结构, 插入到第二个参数获取到的节点里面. 所以就变成了我们在页面看到的样子.
你可以打开 public 文件夹, 看到 index.html 这个文件, 里面一个 id 是 root 的 div:
<div id="root"></div>
这就是我们获取到的节点.
而如果你打开浏览器, 通过调试器查看页面结构的时候, 你会发现我们把 第一个参数写的结构, 插入到了我们获取到的 div 里面:
image.png
以下我要说的话是本节的重点, 你要记住了!!!
我们在第一个参数写的类似 html 的东西, 叫做 JSX, 我们使用这种语法可以快速描述出一份结构.
<p>Hello React!! 🍅 </p>
一件事情是, 这并不是 js 语法, 浏览器运行它就会出错, 所以我们需要把它转换成 js 代码才能在浏览器运行.
而这个转换的工作, 在我们刚开始使用 npm start 启动项目的时候, 我们项目的开发环境配置已经帮我们在背后默默做了这件事情. (我们现在暂时放下环境配置方面的东西, 先不用去担心它).
第二个参数是一个 dom 节点, 我们把它叫做容器:
document.getElementById('root')
所以 ReactDOM.render() 方法总结起来一句话就概括:
把你写的 jsx 结构插入到容器里面, 然后渲染到页面.
网友评论