[筆記] React "Hello World" 快速上手
快速建立一個專案
https://github.com/facebookincubator/create-react-app
npm start 他會跑在 3000 port
來看看我們產生的 my-app 資料夾裡面有什麼：
package.json 裡面會紀錄 npm 用到的套件
node_moudules 裡面會有套件內容，以及一些 binary 檔，這個資料夾留著自己用就好，要給別人 source code 或是放到 github 的話只需要上傳 package.json 以及 public 資料夾，src 資料夾以及 README 文件
接著我們來寫個 Hello world 吧～
這是程式的進入點
所有東西產生出來都會在這個 <div>
ReactDOM.render(
第三行 import App 是把 App.js 檔案內容匯入
下面的 render 負責顯示畫面，裡面有兩個參數
目前就是把 <App /> 的內容顯示到 document.getElementById('root') 畫面上 id = root 的標籤中
這行一定要，其他的 import 可自行替換新增
render() 當中
return 裡面寫要 output 的東西，其中 className = "App" 可對應到 index.js 檔案中的 <App /> 標籤
我在 return 的地方，<div className="App"> 區域內加上一個 h1 大小的文字訊息 Hello, world!
所以經過這繁複的過程，從 index.html -> index.js -> App.js 終於順利地把網頁內容找到 Hello, world!，並呈現到 index.html 當中
在 project 的根目錄下安裝以下套件：
https://mobx.js.org/getting-started.html
安裝在專案中：到專案資料夾裡面做以下安裝指令
使用方法：
修改 index.js 檔案裡面的 App.js 路徑，這樣才能順利找到 App.js
去 stores 資料夾中，建立一個 store.js 檔案，裡面先這樣寫：
用 let 宣告了一個變數 store 裡面存一些資料 ( json 格式 )
去 App.js 當中
加入這兩個 import
第二個 import 加入剛剛的 store.js 檔案
拿出資料並且顯示
安裝
https://www.npmjs.com/package/material-ui
安裝外掛
使用方法：
修改 index.js 檔案
加入 Mui (Material UI) Theme Provider
然後使用 <MuiThemeProvider> 把我們的 <App> 包起來
加入 injectTapEventPlugin 可以支援 TapEvent
這個動作會把我們整個 project 最佳化，檔案大小降到最小，以及自動翻譯成目前瀏覽器看得懂的 ES5 版本 (我們剛剛快速建立專案時，Babel 就已經包含在內了https://babeljs.io/ )
build 完產生的結果會在 build 資料夾裡面
基本上把 build 資料夾當中整包跑起來即可
沒有 serve 的話安裝一下：
https://github.com/facebookincubator/create-react-app
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
-g 是 global 的意思npm start 他會跑在 3000 port
來看看我們產生的 my-app 資料夾裡面有什麼：
node_moudules 裡面會有套件內容，以及一些 binary 檔，這個資料夾留著自己用就好，要給別人 source code 或是放到 github 的話只需要上傳 package.json 以及 public 資料夾，src 資料夾以及 README 文件
接著我們來寫個 Hello world 吧～
public/index.html看到
<body>
<div id="root"></div>
</body>
所有東西產生出來都會在這個 <div>
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './index.css';
<App />,
document.getElementById('root')
);
下面的 render 負責顯示畫面，裡面有兩個參數
目前就是把 <App /> 的內容顯示到 document.getElementById('root') 畫面上 id = root 的標籤中
src/App.js
import React, { Component } from 'react';
class App extends Component {
// 顯示東西
render() {
// output 放在 return
return (
<div className="App">
<h1>Hello, world!</h1>
</div>
);
}
}
export default App;
return 裡面寫要 output 的東西，其中 className = "App" 可對應到 index.js 檔案中的 <App /> 標籤
我在 return 的地方，<div className="App"> 區域內加上一個 h1 大小的文字訊息 Hello, world!
export default App;
App.js 的最下面一行要 export，才能讓 index.js 找到 App在 project 的根目錄下安裝以下套件：
Mobx 用來管理資料流
getting starthttps://mobx.js.org/getting-started.html
安裝在專案中：到專案資料夾裡面做以下安裝指令
npm install mobx --save
npm install mobx-react --save
使用方法：
在 src 資料夾底下，建一個 components 資料夾以及 stores 資料夾，
把除了 index 以外的其他檔案放進 components 資料夾裡面，
stores 資料夾則是要來存放處理 data render 相關的 js 檔。
修改 index.js 檔案裡面的 App.js 路徑，這樣才能順利找到 App.js
去 stores 資料夾中，建立一個 store.js 檔案，裡面先這樣寫：
import {observable, action} from 'mobx';
let store = observable({
name: `tao`,
instrument: `violin`
})
export default observable(store);
去 App.js 當中
加入這兩個 import
import {observer} from 'mobx-react';
import store from '../stores/store.js';
拿出資料並且顯示
<h2>{store.name}</h2>
<h2>{store.instrument}</h2>
Material UI 好用的UI元件
http://www.material-ui.com/安裝
https://www.npmjs.com/package/material-ui
npm install material-uihttps://github.com/callemall/material-ui
安裝外掛
npm i --save react-tap-event-pluginhttps://github.com/zilverline/react-tap-event-plugin
使用方法：
修改 index.js 檔案
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
ReactDOM.render(
<MuiThemeProvider><App /></MuiThemeProvider>,
document.getElementById('root')
);
加入 Mui (Material UI) Theme Provider
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
<MuiThemeProvider><App /></MuiThemeProvider>,
加入 injectTapEventPlugin 可以支援 TapEvent
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
接著，在 App.js 裡面使用 MaterialUI 的 Raised Button
import RaisedButton from 'material-ui/RaisedButton';
修改 App class 裡面的 render function
// 顯示東西
render() {
const style = {
margin: 12,
};
// output 放在 return
return (
<div className="App">
<h1>Hello, world!</h1>
<h2>{store.name}</h2>
<h2>{store.instrument}</h2>
<RaisedButton label="Change" primary={true} style={style} onTouchTap={this.handleChangeImage.bind(this)} />
<br/>
<img src={this.state.url} alt="234"/>
</div>
);
}
使用 <RaisedButton> 標籤，設定屬性 label, primary, style, onTouchTap
其中 onTouchTap 裡面呼叫了一個 handleChangeIamge 的 function 並且把外面的 this 指標 bind 進去 function 裡面
handleChangeImage 函式也寫在 App.js 裡面，目的是要修改 img 標籤裡面設定的圖片來源網址 {this.state.url}
class App extends Component {
constructor(props){
super(props);
this.state = {
url: 'http://i.imgur.com/nhX3VEW.jpg',
}
}
handleChangeImage() {
this.setState({
url: 'http://i.imgur.com/1KCQlji.jpg',
})
}
// 顯示東西
render() {
// render 的內容請參考前文
}
import RaisedButton from 'material-ui/RaisedButton';
// 顯示東西
render() {
const style = {
margin: 12,
};
// output 放在 return
return (
<div className="App">
<h1>Hello, world!</h1>
<h2>{store.name}</h2>
<h2>{store.instrument}</h2>
<RaisedButton label="Change" primary={true} style={style} onTouchTap={this.handleChangeImage.bind(this)} />
<br/>
<img src={this.state.url} alt="234"/>
</div>
);
}
handleChangeImage 函式也寫在 App.js 裡面，目的是要修改 img 標籤裡面設定的圖片來源網址 {this.state.url}
class App extends Component {
constructor(props){
super(props);
this.state = {
url: 'http://i.imgur.com/nhX3VEW.jpg',
}
}
handleChangeImage() {
this.setState({
url: 'http://i.imgur.com/1KCQlji.jpg',
})
}
// 顯示東西
render() {
// render 的內容請參考前文
}
build project 部署，打包
npm run build
這個動作會把我們整個 project 最佳化，檔案大小降到最小，以及自動翻譯成目前瀏覽器看得懂的 ES5 版本 (我們剛剛快速建立專案時，Babel 就已經包含在內了https://babeljs.io/ )
build 完產生的結果會在 build 資料夾裡面
基本上把 build 資料夾當中整包跑起來即可
沒有 serve 的話安裝一下：
npm install serve
serve -s build
留言
張貼留言