Hello React❗️

📗 參考

• GitHub ⟩ create-react-app

🛠 工具

• GitHub ⟩ create-react-app

⭐️ Component

• defined as JS function

• component names must be capitalized❗️

• content of component needs to contain one "root element"❗️

• written in JSX (looks like HTML), and compiled into JS by Babel

App.js

import React from 'react'

/* ---------------------------------------
    ⭐️ Component 
    ------------
    • defined as JavaScript function
    • component names must be capitalized
   --------------------------------------- */

// Hello component
const Hello = (props) => {
  return (
    // ⭐️ content of React component (usually) needs to contain 
    // one "root element" (=<div>, in this case)
    <div>    // root element
      <p>Hello, {props.name}, you're {props.age} years old.</p>
    </div>
  )
}

// App component
const App = () => {

  console.log('Hello from App component')

  const now = new Date();
  const [a, b] = [10, 20];

  /* -------------------------------------------------------------
      ⭐️ JSX
      -------
      React components is mostly written in `JSX`, although it 
      looks like HTML. Under the hood, JSX is compiled into JS.

      Compiling is handled by `Babel`. Projects created with 
      `create-react-app` are configured to compile automatically.
    -------------------------------------------------------------- */

  // 這是什麼鬼？為什麼小括號內有 HTML? (JSX?)
  return (
    <div>
      <p>Hello world, now is {now.toDateString()}</p>
      <p>{a} + {b} = {a+b}</p>
      <Hello name="Joe" age={10+5} />
      <Hello name="Man" age={a+b} />
    </div>
  )
}

export default App

index.js

import ReactDOM from 'react-dom'
import App from './App'

/* --------------------------------------------------------
   When using React, all content that needs to be rendered
   is usually defined as React components.
   -------------------------------------------------------- */

// render app content into "public/index.html/div#root"
ReactDOM.render(<App />, document.getElementById('root'))

CodeSandbox

Hello React