React 【组件和 JSX 】编写React元素、创建组件、理解JSX、JSX规则、使用Fragments

目录：

1. 编写 React 元素

2. 创建组件

3. 理解 JSX

4. JSX 规则

5. 使用 Fragments

 

编写 React 元素

打开 index.js，创建一个叫做的 element 的元素，用 h1 标签将先要显示的文字包裹。React 通过 ReactDom.render 方法将虚拟 DOM 加载到实际的浏览器页面上，第一个参数是要渲染的 React 对象，第二个参数是页面的目标位置。

页面表现：

可以看到定义的 React 元素渲染到了页面上

了解 React 元素

将上面例子中的 element 元素打印出来，在浏览器查看。

在控制台查看。可以看到打印出来一个 Object ，React 元素就是一个 JS 对象。Object 里面包含很多属性，可以看到属性 type 的值是 “h1”。属性 props 里面还包含属性 children，属性 children 的值就是刚刚定义的文本内容“Hello React”。

 

创建组件

组件是构成 React 页面的代码片段，也是 React 最基本的组织界面的一个形式。

在 src 目录下新建一个 components 文件夹，在 components 文件夹下新建 listItem.jsx，建议使用小驼峰命名法对组件进行命名，组件的后缀是 jsx。

定义组件

如果有下载 Simple React Snippets 插件，可以使用 imrc 与 cc 缩写快速创建一个 React 模板。

定义一个 React 组件

引用组件

代码中的 className="container" 作用是获得 bootstrap 默认居中的样式。

代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render( <App />, document.getElementById('root'));

index.js