30 Days Of React
1.0.0
今後のコーディングブートキャンプに参加して、アサベネと一緒に学びます
著者：Asabeneh Yetayeh
2020年10月
1日目>>
| ＃ 日 | トピック |
|---|---|
| 00 | 導入 レポの使用方法 要件 設定 |
| 01 | javascript refresher |
| 02 | 始めることは反応します |
| 03 | セットアップ |
| 04 | コンポーネント |
| 05 | 小道具 |
| 06 | リスト、マップ、キー |
| 07 | クラスコンポーネント |
| 08 | 状態 |
| 09 | 条件付きレンダリング |
| 10 | プロジェクトフォルダー構造を反応します |
| 11 | イベント |
| 12 | フォーム |
| 13 | 制御されていないコンポーネントと制御されていないコンポーネント |
| 14 | コンポーネントライフサイクル |
| 15 | サードパーティパッケージ |
| 16 | 高次コンポーネント |
| 17 | 反応ルーター |
| 18 | フェッチとaxios |
| 19 | プロジェクト |
| 20 | プロジェクト |
| 21 | フック |
| 22 | フックを使用したフォーム |
| 23 | フックを使用してデータを取得します |
| 24 | フックを使用したプロジェクト |
| 25 | カスタムフック |
| 26 | コンテクスト |
| 27 | ref |
| 28 | プロジェクト |
| 29 | 探検する |
| 30 | 結論 |
???ハッピーコーディング？
30日間のReactプログラミングチャレンジに参加することを決めたことをおめでとうございます。この課題では、Reactアプリケーションの開発に使用する必要があるすべてを学びます。チャレンジの終わりには、30日間の反応プログラミングチャレンジ完了証明書が取得されます。助けが必要な場合、または他の人を支援したい場合は、Telegram Groupに参加できます。
30DaysofReact Challengeは、初心者とAdvanced JavaScriptおよびReact Developersの両方のためのガイドです。 30日間のReactへようこそ。 ReactはJavaScriptライブラリです。私はReactの使用と教えることを楽しんでいます。あなたもそうすることを願っています。このステップバイステップ30 Days React Challengeでは、最も人気のあるユーザーインターフェイスJavaScriptライブラリの1つであるReactを学びます。 ReactはJavaScriptができるすべてを行うことができます。 Reactを使用して、Webサイトにインタラクティブ性を追加したり、モバイルアプリ、デスクトップアプリケーション、ゲームを開発したりできます。今後30日間でかなり多くのことを学ぶと思います。プログラミングと問題解決のスキルも大幅に向上するでしょう。
会話の英語と少ない専門用語を使用して、この課題を書きます。コンテンツは継続的に更新されます。タイプミスや文法の間違いを見つけた場合、私はそれを公開する前に証明を読んでいないので驚かないでください。英語やいくつかの小さな間違いの代わりに、チャレンジの主なメッセージに焦点を合わせることをお勧めします。あなたが私に改善のためのプルのリクエストを送ってくれて、あなたがプルリクエストを送信する前に最初にマスターからプルすることを忘れないでください。このチャレンジで使用した画像のほとんどは、30daysofjavascriptチャレンジから来ました。したがって、ファイル名とフォルダーの名前を変更する必要がある場合があります。配列、ループ、機能、オブジェクト、機能的なプログラミング、破壊と広がり、クラスが得意な場合は、チャレンジに適切に従うことができます。それ以外の場合は、30daysofjavascriptを確認することを強くお勧めします。
このコースに飛び込む前に、30日間のReactのレビューを確認できます。
この課題は読みやすく、会話の英語で書かれ、魅力的で、やる気があり、同時に非常に厳しいです。この課題を終えるために多くの時間を割り当てる必要があります。あなたが視覚学習者なら、Washera YouTubeチャンネルでビデオレッスンを受けることができます。チャンネルを購読し、コメントし、YouTubeで質問し、積極的になると、著者は最終的にあなたに気付きます。
著者は、この課題についてのあなたの意見を聞き、30Daysofjavascriptの課題についてのあなたの考えを共有するのが好きです。このリンクには証言を残すことができます
今後のコーディングブートキャンプに参加して、アサベネと一緒に学びます
課題と仲良くするには、次のことをする必要があります。
この作業をサポートし、レポをフォークするためにこのリポジトリを主演して、自分のコピーを作成します。
常にフォークコピーから直接作業する必要があります。
# 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をインストールします
ダブルクリックとインストールをダウンロードした後
デバイス端末またはコマンドプロンプトを開くことにより、ローカルマシンにノードがインストールされているかどうかを確認できます。
asabeneh $ node -v
v12.14.0このチュートリアルを作成するとき、私はノードバージョン12.14.0を使用していましたが、ダウンロードにはnode.jsの推奨バージョンは12.17.0です。
そこには多くのブラウザがあります。ただし、Google Chromeを強くお勧めします。
まだ持っていない場合は、Google Chromeをインストールしてください。ブラウザコンソールに小さなJavaScriptコードを記述できますが、ブラウザコンソールを使用してアプリケーションを開発することはできません。
ブラウザの右上隅にある3つのドットをクリックして、より多くのツールを選択するか、開発者ツールを選択するか、キーボードショートカットを使用して、Google 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最初のJavaScriptコードを記述するために、組み込み関数console.log（）を使用しました。入力データとして引数を渡し、関数に出力が表示されます。 console.log（）関数の入力データまたは引数として「hello、world」を渡しました。
console . log ( 'Hello, World!' ) 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' )上記のスニペットコードからわかるように、 console.log（）は複数の引数を取得できます。コードで何が起こっているのかを確認するために多くのconsole.log（）プリントを使用することをお勧めします。ブラウザコンソールを開いたままにして、あなたの生活を楽にします。
コードにコメントを追加します。コードをより読みやすくし、コードに発言を残すためには、コメントは非常に重要です。 javascriptはcode.in javascriptのコメント部分を実行しません。javascriptの//から始まるテキスト行はコメントであり、この / * * /のように囲まれたものもコメントです。
例：シングルラインコメント
//これは最初のコメントです
//これは2番目のコメントです
//私は単一の行のコメントです
例：マルチラインコメント
/*これはマルチラインコメントです
マルチラインコメントは複数の行を取得できます
JavaScriptはWebの言語です
*/
プログラミング言語は、人間の言語に似ています。英語または他の多くの言語は、意味のあるメッセージを伝えるために、単語、フレーズ、文、複合文などを使用します。構文の英語の意味は、言語でよく形成された文を作成するための単語とフレーズの配置です。構文の技術的な定義は、コンピューター言語のステートメントの構造です。プログラミング言語には構文があります。 JavaScriptはプログラミング言語であり、他のプログラミング言語と同様に独自の構文があります。 JavaScriptが理解している構文を書かないと、さまざまなタイプのエラーが発生します。後でさまざまな種類のJavaScriptエラーを検討します。とりあえず、構文エラーを見てみましょう。
私は意図的な間違いを犯しました。その結果、コンソールは構文エラーを上げます。実際、構文は非常に有益です。それはどのようなタイプの間違いがなされたかを知らせます。エラーフィードバックガイドラインを読み取ることで、構文を修正して問題を修正できます。プログラムからエラーを識別および削除するプロセスは、デバッグと呼ばれます。エラーを修正しましょう。
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )これまでのところ、 Console.log（）を使用してテキストを表示する方法を見ました。 console.log（）を使用してテキストまたは文字列を印刷している場合、テキストは単一の引用符、二重引用符、またはバックティック引用符の内部にある必要があります。例：
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) 次に、数字データ型のGoogle Chromeコンソールで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 Challengeでは、Visual Studioコードを使用します。
Visual Studioコードは、非常に人気のあるオープンソーステキストエディターです。 Visual Studioコードをダウンロードすることをお勧めしますが、他の編集者に賛成している場合は、お気軽にご協力ください。
Visual Studioコードをインストールした場合は、使用を開始します。
アイコンをダブルクリックして、ビジュアルスタジオコードを開きます。開くと、この種のインターフェイスが表示されます。ラベル付きアイコンと対話してみてください。
おめでとう！ Reactを開始するために必要なセットアップを完了しましたが、Reactに飛び込む前にJavaScriptのリフレッシャーを実行しましょう。 JavaScriptに非常に満足している場合は、1日目JavaScript Refresherをスキップできます。 JavaScriptのリフレッシャーセクションは膨大であり、1日以上かかる場合があります。私の経験から、人々は通常反応に巻き込まれます。なぜなら、彼らのJavaScriptの知識は非常に浅いため、そのギャップを埋めるために、Reactで使用できる必要なすべてのJavaScript機能はJavaScriptのリフレッシャーセクションでカバーされています。多くのエクササイズがありますが、それらを解決する必要はありません。 JavaScriptをスキップして直接反応する場合は、ここをクリックしてください。
？おめでとう ！ ？
1日目>>
