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，不然组件是会报错，没有定义的。
这样就完成了组件的封装。