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

 

页面效果