> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/react/hello.md).

# Hello React❗️

{% tabs %}
{% tab title="📗 參考" %}

* GitHub ⟩ [create-react-app](https://github.com/facebook/create-react-app)
  {% endtab %}

{% tab title="🛠 工具" %}

* GitHub ⟩ [create-react-app](https://github.com/facebook/create-react-app)
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
⭐️ **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** 
  {% endhint %}

{% tabs %}
{% tab title="App.js" %}

```javascript
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
```

{% endtab %}

{% tab title="index.js" %}

```javascript
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'))
```

{% endtab %}

{% tab title="CodeSandbox" %}
{% embed url="<https://codesandbox.io/embed/hello-react-lozpj?expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark>" %}
Hello React
{% endembed %}
{% endtab %}
{% endtabs %}