Course 2

導讀概念 / 導讀目的

瞭解 React 中的重要基礎：Function Component、Prop、State
建立全新的 React 應用程式
實作完成 Todo List 將瞭解使用 Hooks API (useState、useEffect、useRef)、React with CSS

導讀內容 - React 新手入門

Hello React (opens in a new tab)

As its official tagline states, React is a library for building user interfaces.

To build for the web, developers use React in tandem with ReactDOM. React and ReactDOM are often discussed in the same spaces as — and utilized to solve the same problems as — other true web development frameworks. When we refer to React as a "framework", we're working with that colloquial understanding.

React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.

How does React use JavaScript? (opens in a new tab)

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX (opens in a new tab) syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:

const heading = <h1>Mozilla Developer Network</h1>

This heading constant is known as a JSX expression. React can use it to render that <h1> (opens in a new tab) tag in our app.

Suppose we wanted to wrap our heading in a <header> (opens in a new tab) tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
)

Setting up your first React app (opens in a new tab)

Create React App (opens in a new tab) is a comfortable environment for learning React, and is the best way to start building a new single-page (opens in a new tab) application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 (opens in a new tab) on your machine. To create a project, run:

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

The `App` component (opens in a new tab)

After the imports, we have a function named App. Whereas most of the JavaScript community prefers camel-case names like helloWorld, React components use pascal-case variable names, like HelloWorld, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the App function to app, your browser would show you an error.

Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> (opens in a new tab) tag has a className attribute. This is the same as the class (opens in a new tab) attribute in HTML, but because JSX is JavaScript, we can't use the word class — it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.

Summary (opens in a new tab)

In React:

Components can import modules they need and must export themselves at the bottom of their files.
Component functions are named with PascalCase.
You can read JSX variables by putting them between curly braces, like {so}.
Some JSX attributes are different than HTML attributes so that they don't conflict with JavaScript reserved words. For example, class in HTML translates to className in JSX. Note that multi-word attributes are camel-cased.
Props are written just like attributes inside component calls and are passed into components.

導讀內容 - 用 React 做一個待辦清單 Todo List

參考

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Course 1 Course 3