npx create-react-app moz-todo-react
此指令會建立一個名為moz-todo-react的資料夾目錄，並在其中做了幾件事：
安裝一些對 React 應用程式至關重要的 npm 套件。
編寫用來啟動 React 應用程式的腳本語言。
建立定義基本應用程式架構的文件和目錄結構。
如果你的電腦已有安裝 git 版控，則將該資料夾目錄初始化為 git 存儲庫。
如果你已有安裝 yarn 套件管理器，create-react-app默認將使用它而不是使用 npm。如果你已安裝 yarn 和 npm 兩個套件管理器並且堅持繼續使用 npm，當你要執行create-react-app指令時，你可以添加指令--use-npm

bash
npx create-react-app moz-todo-react --use-npm
create-react-app執行時會在你的終端機 terminal 顯示一些訊息；這是正常的！執行可能需要一小段時間，所以現在可能是暫時泡杯茶休息的好時機。
當這個過程完成後，cd切換進moz-todo-react資料夾目錄並執行指令npm start。這個藉由create-react-app安裝的腳本將會在本機伺服器(電腦)的localhost:3000啟動以提供服務，並在新瀏覽器分頁打開該應用程式。你的瀏覽器將顯示如下內容：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Edit <code>src/App.js</code> and save to reload.
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
      </header>
export default App;
The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.

import React from "react";
import logo from "./logo.svg";
import "./App.css";
The first statement imports the React library itself. Because React turns the JSX we write into React.createElement(), all React components must import the React module. If you skip this step, your application will produce an error.
The second statement imports a logo from './logo.svg'. Note the use of ./ at the beginning of the path, and the .svg extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the logo.svg file lives in our source directory.
We don't write a path or extension when importing the React module — this is not a local file; instead, it is listed as a dependency in our package.json file. Be careful of this distinction as you work through this lesson!
The third statement imports the CSS related to our App component. Note that there is no variable name and no from directive. This particular import syntax is not native to JavaScript module syntax — it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Edit <code>src/App.js</code> and save to reload.
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
      </header>
The App function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.
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> tag has a className attribute. This is the same as the class 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.
Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.
Your App component should now look like this:
js
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, World!</p>
      </header>

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root"),
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
As with App.js, the file starts by importing all the JS modules and other assets it needs to run. src/index.css holds global styles that are applied to our whole app. We can also see our App component imported here; it is made available for import thanks to the export statement at the bottom of App.js.
Line 7 calls React's ReactDOM.render() function with two arguments:
The component we want to render, <App /> in this case.
The DOM element inside which we want the component to be rendered, in this case the element with an ID of root. If you look inside public/index.html, you'll see that this is a <div> element just inside the <body>.
All of this tells React that we want to render our React application with the App component as the root, or first component.
In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.

Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they're not in scope for this article. You can delete line 5, as well as most of the code below it.
Your final index.js file should look like this:
js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

<img src={logo} className="App-logo" alt="logo" />
在這裡，<img />標籤的src屬性值在花括號（即大括號{與}）中，這就是 JSX 識別變數的方式。React 將會監聽{logo}，它知道你指的是我們在應用程式第 2 行引入的 logo，然後檢索 logo 檔案並呈現它。
讓我們嘗試創造一個自己的變數。在App的 return 語句之前，加入const subject = 'React';。你的App元件現在應該看起來是這樣：
js
function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, World!</p>
      </header>
至第 8 行改成我們的subject變數而不是單字「world」，像這樣：
js
function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, {subject}!</p>
      </header>
當你存檔時，你的瀏覽器應該顯示「Hello, React!」而不是「Hello, world!」
變數很方便，但我們剛剛設置的變數並沒有充分利用 React 的特性。接下來該是 props 出場了。

ReactDOM.render(<App subject="Clarice" />, document.getElementById("root"));
Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):
js
function App() {
  const subject = "React";
  return (
    // return statement
Change the signature of the App function so that it accepts props as a parameter, and delete the subject const. Just like any other function parameter, you can put props in a console.log() to print it to your browser's console. Go ahead and do that before the return statement, like so:
js
function App(props) {
  console.log(props);
  return (
    // return statement
保存文件並檢查瀏覽器的 JavaScript 控制台 console。你應該會看到這樣的記錄：
js
Object { subject: "Clarice" }
物件屬性subject與我們添加到到<App />元件調用的 propsubject相對應，並且字串Clarice與它的值對應。React 的元件 props 總是以這種方式傳遞到物件中。
現在subject是我們的 props 之一了，讓我們在App.js中使用它。用props.subject代替原本的React字串，如果你想的話，也可以刪除console.log()，你的程式碼看起來會是這樣：
js
function App(props) {
  const subject = props.subject;
  return (
    // return statement
當你保存時, 應用程式現在應該會向你打招呼「Hello, Clarice!」。如果你返回index.js檔案內修改subject的值並存檔，你的字串將發生變化。