30-Days-Of-React - 30 Days of Reactチャレンジは、30日でReactを学ぶためのステップバイステップガイドです。HTML、CSS、およびJavaScriptの知識が必要です。Reactを開始する前に、JavaScriptに慣れている必要があります。JavaScriptに慣れていない場合は、30DaysOfJavaScriptを確認してください。これは、JSの30日間の続きです。このチャレンジには100以上かかるかもしれません…

(30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take more than 100 days, follow your own pace. )

Created at: 2020-09-29 21:38:54
Language: JavaScript

30日間の反応

Twitterフォロー

著者:アサベネ・イエタイエ
2020年10月

1日目>>

# 日 トピック
00 はじめにリポジトリ要件設定
の使用方法

01 JavaScriptリフレッシャー
02 はじめにReact
03 セットアップ
04 コンポーネント
05 小道具
06 リスト、マップ、キー
07 クラスコンポーネント
08
09 条件付きレンダリング
10 Reactプロジェクトのフォルダー構造
11 イベント
12 フォーム
13 制御および非制御コンポーネント
14 コンポーネントのライフサイクル
15 サードパーティパッケージ
16 高次コンポーネント
17 Reactルーター
18 フェッチ対Axios
19 プロジェクト
20 プロジェクト
21 フック
22 フックを使用したフォーム
23 フックを使用したデータの取得
24 フックを使用したプロジェクト
25 カスタムフック
26 環境
27 参照
28 事業
29 探検
30 結論

🧡🧡🧡ハッピーコーディング🧡🧡🧡

より多くの教材を作成するために著者を サポートする
Paypalのロゴ


序章

30日間のReactプログラミングチャレンジに参加することを決定しました。おめでとうございます。このチャレンジでは、Reactアプリケーションを開発するために使用する必要があるすべてを学びます。チャレンジの最後に、30DaysOfReactプログラミングチャレンジ完了証明書を取得します。ヘルプが必要な場合、または他の人を助けたい場合は、電報グループに参加できます。

30DaysOfReactチャレンジは、初心者と高度なJavaScriptおよびReact開発者の両方を対象としたガイドです。30 DaysOfReactへようこそ。ReactはJavaScriptライブラリです。私はReactの使用と指導を楽しんでいますが、あなたもそうしてくれることを願っています。このステップバイステップの30日間のReactチャレンジでは、最も人気のあるユーザーインターフェイスJavaScriptライブラリの1つであるReactについて学習します。Reactは、JavaScriptが実行できるすべてのことを実行できます。Reactを使用して、Webサイトに双方向性を追加したり、モバイルアプリ、デスクトップアプリケーション、ゲームを開発したりできます。今後30日間でかなり多くのことを学び、プログラミングと問題解決のスキルも大幅に向上すると思います。

このチャレンジを書くために、会話型の英語と専門用語を減らします。コンテンツは継続的に更新されます。タイプミスや文法の間違いを見つけても、公開する前に校正を行わないので驚かないでください。英語やいくつかの小さな間違いではなく、チャレンジのメインメッセージに焦点を当てることをお勧めします。改善のためにプルリクエストを送っていただければ幸いです。プルリクエストを送信する前に、マスターからプルすることを忘れないでください。このチャレンジで使用した画像のほとんどは30DaysOfJavaScriptチャレンジからのものであるため、ファイル名とフォルダーの名前を30DaysOfReactに変更する必要がある場合があります。配列、ループ、関数、オブジェクト、関数型プログラミング、分解と拡散、およびクラスが得意な場合は、課題に適切に従うことができます。さもないと、30DaysOfJavaScript

このコースに飛び込む前に、30 DaysOfReactのレビューを確認してください。

要件

課題を解決するには、次のものが必要です。

  1. 動機
  2. コンピュータ
  3. インターネット
  4. ブラウザ
  5. コードエディタ
  6. HTML、CSS、JavaScriptの中級レベルのスキル

リポジトリの使用方法

