React腳手架create-react-app+elementUI使用

一、介紹

1、create-react-app是FaceBook官方發布了一個無需配置的、用於快速構建開發環境的腳手架工具。

2、優點

       a、無需配置：官方的配置堪稱完美，幾乎不用你再配置任何東西，就可以上手開發項目。

      b、高集成性：集成了對React，JSX，ES6和Flow的支持。

      c、自帶服務：集成了開發服務器，你可以實現開發預覽一體化。

      d、熱更新：保存自動更新。

      e、全兼容性：自動處理CSS的兼容問題，無需添加-webkit前綴。

      f、自動發布：集成好了發布成品功能，編譯后直接發布，並且包含了sourcemaps功能

二、腳手架官網

https://github.com/facebookincubator/create-react-app

三、安裝create-react-app

1、安裝前需要安裝node和npm（node版本不能低於8.xx，不然會報錯）

npm install -g create-react-app

2、創建react項目

命令如下

create-react-app my-app

3、啟動服務

npm start

啟動后頁面展示，端口為3000

 

4、目錄結構

 

好，腳手架啟動成功后，安裝elementUI

四、安裝elementUI

1、官網

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

2、安裝

npm i element-react --save

npm install element-theme-default --save    //安裝主題

 

3、使用 elementUI

在腳手架的App.js 中引入elementUI

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

import { Button } from 'element-react';  //引入element-react
import 'element-theme-default';          //引入主題

 

代碼中添加elementUI組價件

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>
          <p className="App-intro">
           Hello react!!!
         </p>
         <Button type="primary">element按鈕</Button>   // 按鈕組件
         </header>
      </div>
    )
  }
}

 

頁面效果