使用组件

项目目录

$ ls -R src/
    src/:
    App.js  components/  index.js

    src/components:
    Hello/  Welcome/

    src/components/Hello:
    index.css  index.jsx

    src/components/Welcome:
    index.jsx

创建 Hello 组件

• index.jsx

import React, { Component } from "react";
import "./index.css";

export default class Hello extends Component {
  render() {
    return (
      <div className="title">
        <p>hello</p>
      </div>
    );
  }
}

• 也可以配置样式 index.css

.title {
  background-color: burlywood;
}

创建 Welcome 组件

• index.jsx

import React, { Component } from "react";
import "./index.css";

export default class Welcome extends Component {
  render() {
    return (
      <div className="title">
        <p>Welcome</p>
      </div>
    );
  }
}

在 App 中引用组件

import React, { Component } from "react";
import Hello from "./components/Hello";
import Welcome from "./components/Welcome";

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello />
        <Welcome />
      </div>
    );
  }
}