React入门---组件-4

组件：网页可以分为多个模块，比如头部，底部，分享等各种模块，这些模块在其他页面也可能会用到，我们把这些分开，每一个模块当作一个组件，进行复用。

接下来直接以头部 header作为一个组件来进行demo演示组件。

 

下面是整体的一个项目的框架：

到现在，项目的文件夹里面有两个文件 package.json 和 webpack.config.js

1. 在项目文件夹中创建 src文件夹（源代码放这里面）

2. src文件中创建app.html文件 和 js文件夹

3. js文件夹中创建 index.js文件（入口文件夹） 和 components文件夹（用来放一些组件）

4. components文件夹中创建header.js文件（头部的一个组件，可以公用/复用）

（以上文件夹的框架是我自己练习的框架，可根据不同需要进行命名，只需要注意在配置文件中相应修改）

这个时候项目文件框架应该是这样：

 

解析以及各个文件的代码：

 

1. app.html------最后内容会放在这里

<div id="test"> 123 </div>

2. index.js------首先写最基本引入包

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

3. header.js------写头部组件

import React from 'react';
import ReactDOM from 'react-dom';
 //创建一个类 ComponentHeader 相当于继承react里component的子类
 //export default 输出这个类
export default class ComponentHeader extends React.Component{
     //render() 解析类的一个输出
     render(){
         return(
             <div>
                 <h1>这里是头部</h1>
             </div>
             )
     }
 }

代码的意思：创建了一个ComponentHeader的类，通过render方法解析这个类，我们要将 return返回的内容插入到入口JS文件中，也就是index.js；

需要注意，可以给外部使用的组件定义要写：export default

4. index.js------与组件header.js关联

var React = require('react');
var ReactDOM = require('react-dom');
//把刚才定义的头部引用进来 from后面写路径
import ComponentHeader from './components/header.js'
class Index extends React.Component{
    render(){
        return(
　　　　　　　<div>
            　　<ComponentHeader></ComponentHeader>
　　　　　　　</div>
            )
    }
}
//与app.html进行一个绑定，即：入口的定义
ReactDOM.render(<Index/>,document.getElementById('test'));

5. CMD进入到项目文件夹 运行webpack的热加载：（在js中修改后按保存，会自动在浏览器中刷新）

webpack-dev-server

在浏览器 运行：http://localhost:8080

一个小的react-demo就运行完成了。

 

 

注意：

　　组件的render方法，return返回的HTML节点必须是一个。

　　下面是一个错误示范，出现了两个节点，会报错。

render(){
        return(
            //错误示范 
            <ComponentHeader></ComponentHeader>
            <h2>这里头部2</h2>
            )
    }

　　解决方法：放到一个节点里面<div></div>,如下：

render(){
        return(
            //正确示范 
            <div>
                <ComponentHeader></ComponentHeader>
                <h2>这里头部2</h2>
            </div>
            )
    }