React 入門サンプルの学習メモ 1. Hello World

ブロガー紹介: Da Shuangge、B ステーションの小さな UP オーナー、ライブプログラミング + 赤警察 3 、Python の 1 対 1 講師。

このブログは、Microsoft のフロントエンドブートキャンプの 1 日目における React の学習メモです。

メモディレクトリ: React Getting Started Example Study Notes ディレクトリ
このブログには対応するビデオバージョンがあります。詳細については、ディレクトリを参照してください。

0 準備

学生に Git の操作に慣れてもらうために、Github 上のプロジェクトを使用してメモを管理することにしました。
プロジェクトのさまざまな段階は、さまざまな git ブランチに保存されます。

インストールする必要があります:

npm
ノード
git (そしてプルとプッシュができるように github を設定します)
vscode (または、崇高なテキストやアトムなどのコードを書くのに便利な他の IDE)

1 github プロジェクトを作成する

github で新しいプロジェクトを作成します。
プロジェクトに名前を付けます react todoapp study
対応する部分の一貫性を保つだけで、別の名前を付けることもできます。

チェックAdd a ReadMe file
チェックAdd .gitignore、具体的にはノードを選択します
チェックしてChoose a license、具体的にはクリエイティブコモンズを選択します…

次に、新しいプロジェクトを作成し、Create repository

2 プロジェクトをローカルにプルします

次に、プロジェクトをローカルにプルします。
具体的な操作は github プロジェクトページにあります

緑色の「コード」ボタンをクリックします
切り替えるSSH
以下に示すように、入力ボックスの右側にあるコピーアイコンをクリックします

プロジェクトの git アドレスをクリップボードにコピーできます

次に、作成するプロジェクトの親フォルダーでターミナルまたはコマンドラインウィンドウを開きます。

その中に次のコマンドを入力します

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 反応をインストールする

ターミナルを開きます
次のコマンドを入力します

npx create-react-app .

注:
新しい反応プロジェクトをローカルに作成するコマンドは元々npx create-react-app app_name
ありますが、このコマンドは新しい反応プロジェクトを作成しますapp_name フォルダーを反応プロジェクトフォルダーとして使用します。
ここでは、現在のプロジェクトフォルダーを反応プロジェクトフォルダーとして使用する必要があります。
したがって、を使用する必要があります。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

プロジェクトを実行できます
、ブラウザが Web ページを開いているのが確認できますlocalhost:3000。その結果は次のようになります
画像の説明を追加してください

プロジェクトの実行後、ターミナルでプロジェクトを閉じる場合は
、Ctrl + C を押して Enter キーを押します

最後に変更をgithubに送信します