使用IDEA创建一个简单的React项目

版本说明

• 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 --force

• 右击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文件，代码如下