- 进行开发环境安装(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,不然组件是会报错,没有定义的。
这样就完成了组件的封装。