组件:网页可以分为多个模块,比如头部,底部,分享等各种模块,这些模块在其他页面也可能会用到,我们把这些分开,每一个模块当作一个组件,进行复用。
接下来直接以头部 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> ) }