【學習】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用於記錄項目信息,以及外部依賴包的導入信息等
參考:https://blog.csdn.net/daxiazouyizou/article/details/79743832
https://elemefe.github.io/element-react/#/zh-CN/quick-start
【學習】reactjs(一)——使用npm創建react項目並整合elementUI