初窥
通过 create-react-app 构建的 React 工程,其中的 src 目录是我们关注的重点,它是我们编写代码的地方,我们现在需要做的,就是把里面的东西全部删除,然后一步步的尝试自己构建。
首先我们创建一个 index.js 。
// 导入依赖
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 将到在浏览器中显示的内容
class Index extends Component {
render() {
return
hello react
}
}
// 渲染内容
ReactDOM.render(, document.getElementById('root'));
记得保持你的环境是 npm start 的状态。
组件
组件是元素复用的思想,也是组件化框架的最只要特征和解决的问题。我们现在要把网页的菜单栏看出一个组件,然后独立的抽象出来,这样做之后,任何需要菜单的页面只要导入该组件,就可以实现代码复用,让维护和扩展都变得简单。
新建一个 header.js 文件。
import React, { Component } from 'react';
// 每一个 extends Component 的 class 都是一个组件
class Header extends Component {
render() {
return (
}
}
// 导出组件
export default Header;
/*
支持这种操作
export default eader extends Component {}
*/
修改 index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header.js'; // 引入 Header 组件
class Index extends Component {
render() {
return (
{/* 使用 Header 组件 */}
hello react
)
}
}
ReactDOM.render(, document.getElementById('root'));
以上就是 React 组件的封装。