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

摘要： 一、介紹 1、create-react-app是FaceBook官方釋出了一個無需配置的、用於快速構建開發環境的腳手架工具。 2、優點 a、無需配置：官方的配置堪稱完美，幾乎不用你再配置任何東西，就可以上手開發專案。 b、高整合性：集成了對React，JSX，ES6和Flow的...

一、介紹

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>
)
}
}

頁面效果