react 系列 原始封装组件方法

进行开发环境安装（cnpm 建议使用国内淘宝镜像）

cnpm install -g create-react-app
create-react-app 项目名
cd 项目名
npm start

上面运行成功后，就会在网页打开http://localhost:3000/页面。

默认目录结构


；

index.js 是入口文件；

App.js 在入口文件进行引用，主要用于Dom的操作。

在App.js进行组件的封装

首先在src目录下新建一个views文件夹,用于公共组件的存储。这里想说一点，react的组件后缀名使用的是 .js进行定义的，不同于vue组件是以 .vue进行定义。

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import List from './views/list';
import BodyIndex from './views/bodyindex';
import Footer from './views/footer';

class App extends Component {
render() {
return (
<div className="App-header">
<List/>
<BodyIndex/>
<Footer/>
</div>
);
}
}

export default App;

关于jsx的语法，在上一篇的博客中已经介绍过，要注意父节点的运用。

组件的模板语法（举例 footer.js）

import React, { Component } from 'react';

class Footer extends Component {
render() {
return (
<p>这里是公共的底部，用于声明版权</p>
);
}
}

export default Footer;

注意每一个组件头部都要写上引入的 react，不然组件是会报错，没有定义的。

这样就完成了组件的封装。