[React-01] 使用IntelliJ IDEA學習React
重新學習React,直接使用IntelliJ IDEA當做編輯器。
0.前置動作:安裝nodejs與create-react-app模組
- 下載並安裝 Node.js
- 執行下列命令以安裝create-react-app模組,安裝後的create-react-app會在 nodejs安裝資料夾/node_modules 裡:
npm install -g create-react-app
1.功能表【File】→【New】→【Project...】
▼ 依序輸入欄位值
▼ 開啟react1專案時會自動下載create-react-app所有需要的組件
可惜似乎是IDEA的問題,新建立的react1模組會跑到暫存目錄去,檢查一下Run側邊視窗:
如果確實產生到暫存目錄去,那麼自己開啟Terminal側邊視窗再輸入node.exe D:\UTIL\nodejs\node_modules\create-react-app\index.js react1
,讓需要的檔案產生在專案目錄裡(d:\work\react1)。
▼ 相關組件安裝完成後,Run視窗會有【Happy hacking】與【Done】等訊息出現
▼ 打開Terminal側邊欄視窗後,輸入 npm start 以啟動內含的Web server,用瀏覽器瀏覽 http://localhost:3000 就能看到create-react-app網頁了
▼ create-react-app第一個頁面
2.修改App.js,加入Person元件
App.js是主要邏輯所在的檔案,預設內容如下:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
修改程式在App-intro下方插入自訂的Person Component,因為尚未定義Person,因此網頁會出現'Person' is not defined
的錯誤:
<p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> <Person name="王大明" age="10" /> <Person name="李中同" age="20" /> <Person name="林小美" age="30" />
3.在IDEA的Project側邊視窗,於src節點按右鍵再選【New】→【File】,新增Person.js,輸入下列內容到Person.js。Person元件的最簡單形式是傳回JSX(JavaScript eXtension)格式的函數,為了解析JSX,因此必須匯入React模組,最後一行的export把Person.js模組裡的元件匯出,供App.js匯入使用:
import React from 'react'; function person(props) { return ( <div className="Person"> <p>I'm {props.name}! My age is {props.age}.</p> </div> ) } export default person;
4.再修改App.js,加上import Person:
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Person from './Person.js'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> <Person name="王大明" age="10" /> <Person name="李中同" age="20" /> <Person name="林小美" age="30" /> </div> ); } } export default App;
5.再於 src 節點新增Person.css,加入Person類別
.Person { display: inline-block; padding: 10px; margin: 10px; border: 1px solid #cccccc; box-shadow: 0 2px 5px #eeeeee; }
再修改Person.js加上import 'Person.css':
import React from 'react'; import './Person.css'; const person = (props) => { return ( <div className="Person"> <p>I'm {props.name}! My age is {props.age}.</p> </div> ) }; export default person;
6.最終的頁面
##
您可能也會有興趣的類似文章
- 用React復刻Windows XP桌面,有原始碼可參考… (0則留言, 2019/03/28)
- IntelliJ IDEA Live Template(即時樣板)的使用與範例說明(IDEA #5) (0則留言, 2019/08/11)
- [IntelliJ IDEA] Java / JavaScript除錯小技巧 (0則留言, 2014/08/14)
- TailwindCSS-1 用IntelliJ IDEA 學習TailwindCSS (1則留言, 2022/11/02)
- 使用IntelliJ IDEA 12的Android UI Designer輕鬆寫Android App (1則留言, 2012/08/09)
- 用IntelliJ IDEA寫第一支Java程式;程式結構說明;Live Tempate用法(IDEA #4) (0則留言, 2019/08/09)
- 快速建立IntelliJ IDEA的Live Template的步驟 (0則留言, 2014/02/21)
- Migration Guide: Eclipse ✈ IntelliJ IDEA (0則留言, 2015/07/07)
- [IntelliJ IDEA 2017.2] Database tool功能簡介 (0則留言, 2017/07/29)
- [IDEA#15] 使用IntelliJ IDEA的Inject Language來加速JSON/SQL字串的編輯 (0則留言, 2021/12/12)
- IntelliJ IDEA的啟動設定與建議安裝的外掛(IDEA #3) (0則留言, 2019/07/21)
- 01. 使用IntelliJ IDEA開發Flutter App:開發環境設置 (0則留言, 2019/09/15)
- 使用IntelliJ IDEA快速設定svn:keywords的方法 (0則留言, 2014/04/04)
- 在IntelliJ IDEA裡以Scratch外掛隨時記錄備忘與開啟外部文件 (0則留言, 2016/03/20)
- 彩蛋變地雷。Ant Design帶來啟示 (0則留言, 2018/12/26)
Sorry, 很久沒用Google sc…