React入门及基础组件

新建了一个React项目之后，大家都无从下手，那这篇文章就带大家入门。

首先介绍一下react，它是一个用于构建用户界面的JavaScript库。

接下来带大家创建一个组件，并使用它。

首先新建一个Body.js文件，引入我们的react模块。

import React from 'react';

然后创建一个名为Body的类（也就是组件）
export default代表挂载，这样其他的页面才能引用它
extends是继承的意思，这个类继承了React.Component

export default class Body extends React.Component{

    //render()用来解析本身类的输出
    render(){

      //return里面只能有一个节点(必须有一个最大的节点包括所有内容)
        return(

            


                
Hello World!

            

        )

    }

}

此时就创建好了一个组件，使用时以标签的形式使用，并以导包的方式导入即可，代码如下：
例：在app.js页面中

//   ./代表当前根目录下查找Body, .js文件后缀可以省略，
//   ./不能省略，要不系统会以为你在引入第三方模块，就会到我们的第三方包里去找
import Body from './Body';

function App() {
    return (
      

        
      
    );
}

这个时候运行我们的项目，在浏览器中打开就会将Body.js里的内容显示在页面上。