【學習】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，添加了一個按鈕，沒有添加任何的事件，代碼和效果圖以下：

 

 1 import React, { Component } from 'react';
 2 import logo from './logo.svg';
 3 import './App.css';
 4 
 5 import {Button} from 'element-react';
 6 import 'element-theme-default';
 7 
 8 class App extends Component {
 9   render() {
10     return (
11       <div className="App">
12         <header className="App-header">
13           <img src={logo} className="App-logo" alt="logo" />
14           <h1 className="App-title">Welcome to React</h1>
15         </header>
16         <p className="App-intro">
17           Hello react!!!
18         </p>
19       <Button type="primary" >Hello</Button>
20       </div>
21     );
22   }
23 }
24 
25 export default App;

這樣，建立工做就所有作完了。

 

文件分析：

 

項目結構如圖所示：

其中node_moudles是存放項目依賴包的地方（相似於java中的library）

src是項目開發中的主要區域

build是編譯後文件存放的位置

package.json用於記錄項目信息，以及外部依賴包的導入信息等

 

修改默認端口：

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

1 "scripts": {
2     "start": "set PORT=8081 && react-scripts start",
3     "build": "react-scripts build",
4     "test": "react-scripts test --env=jsdom",
5     "eject": "react-scripts eject"
6   }

 

 

 

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

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