使用样式

Time：2019-07-17

首先写一个Demo.js文件，内容如下：

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;

导出为组件，注意这里用的是类组件的写法，在render()函数中，我们要return并且可以定义STYLING对象，用于装饰h2元素。

将此组件应用到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" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
            学习React!
          </a>
          <Demo />
        </header>
      </div>
    );
  }
}

export default App;

其中，App.js也导出了一个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.