React官網零基礎學習筆記（1）-本地環境搭建

官網原文：

Setup for the Tutorial

There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer.

 

Setup Option 1: Write Code in the Browser

This is the quickest way to get started!

First, open this Starter Code in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial.

You can now skip the second setup option, and go to the Overview section to get an overview of React.

 

Setup Option 2: Local Development Environment

This is completely optional and not required for this tutorial!

 

Optional: Instructions for following along locally using your preferred text editor

選擇option2：

Optional: Instructions for following along locally using your preferred text editor

This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow:

1.Make sure you have a recent version of Node.js installed.

2.Follow the installation instructions for Create React App to make a new project.

npx create-react-app my-app

3.Delete all files in the src/ folder of the new project

Note: don’t delete the entire src folder, just the original source files inside it.. We’ll replace the default source files with examples for this project in the next step.

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

4.Add a file named index.css in the src/ folder with this CSS code.

5.Add a file named index.js in the src/ folder with this JS code.

6.Add these three lines to the top of index.js in the src/ folder:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.

We recommend following these instructions to configure syntax highlighting for your editor.