任务
- 创建自定义的组件Counter
- 将Counter组件渲染到dom上
- 用bootstrap来修饰Counter中的元素
创建组件
- 在src下创建component目录来存放自己的组件
- 新建counter.jsx文件
- 创建Counter类继承字Component，导出Counter类
//导入React和Component
import React, { Component } from "react";
//创建Counter类并继承子React.Component
class Counter extends Component {
state = {};//这里放渲染用的数据，暂时没有用到，可以删除
render() {
return <button>Hello World</button>;//组件渲染内容，目前是一个button标签
}
}
export default Counter;//导出Counter类
快捷键提示：
页面输入imrc+tab键快速生成（导入React和Component代码）
页面输入cc+tab键快速生成（创建类导出类代码）
渲染组件到dom
- 修改index.js，注释掉或者删除一部分无用代码，导入Counter类，修改render内容
import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import Counter from "./component/counter";//导入Counter类
ReactDOM.render(<Counter />, document.getElementById("root"));//将Counter组件渲染到index.html中的<div id="root"></div>处
serviceWorker.unregister();
使用bootstrap
- 安装bootstrap
npm i bootstrap
不加版本信息，默认安装当前最新稳定版（例如：4.3.1，具体见官网）。如果想安装3.x版本的bootstrap，例如安装3.4.1，如下
npm i bootstrap@^3.4.1
- 修改index.js，导入bootstrap.min.css
import "bootstrap/dist/css/bootstrap.min.css";
- 修改Counter组件，使用boostrap提供的样式
给button增加样式"btn btn-primary"
import React, { Component } from "react";
class Counter extends Component {
state = {};
render() {
return <button className="btn btn-primary">Hello World</button>;
}
}
export default Counter;
注意className。
解释：在react中的类似html的代码其实是jsx，不是真正的html，而在react中class式一个关键字，不能直接使用，所以用了className来代替。
网友评论