版本说明

IDEA 2020.3.2
react 17.0.2
element-react 1.4.34

项目创建与运行

以管理员的身份打开命令提示符，切换到想要存放react项目的空文件夹下

安装create-react-app

npm install -g create-react-app
创建项目

create-react-app demo-react01

创建完成后项目文件结构如下
切换工作目录到项目文件夹下并输入命令运行项目

cd demo-react01

npm start

项目运行完成后自动打开浏览器访问http://localhost:3000（此处最好将系统默认浏览器改为谷歌浏览器，QQ浏览器可能是空白页），如下图
用IDEA打开项目，其中
- src/index.js为应用入口文件，目的是渲染App组件
- App.js为根组件，其style设置在App.css中
- 右击package.json文件选择Show npm Scripts，后续可直接点击start运行项目

结合element-react添加简单的点击计数组件

在Terminal中输入以下命令

npm i element-react --save

npm install element-theme-default --save

npm install react-hot-loader@next --save

右击src新建ClickCount.css文件，设置风格

.ClickCount{
    display: flex;
    flex-direction: column;
}
.button1{
    background-color: white;
    width: 130px;
    font-family: "Times New Roman", serif;
    font-size: 25px;
}
.text{
    font-size: 20px;
    margin-top: 10px;
}

右击src新建ClickCount.js文件，并引入相应的.css文件，代码如下

import React, { Component } from 'react';
import { Button } from 'element-react';
import './ClickCount.css'

class ClickCounter extends Component {

    constructor(props) {
        super(props);
        this.onClickButton = this.onClickButton.bind(this);
        this.state = {
            count: 0
        }
    }

    onClickButton() {
        this.setState({count: this.state.count + 1});
    }

    render() {
        const counterStyle = {
            margin: '16px'
        }
        return (
            <div style={counterStyle} className="ClickCount">
                <Button className="button1" type='primary' onClick={this.onClickButton}>
                    Click Me
                </Button>
                <div className="text">
                    Click Count: <span id="clickCount">{this.state.count}</span>
                </div>
            </div>
        );
    }
}

export default ClickCounter;

在index.js里引入element-react,代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'element-react'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

在App.js中引入ClickCount组件，并放置在图片下一行处，代码如下

import logo from './logo.svg';
import './App.css';
import ClickCounter from "./ClickCount";

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

export default App;