React Getting Started Example Study Notes 1. Hello World

Blogger introduction: Da Shuangge, B station’s small UP owner, Live programming + red Police three, python 1 to 1 tutor.

This blog is the study notes of react in day1 of microsoft'sFrontend Bootcamp

Notes Directory: React Getting Started Example Study Notes Directory
This blog has a corresponding video version, see the directory for details.

0 preparation

In order to familiarize students with git operations, we choose to use projects on github to manage the notes.
Different stages of the project are saved to different git branches.

Need to be installed:

npm
node
git (and configure github to be able to pull and push)
vscode (or other IDE, convenient for writing code, such as sublime text or atom)

1 github create project

Create a new project in github.
Name the project react todoapp study
You can also give it another name, just keep the corresponding parts consistent.

CheckAdd a ReadMe file
CheckAdd .gitignore, specifically select Node
CheckChoose a license, specifically select Creative commons…

Then create a new project, clickCreate repository

2 Pull the project to local

Then pull the project to the local.
The specific operation is on the github project page

Click the green Code button
switch toSSH
Click the copy icon on the right side of the input box below
as shown below

You can copy the project's git address to the clipboard

Then open a terminal or command line window in the parent folder of the project you want to create.

Enter the following command in it

git clone git_ssh

wheregit_ssh is the git address of the project just copied
What I have here is[email protected]:BigShuang/react-todoapp-study.git
so the command to be run is Yes

git clone [email protected]:BigShuang/react-todoapp-study.git

Then open the project in vs code. (Or directly drag the project folder to vs code)

3 Install react

Open the terminal
Enter the following command

npx create-react-app .

Note:
The command to create a new react project locally is originallynpx create-react-app app_name
but this command will create a new oneapp_name folder as the react project folder.
Here we need to use the current project folder as the react project folder
So we need to use npx create-react-app .

After entering the command, wait patiently for the installation.
After successful installation
the project path should be as follows

react-study-notes
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

4 Write a Hello world

DeletepublicAll files in the folder
DeletesrcAll files in the folder

Note: Do not delete the public folder and src folder, only delete the files in the folder.

currentlypublictext article, new constructionindex.htmlas below

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

currentlysrctext article, new constructionindex.jsas below

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

Then open the terminal and enter the following command

npm start

You can run the project
and then you can see the browser opening the webpagelocalhost:3000, the effect is as follows
Please add image description

After running the project, if you want to close the project in the terminal
, you can press Ctrl + C and press Enter

Finally submit the changes to github