React组件开发

配置好开发环境之后，就可以进行实际的开发了，通常项目源代码会存放在src文件夹中,在src中创建js文件夹，将所有用的js分类存放其中，

react组件存放路径:src -> js -> components

一、页面头部组件

import React from 'react';    
import ReactDom from 'react-dom';

//组件名要大写，如ComponentHeader

export default class ComponentHeader extends React.Component{ //外部要调用(提供给外部使用的组件)，必须使用export default暴露接口 render(){//解析输出 return( <header> <h1>页面头部11</h1> </header>

            //return()只能返回一个根节点，多个节点会报错，解决方案如下
            //<div>

            //<header>这是头部</header>

            // <div>logo</div>

            //</div>

 ) } }

二、创建首页组件

var React=require('react');
var ReactDom=require('react-dom');

import ComponentHeader from './components/header';   //引入外部定义的组件，需要使用import导入组件，前提是该导入组件使用export default暴露了接口，否则会报错

class Index extends React.Component{   //使用React自有的Component方法，引入定义的组件
     render(){
        return(
           <ComponentHeader />
        )
     }
}

ReactDom.render(<Index />,document.getElementById('example'))   //相当于程序入口，将值绑定到HTML页面，即在HTML中显示页面和数据(入口文件定义:ReactDom.render())

html中代码：

<div id="example">123,hello world!</div>
<script src="bundle.js"></script>   //此处为使用webpack编译打包之后的js，必须引入