初学react(2)——创建一个组件

创建项目之后，我们就可以在项目里面加入自己的代码，首先我尝试在项目里添加一个自定义的组件。

在src目录下创建一个components文件夹，然后在components文件夹里创建一个MyComponents的组件，在组件目录内创建了index.js和index.css文件：

在index.js里写上代码：

import React, { Component } from 'react' //必须导入这两个
import './MyComponent.css' //导入css文件
class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = { count: 1 }
    }
    add() {
        this.setState(preState => ({count: preState.count + 1})) //实现点击按count+1
    }
    render() {
        return (<div className="my-component">
            <button onClick={() => {this.add()}}>click</button>
            <div>{this.state.count}</div>
        </div>)
    }
}

export default  MyComponent //必须要导出

在MyComponents.css文件里面写上代码：

.my-component{
    width: 100px;
    height: 100px;
    background: #ccc;
}

在src/App.js下导入组件并使用

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MyComponent from './components/MyComponent'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <MyComponent />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

在目录下，通过npm start启动服务，然后就会得到下图的效果：

从上面添加组件来看，我们编辑组件只需要把组件分好模块，按照react的语法规则开发组件，然后在需要使用的地方导入和使用组件就可以了。