このレポをスターアンドフォーク

この作業をサポートするためにこのリポジトリにスターを付け、作業するための独自のコピーを作成するためにリポジトリをフォークします。

フォークのクローンを作成します

常に、フォークしたコピーから直接作業する必要があります。

# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-React

新しいブランチを作成する

毎日のエクササイズを完了するために、エクササイズフォルダまたはその他の変更を格納するための別のブランチを作成することをお勧めします。これにより、マスターブランチが常にクリーンに保たれます。つまり、マスターは常に元のマスターと同様になります。

git checkout -b exercise-solutions # `-b` creates the branch if it does not exist

構造エクササイズソリューション

新しいブランチでは、ファイル/フォルダーを使用して、毎日の演習に対するソリューションを構成できます。

mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a file

エクササイズソリューションをコミットする

ソリューションをフォークにコミットする

git add solutions/day-01/level1.js
git commit -m "chore: exercise level1 complete"
git push origin exercise-solutions # branch `exercise-solutions` was created earlier

フォークを毎日更新する

このリポジトリは、月を通して毎日更新されます。新しい日のコンテンツが利用可能になったら、以下の手順でフォークされたコピーを更新できます。

# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin master

更新はマスターブランチにのみ適用されることに注意してください。他のブランチを更新する場合は、ブランチ名を使用して手順6〜7を繰り返します。

exercise-solutions
ブランチについては、以下のスニペットを参照してください

git merge upstream/master exercise-solutions
git push origin exercise-solutions

設定

あなたには、開発者、コンピューター、インターネットになりたいというモチベーションと強い願望があると思います。基本から中級レベルのHTML、CSS、JSに加えて。あなたがそれらを持っているなら、あなたは始めるためのすべてを持っています。

Node.jsをインストールします

今はnode.jsは必要ないかもしれませんが、後で必要になるかもしれません。node.jsをインストールします。

ノードのダウンロード

ダブルクリックしてインストールした後

ノードをインストールします

デバイスターミナルまたはコマンドプロンプトを開くことで、ノードがローカルマシンにインストールされているかどうかを確認できます。

asabeneh $ node -v
v12.14.0

このチュートリアルを作成するとき、私はノードバージョン12.14.0を使用していましたが、ダウンロードに推奨されるnode.jsのバージョンは12.17.0です。

ブラウザ

そこには多くのブラウザがあります。ただし、GoogleChromeを強くお勧めします。

GoogleChromeのインストール

まだグーグルクロームを持っていない場合はインストールしてください。ブラウザコンソールで小さなJavaScriptコードを記述できますが、アプリケーションの開発にブラウザコンソールを使用することはありません。

グーグルクローム

GoogleChromeコンソールを開く

ブラウザの右上隅にある3つのドットをクリックするか、[その他のツール]-> [開発者ツール]を選択するか、キーボードショートカットを使用して、GoogleChromeコンソールを開くことができます。私はショートカットを使うのが好きです。

オープニングクローム

キーボードショートカットを使用してChromeコンソールを開くには。JavaScriptとReactの開発者としてショートカットを知っておくと、ブラウザコンソールに多くの時間を費やし、開発中にそれを開くのに怠惰になることはありません。

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

コンソールを開く

Google Chromeコンソールを開いたら、マークされたボタンを調べてみてください。ほとんどの時間をコンソールで過ごします。コンソールは、JavaScriptコードを配置する場所です。Google Console V8エンジンは、JavaScriptコードをマシンコードに変更します。GoogleChromeコンソールでJavaScriptコードを書いてみましょう。

コンソールにコードを書く

ブラウザコンソールでコードを書く

Googleコンソールまたは任意のブラウザコンソールで任意のJavaScriptコードを記述できます。ただし、この課題では、GoogleChromeコンソールのみに焦点を当てています。以下を使用してコンソールを開きます。

Mac
Command+Option+I

Windows:
Ctl+Shift+I
Console.log

