使用组件

1. 项目目录

   $ 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

1. 创建 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;
   }

1. 创建 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>
       );
     }
   }

1. 在 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>
       );
     }
   }