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