iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0

【前言】
  昨天我們很簡(ㄙㄨㄟˊ)略(ㄅㄧㄢˋ)的介紹ES6、Babel、JSX之後,我們要來使用React撰寫我們第一個Component囉!

【正文】
  這次的範例呢,會採用官方所整合好的懶人包直接建置環境撰寫,所以第一步我們就來建構React環境吧!然而要注意的一點是,要先確保電腦中有安裝Node.js哦。

  在終端機下輸入下列命令:

npx create-react-app 專案名稱 // 利用npx create-react-app 建構專案 
cd my-app // 移動至專案目錄下

  執行完後你會看到你的路徑下會有一個你自己命名的專案資料夾:
資料夾結構

  此時輸入下列命令:

npm start // 執行package.json檔中,script的start指令

  瀏覽器就會以localhost身分幫我們開啟網頁:
瀏覽器

  官方所給的懶人包其實已經幫我們整合好許多套件,像是Webpack、Babel、JSX、ESlint等等,所以在這次的範例中就不用擔心一些有的沒有的事情囉。在網頁中,訊息告訴我們編輯App.js檔之後儲存就可以自動刷新網頁,並且看到最新的畫面了,就不用每次都一直F5瘋狂刷新,是不是就甘心的!那在正式撰寫我們的Component之前呢,我們先來看看到底裡面的檔案到底在搞什麼花樣。我們在這裡就主要看index.js及App.js這兩隻檔案:

  • index.js
import React from 'react'; // import react 模組
import ReactDOM from 'react-dom'; // import react-dom 模組
import './index.css';
import App from './App'; // import App Component

ReactDOM.render(  // 使用ReactDOM裡面的render方法
  <App />, // 第一個參數放置要render的Component
  document.getElementById('root') //第二個參數放要放到哪個實體DOM中
);
  • App.js
import React from 'react'; // import react 模組

// 以類別宣告App Component,並且App Component繼承React Component中所有特性
// 通常習慣Component以大寫開頭,且App.js(或是Root.js)檔案通常為所有Component的根集合
class App extends React.Component {
  // 以class宣告component一定必要的方法:render()
  render() { 
    return ( 
      // 每次return的結果只能有一個根元素,不可以有多個兄弟節點
      // 這裡開始撰寫Component元件
      <div> 
        {/* 撰寫自己的Component */}
      </div>
    );
  }
}

export default App; // 匯出 App Component 

那麼我們就來改寫一下,來寫出最基本的Hello World吧!

  • App.js
import React from 'react';

class App extends React.Component {
  render() { 
    return ( 
      // 在React中撰寫inline-style的css時,要用物件的方式做傳遞
      // 如果有要做到運算或是呼叫function時,要用{}括起來
      <div style = {{ textAlign: 'center' }} >
        <div>Hello, Nelly</div>
        <div>The day today is {new Date().toLocaleDateString()}</div>
      </div>
    );
  }
}

export default App;

儲存之後再到網頁中,你會發現頁面會幫我自動刷新成剛剛寫的樣子囉!
畫面

燈燈!!我們已經會寫了屬於我們第一個的React Component了,是不是很簡單啊!
那下次會介紹一下Props跟State囉,我們下次見!Bye~


上一篇
【DAY 02】蝦咪?ES6、Babel、JSX要先來鑑定?
下一篇
【DAY 04】React!說,Props是誰啊?
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言