显示 - ReactDOM.render

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在这个 comment 目录下的 CommentBox.js 里,我们定义了一个 React 组件,名字是 CommentBox .. 下面我想把它显示在页面上 ..

先打开 index.html .. 去掉这个 container 里面的按钮 .. 然后用一个 id 是 app 的 div 标签 .. 保存 .. .. (#app) .. 再打开 app 目录下的 main.js ..

先选择一下文件的格式 .. 可以使用 babel es6 javascript .. 这个格式是 Atom 编辑器的 language-babel 插件提供的 ..

下面使用 import 去导入 react ..

import React from 'react';

然后是 react-dom ... import ReactDOM from 'react-dom' ..

再把前面定义的 CommentBox 导入进来 .. 位置是当前目录下的 comment 下面的 CommentBox ..

import CommentBox from './comment/CommentBox';

显示组件可以使用 ReactDOM 的 render 方法 .. 这个方法有两个参数,一个是要显示的组件 .. 第二个参数是要显示的位置 .. 这里要显示的组件是 CommentBox  .. 因为我们用的是 jsx 的形式 .. 所以可以把组件当成一个标签来用 .. 这个标签可以自己关闭 .. 也可以分成开始还有关闭标签 ..

逗号分隔一下 .. 接着是组件要显示在哪个地方 .. 这里用一个 document.getElementById ... 找到页面上 id 是 app 的这个元素 ..

在 index.html 里面,已经使用了 System.import ,导入了 app 下的 main.js .. 打开浏览器 .. 在页面上会显示 CommentBox 这个组件要显示的东西 ..

在浏览器的开发者工具里面,打开 Elements 选项卡 .. .. 找到 app 这个元素 ... 你会看到它包装了一组 div ,上面有一个 class 属性 .. 它的值是 ui comments .. 在这个 div 里面是一组 h1 标签 .. 上面的文字是 评论 .. 它下面还有一组 div ..

这些东西就是 CommentBox 组件要显示的内容 .. 再打开 React 这个选项卡 .. 这里你会看到页面上的 React 组件 .. 现在只有一个 CommentBox .. 这个 React 开发工具,你可以在 Chrome 浏览器的应用商店里找到 ..

https://atom.io/packages/language-babel

显示 - ReactDOM.render《 React 基础 》

统计

13679
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点