30-Days-Of-React - 30日間の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日間

ツイッターをフォロー

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

1日目 >>

# 日 トピック
00 はじめ
に レポ
要件
設定の使用方法
01 JavaScript Refresher
02 はじめに 反応する
03 セットアップ
04 コンポーネント
05 小道具
06 リスト、マップ、キー
07 クラスコンポーネント
08 列国
09 条件付きレンダリング
10 反応プロジェクトのフォルダ構造
11 イベント
12 フォーム
13 制御コンポーネントと非制御コンポーネント
14 コンポーネントのライフサイクル
15 サードパーティパッケージ
16 高次コンポーネント
17 リアクションルータ
18 フェッチと公理
19 プロジェクト
20 プロジェクト
21 フック
22 フックを使用したフォーム
23 フックを使用したデータの取得
24 フックを使用したプロジェクト
25 カスタムフック
26 文脈
27 参照
28 プロジェクト
29 探る
30 結論

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

著者がより多くの教材を作成するのをサポート
PayPalロゴ


紹介

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

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

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

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

必要条件

この課題に取り組むには、次のものが必要です。

  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 git@github.com: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 git@github.com: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です。あなたがそれらを持っているなら、あなたは始めるためのすべてを持っています。

ノードのインストール.js

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

ノードのダウンロード

ダウンロード後、ダブルクリックしてインストール

ノードのインストール

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

asabeneh $ node -v
v12.14.0

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

ブラウザー

そこには多くのブラウザがあります。しかし、私は強くGoogle Chromeをお勧めします。

グーグルクロームのインストール

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

グーグルクローム

Google Chrome Console を開く

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

クロムを開く

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

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

コンソールを開く

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

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

ブラウザコンソールでのコードの記述

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

Mac
Command+Option+I

Windows:
Ctl+Shift+I
コンソール.log

最初の JavaScript コードを記述するために、組み込み関数 console.log() を使用しました。引数を入力データとして渡し、関数は出力を表示します。コンソールの入力データまたは引数として 'Hello, World' を渡しました.log() 関数。

console.log('Hello, World!')
コンソール.log複数の引数を持つ

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

コンソールは複数の引数をログに記録します

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

上記のスニペットコードからわかるように、console.log()は複数の引数を取ることができます。コードで何が起こっているかをチェックするために、できるだけ多くのconsole.log()印刷を使用することをお勧めしますが、コード上のすべてのconsole.log()テストを永久に保持しないでください。ブラウザコンソールを開いたままにしておくことで、あなたの人生を楽にします。

コメント

コードにコメントを追加します。コメントは、コードを読みやすくし、コードに注釈を残すために非常に重要です。JavaScript はコードのコメント部分を実行しません。JavaScript では、JavaScript の // で始まるテキスト行はすべてコメントであり、/* */ のように囲まれたものもコメントです。

例: 単一行コメント

これは最初のコメント
です // これは2番目のコメント
です // 私は1行のコメントです

例: 複数行コメント

/* 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.

Error

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

Now, let us practice more writing JavaScript codes using console.log() on google chrome console for number data types. In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations. The console can directly take arguments without the console.log() function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.

Arithmetic

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

Code Editor

We can write our codes on the browser console, but it won't do for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days JavaScript challenge, we will be using Visual Studio Code.

Installing Visual Studio Code

Visual studio code is a very popular open-source text editor. I would recommend to download Visual Studio Code, but if you are in favor of other editors, feel free to follow with what you have.

Vscode

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

ビジュアルスタジオコードの使い方

Visual Studio コードを開くには、そのアイコンをダブルクリックします。あなたがそれを開くとき、あなたはこの種のインターフェースを得るでしょう。ラベルの付いたアイコンと対話してみてください。

Vscode ui

Vscode プロジェクトの追加

Vscode オープン プロジェクト

スクリプトファイル

ライブサーバーのインストール

スクリプトの実行

コーディングの実行

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

🎉万丈!🎉

1日目 >>