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

1、介紹

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

二、優勢

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

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

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

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

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

      f、自動發佈：集成好了發佈成品功能，編譯後直接發佈，而且包含了sourcemaps功能

2、腳手架官網

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

3、安裝create-react-app

一、安裝前須要安裝node和npm（node版本不能低於8.xx，否則會報錯）

npm install -g create-react-app

二、建立react項目

命令以下

create-react-app my-app

三、啓動服務

npm start

啓動後頁面展現，端口爲3000

 

四、目錄結構

 

好，腳手架啓動成功後，安裝elementUI

4、安裝elementUI

一、官網

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

二、安裝

npm i element-react --save

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

 

三、使用 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>
    )
  }
}

 

頁面效果