[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…】
new project

▼ 依序輸入欄位值
new project dialog

▼ 開啟react1專案時會自動下載create-react-app所有需要的組件
create act app

可惜似乎是IDEA的問題,新建立的react1模組會跑到暫存目錄去,檢查一下Run側邊視窗:
tmp

如果確實產生到暫存目錄去,那麼自己開啟Terminal側邊視窗再輸入node.exe D:\UTIL\nodejs\node_modules\create-react-app\index.js react1,讓需要的檔案產生在專案目錄裡(d:\work\react1)。

▼ 相關組件安裝完成後,Run視窗會有【Happy hacking】與【Done】等訊息出現
open project

▼ 打開Terminal側邊欄視窗後,輸入 npm start 以啟動內含的Web server,用瀏覽器瀏覽 http://localhost:3000 就能看到create-react-app網頁了
npm start

▼ create-react-app第一個頁面
first page

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 (       
logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } } export default App;

修改程式在App-intro下方插入自訂的Person Component,因為尚未定義Person,因此網頁會出現'Person' is not defined的錯誤:

         

To get started, edit src/App.js and save to reload.

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 (       

I'm {props.name}! My age is {props.age}.

) } 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 (       
logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } } export default App;

modified page

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 (       

I'm {props.name}! My age is {props.age}.

) }; export default person;

6.最終的頁面
result


##


想在手機閱讀更多Javascript資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems