{ PH_Dev }

Published on

建立第一個 React Code

Authors
  • avatar
    Name
    Penghua Chen(PH)
    Twitter

建立第一個 React Code

學習新技術的第一天總是精神奕奕,趕緊跟 React 好朋友學習吧!

今天 React 好朋友跟我說,學習一門技術最快的方式就是把手弄髒(get hands dirty),所以它打算透過舉一個簡單的範例來讓我了解 React 是如何建立一個元件(component) 並將資料傳入到元件中(component)的。

相關測試範例,點擊前往

初探 React,建立第一個元件

React 環境建置: 使用 create-react-app

往下理解 React 如何建立元件(component)之前,需要先建立環境。

而這裡則透過使用 create-react-app 的方式建立環境

至於建立的方式則是可以參考官方提供的方式: Quick Overview

npx create-react-app my-app
cd my-app
npm start 

完成環境建置後,接著我們要開始建立第一個元件囉

建立第一個元件(component)

首先先來看看一個我們在 HTML 常見的撰寫:

<div class="person">
  <h1>Bill</h1>
  <p>Your Age: 26</p>
</div>
<style>
  .person {
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 2px #ccc;
    width: 200px;
    padding: 20px;
  }
</style>

接下來,我們要透過在 React 中建立元件,並且 DOM 架構會與上面的程式碼相同

建立第一個 Function Component

最基本的方式之一是使用 function 建立的元件,也稱為 Function Component

並且我們會使用到一種叫做 JSX 的語法幫助我們在建立元件(component)時可以更加容易。

JSX 語法在此時的出現也許會造成一些疑問,不過這於接下來的文章中會深入了解,所以這邊我們先理解怎麼使用即可。

接著,我們在專案中建立 PersonOne 元件

// ./src/components/PersonOne

function PersonOne() {
  return (
    <div className="person">
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </div>
  );
}

export default personOne;

在 App.js 中引入這個元件:

import React from "react";
import "./styles.css";

import PersonOne from "./components/PersonOne";

export default function App() {
  return (
    <div className="App">
      <h2>建立第一個 Function Component</h2>
      <PersonOne />
    </div>
  );
}

這邊需要注意的重點是:

  • 因為 class 在 JS 是保留字,所以另外寫成 className 這個部分的說明可以在文件中查到,前往文件
  • PersonOne Component export ,在 App.js 中使用。

如果沒意外的話,應該可以成功看到我們透過 React 建立的元件已經顯示在畫面上了。

但是上面的元件存在一個問題: 無法有效的複用,因為值是固定的(hard code)。

因此這邊我們需要建立一個可以傳遞自定義參數的函式,這樣我們才可以依據不同的值,渲染出不同的資料

所以這邊我們需要改寫一下剛剛程式碼,讓它更有彈性一些。

為了保留比較,這邊建立 PersonTwo Component:

function PersonTwo(props) {
  const { name, age } = props;
  return (
    <div className="person">
      <h1>{ name }</h1>
      <p>Your Age: { age }</p>
    </div>
  );
}

在 App.js 中引入這個元件,並且傳遞自定義的參數:

import React from "react";
import "./styles.css";

import PersonOne from "./components/PersonOne";
import PersonTwo from "./components/PersonTwo";

export default function App() {
  return (
    <div className="App">
      <h2>建立第一個 Function Component</h2>
      <PersonOne />
      <PersonTwo name="Mark" age="27"/>
    </div>
  );
}

這邊需要注意的重點是:

  • 在 React 元件中透過在大括號 {} 中寫入變數,可以取得動態傳入的值。
  • 在 React component 中,允許我們透過 props 這個物件,將自定義的參數傳到 function 中使用

上述的篇幅學習了如何建立一個 Function Component,接著讓我們來看看如何建立一個 Class-based Component 吧!

建立一個 Class-based Component

這裡我們將 PersonTwo 的程式碼從原本的 Function Component 改寫成 Class-based Component,PersonThree。

使用 ES6 Class 語法達成:

import React, { Component } from "react";

class PersonThree extends Component {
  render() {
    const { name, age } = this.props;

    return (
      <div className="person">
        <h1>{name}</h1>
        <p>Your Age: {age}</p>
      </div>
    );
  }
}

export default PersonThree;

引入到 App.js 後的使用方式相同。

// ... 略
import PersonThree from "./components/PersonThree";

export default function App() {
  return (
    <div className="App">
     // ...略
      <h2>建立一個可傳入自定義參數的 Class-based Component</h2>
      <PersonThree name="Terry" age="17"/>
    </div>
  );
}

透過 ES6 Class 建立的元件有幾個地方需要注意:

  1. Class-based Component 使用 props 的方式需要透過 this 來取得。
  2. 透過 render() 方法將內容渲染在網頁上。

以上就是 React 好朋友在今天想要讓我先了解的部分~

它告訴我雖然一下子就提供了看似很難的例子,但這邊可以先記住使用的方式,並且在往後的天數裡會慢慢帶領我學習今天使用的種種技巧的細節。

程式碼同步發佈於:

  1. Github

就這樣囉,明天見~

資源