【学习】reactjs（一）——使用npm创建react项目并整合elementUI

在实习的过程中了解了react，所以打算使用react搭建一个属于自己的页面，如有问题请教正，谢谢。

Github：https://github.com/yclxt/react-elementUI

工具：

使用工具：nodejs；Jetbrains WebStorm

nodejs的安装和配置环境变量这里就不写了。

创建过程：

命令行安装全局create-react-app脚手架工具：npm install -g create-react-app

定位到工作目录下，创建项目：create-react-app react-elementui

特别注意：项目名称不能有大写字符。

进入项目目录：执行 npm start

这样，react项目就创建完成了。

接下来安装elementui组件。

执行  npm i element-react --save 进行安装，接着 npm install element-theme-default --save 安装必要的主题包。

最后就是使用啦！我通过修改App.js，添加了一个按钮，没有添加任何的事件，代码和效果图如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import {Button} from 'element-react';
import 'element-theme-default';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          Hello react!!!
        </p>
      <Button type="primary" >Hello</Button>
      </div>
    );
  }
}

export default App;

这样，创建工作就全部做完了。

文件分析：

项目结构如图所示：

其中node_moudles是存放项目依赖包的地方（类似于java中的library）

src是项目开发中的主要区域

build是编译后文件存放的位置

package.json用于记录项目信息，以及外部依赖包的导入信息等

修改默认端口：

package.json中添加红色部分：修改到8081端口。

"scripts": {
    "start": "set PORT=8081 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

参考：https://blog.csdn.net/daxiazouyizou/article/details/79743832

https://elemefe.github.io/element-react/#/zh-CN/quick-start