最初のJavaScriptコードを作成するために、組み込み関数console.log()を使用しました。入力データとして引数を渡し、関数は出力を表示します。console.log()関数の入力データまたは引数として「Hello、World」を渡しました。

console.log('Hello, World!')
複数の引数を持つConsole.log

console.log()関数は、コンマで区切られた複数のパラメーターを取ることができます。構文は次のようになります。console.log(param1、param2、param3)

コンソールログの複数の引数

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')

As you can see from the snippet code above, console.log() can take multiple arguments. It is recommended to use as many console.log() prints to check what is happening in your code but don't keep all console.log() tests on your code forever. Make your life easy by keeping the browser console open.

Comments

We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code.In JavaScript, any text line starting with // in JavaScript is a comment, and anything enclosed like this /* */ is also a comment.

Example: Single Line Comment

// This is the first comment
// This is the second comment
// I am a single line comment

Example: Multiline Comment

/* This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/

Syntax

Programming languages are similar to human languages. English or many other language uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is the arrangement of words and phrases to create well-formed sentences in a language. The technical definition of syntax is the structure of statements in a computer language. Programing languages have syntax. JavaScript is a programming language and like other programming languages it has its own syntax. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.

エラー

I made a deliberate mistake. As a result, the console raises syntax errors. Actually, the syntax is very informative. It informs what type of mistake was made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors:

console.log('Hello, World!')
console.log('Hello, World!')

So far, we saw how to display text using the console.log(). If we are printing text or string using console.log(), the text has to be inside the single quotes, double quotes, or a backtick quotes. Example:

console.log('Hello, World!')
console.log('Hello, World!')
console.log(`Hello, World!`)

Arithmetics

それでは、数値データ型のgoogle chrome consoleでconsole.log()を使用してJavaScriptコードを書く練習をしてみましょう。テキストに加えて、JavaScriptを使用して数学的な計算を行うこともできます。次の簡単な計算をしてみましょう。コンソールは、 console.log()関数なしで直接引数を取ることができます。ただし、この課題のほとんどは、関数の使用が必須となるテキストエディターで行われるため、この概要に含まれています。コンソールの指示で直接遊ぶことができます。

算術

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

コードエディタ

ブラウザコンソールでコードを書くことはできますが、大規模なプロジェクトではできません。実際の作業環境では、開発者はさまざまなコードエディタを使用してコードを記述します。この30日間のJavaScriptチャレンジでは、VisualStudioCodeを使用します。

VisualStudioCodeのインストール

Visual Studio Codeは、非常に人気のあるオープンソースのテキストエディターです。Visual Studio Codeをダウンロードすることをお勧めしますが、他のエディターを使用する場合は、お持ちのエディターを自由にフォローしてください。

Vscode

Visual Studio Codeをインストールした場合は、使用を開始しましょう。

VisualStudioCodeの使用方法

アイコンをダブルクリックして、VisualStudioCodeを開きます。それを開くと、この種のインターフェースが表示されます。ラベルの付いたアイコンを操作してみてください。

Vscode ui

Vscodeaddプロジェクト

Vscodeオープンプロジェクト

スクリプトファイル

LiveServerのインストール

実行中のスクリプト

コーディング実行

おめでとう!Reactの使用を開始するために必要なセットアップが完了しましたが、Reactに飛び込む前に、JavaScriptの復習を行いましょう。JavaScriptに非常に慣れている場合は、1日目のJavaScriptの復習をスキップできます。JavaScriptの復習セクションは広大で、1日以上かかる場合があります。私の経験から、JavaScriptの知識が非常に浅いため、人々は通常Reactで立ち往生しています。したがって、そのギャップを埋めるために、Reactで使用できるすべての必要なJavaScript機能がJavaScriptリフレッシャーセクションでカバーされています。多くの演習がありますが、それらを解決する必要はありません。JavaScriptをスキップして、Reactに直接ジャンプする場合は、ここをクリックしてください。

🎉おめでとう !🎉

1日目>>