创建项目之后,我们就可以在项目里面加入自己的代码,首先我尝试在项目里添加一个自定义的组件。
在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的语法规则开发组件,然后在需要使用的地方导入和使用组件就可以了。