React 入门实例学习笔记一、 Hello World

博主介绍：大爽歌, b站小UP主，直播编程+红警三，python1对1辅导老师。

本博客为microsoft的的Frontend Bootcamp 的day1中 react 的学习笔记

笔记目录: React 入门实例学习笔记目录
本博客有对应视频版本，具体见目录。

0 准备工作

为了让学生熟悉git操作，这里选择在github上使用项目来管理该笔记。
项目的不同阶段都保存到不同的git分支中。

需要安装好：

npm
node
git (且配置好github，以能够和拉取(pull)和推送(push))
vscode (或者其他IDE，方便写代码，比如sublime text或atom)

1 github 创建项目

在github中新建项目。
项目起名为react todoapp study
也可以起别的名字，后面对应部分保持一致即可。

勾选Add a ReadMe file
勾选Add .gitignore, 具体选择Node
勾选Choose a license, 具体选择Creative commons…

然后新建项目，即点击Create repository

2 拉取项目到本地

然后拉取项目到本地。
具体操作为在github的项目页面

点击绿色的Code按钮
切换到SSH
点击下面输入框右侧的复制图标
如下图所示

即可将项目的git地址复制到剪贴板

再在想要创建项目的上级文件夹处打开终端或命令行窗口。

在其中输入如下命令

扫描二维码关注公众号，回复： 17257179 查看本文章

git clone git_ssh

其中git_ssh为刚才复制的项目的git地址
我这里的是[email protected]:BigShuang/react-todoapp-study.git
所以要运行的命令是

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

再在vs code中打开该项目。（或直接将该项目文件夹拖拽到vs code)

3 安装react

打开终端
输入如下命令

npx create-react-app .

说明：
本地新建react项目的命令本来为npx create-react-app app_name
但该命令会创建一个新的app_name文件夹作为react项目文件夹。
这里我们要使用当前项目文件夹啊及作为react项目文件夹
所以要使用npx create-react-app .

输入命令后，耐心等待安装即可。
安装成功之后
项目路径应该如下

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 写一个Hello world

删除public文件夹下所有文件
删除src文件夹下所有文件

注意：不要删除public文件夹和src文件夹，只删除文件夹内的文件。

在public文件夹下，新建index.html如下

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

在src文件夹下，新建index.js如下

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

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

然后打开终端，输入如下命令

npm start

即可运行项目
然后可以看到浏览器打开网页localhost:3000，效果如下
请添加图片描述

运行完项目后，想要在终端关闭项目
可以按Ctrl + C并回车

最后提交改动到github