Hello React❗️
GitHub ⟩ create-react-app
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
Last updated
Was this helpful?