Time：2019-07-17
首先寫一個Demo.js文件，內(nèi)容如下：
import React, { Component } from 'react';
class Demo extends Component {
render() {
const STYLING = {
color: 'hsla(0deg, 50%, 100%, 0.72)',
backgroundColor: 'cornflowerblue'
}
return (
<div>
{
/* 這是注釋 */
}
<h1 className="BigHead">Bighetti</h1>
<h2 style={STYLING}>5乘5等于{5 * 5}</h2>
<p title="with quotes" data-thing={17 * 85}>Hello World</p>
</div>
)
}
}
export default Demo;
導(dǎo)出為組件柬批，注意這里用的是類組件的寫法啸澡，在render()函數(shù)中，我們要return并且可以定義STYLING對象氮帐，用于裝飾h2元素嗅虏。
將此組件應(yīng)用到App.js中：
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Demo from './Demo'
// 類組件寫法
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<a className="App-link" target="_blank" rel="noopener noreferrer">
學(xué)習(xí)React!
</a>
<Demo />
</header>
</div>
);
}
}
export default App;
其中，App.js也導(dǎo)出了一個App組件上沐，用在整個項目的入口index.js中：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
最終效果：
屏幕快照 2019-07-17 下午9.16.34.png
END.
