react-(3)第一个react组件

任务

1. 创建自定义的组件Counter
2. 将Counter组件渲染到dom上
3. 用bootstrap来修饰Counter中的元素

创建组件

1. 在src下创建component目录来存放自己的组件
2. 新建counter.jsx文件
3. 创建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

1. 修改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

1. 安装bootstrap

npm i bootstrap

不加版本信息，默认安装当前最新稳定版（例如：4.3.1，具体见官网）。如果想安装3.x版本的bootstrap，例如安装3.4.1，如下

npm i bootstrap@^3.4.1

1. 修改index.js，导入bootstrap.min.css

import "bootstrap/dist/css/bootstrap.min.css";

2. 修改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来代替。