React实例1-新建组件

1.新建组件

在src目录下新建一个文件SmailSmailGirl.js文件，然后建立一个基本的HTML结构。

import React,{Component} from 'react' class SmailSmailGirl extends Component{ render(){ return ( <div> <div><input /> <button> 增加服务 </button></div> <ul> <li>头部按摩</li> <li>精油推背</li> </ul> </div> ) } } export default SmailSmailGirl

然后在src下创建index.js文件，在入口中引入SmailSmailGirl组件。

import React from "react"; import ReactDOM from 'react-dom'; import SmailSmailGirl from "./SmailSmailGirl"; //JSX js+xml 虚拟dom ReactDOM.render(<SmailSmailGirl/>, document.getElementById("root"));

2.组件外层包裹原则

在SmailSmailGirl.js文件中，我们可以看到以上代码中最外层存在

，如果将其去掉就会报错，和Vue一样，最外层必须有一层包裹。

3.Fragment标签讲解

假若你的组件布局偏偏不要最外层的标签，那我们可以使用标签，React16已经有所考虑。

首先我们先引用，需要先进行引入。

import React,{Component,Fragment } from 'react'

然后把最外层的div换成Fragment，如下：

import React,{Component,Fragment } from 'react' class SmailSmailGirl extends Component{ render(){ return ( <Fragment> <div><input /> <button> 增加服务 </button></div> <ul> <li>头部按摩</li> <li>精油推背</li> </ul> </Fragment> ) } } export default SmailSmailGirl

个人博客：Karma‘s Blog 源码地址：传送门