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