P07:组件外层包裹原则、Fragment 标签的应用

通过上面六节的学习，已经对React有了基本的认识。

最好的学习就是在实战中的成长了，我们开始以作一个《服务菜单》的应用，练习以前所学的知识和学习新知识。

当然本教程不是教大家作CSS的，所以我就不进行样式布局了。

现在 src 的目录下面，新建一个文件 Beauty.js 文件，然后写一个基本的HTML结构。

代码如下：

import React,{Component} from 'react'

class Beauty extends Component{
    render(){
        return (
            
                 增加服务
                
                    头部按摩
                    精油推背
                
            
        )
    }
}

export default Beauty

这个文件现在还没有什么功能，只是写完了一个小组件。 然后我们把入口文件的 组件换成 Beauty 组件。

这是一个很重要的原则，比如上面的代码，我们去掉最外层的

import React,{Component} from 'react'

class Beauty extends Component{
    render(){
        return  (
                 增加服务 
               
                   头部按摩
                   精油推背
                
        )
    }
}
export default Beauty

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