30日間の反応

_{著者: アサベネ・イェタエ
2020年10月}

1日目>>

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

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

• 紹介
• 必要条件
• リポジトリの使用方法
  • このリポジトリにスターを付けてフォークする
  • フォークのクローンを作成する
  • 新しいブランチを作成する
  • 構造演習ソリューション
  • コミットエクササイズソリューション
  • フォークを毎日更新する
• セットアップ
  • ノードをインストールします.js
  • ブラウザー
    • グーグルクロームのインストール
    • グーグルクロームコンソールを開く
    • ブラウザコンソールでのコードの記述
      • コンソール.log
      • コンソール.log複数の引数を使用
      • コメント
      • 構文
    • 算数
  • コードエディタ
    • Visual Studio Code のインストール
    • Visual Studio Code の使用方法

紹介

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

30DaysOfReactチャレンジは、初心者と上級のJavaScriptおよびReact開発者の両方のためのガイドです。30日間の反応へようこそ。React は JavaScript ライブラリです。私はReactの使用と指導を楽しんでおり、あなたもそうしてくれることを願っています。 このステップバイステップの30日間のReactチャレンジでは、最も人気のあるユーザーインターフェイスJavaScriptライブラリの1つであるReactを学びます。 React は JavaScript ができるすべてのことを行うことができます。Reactを使用して、Webサイトにインタラクティブ機能を追加したり、モバイルアプリ、デスクトップアプリケーション、ゲームを開発したりできます。 今後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

現時点ではノード.jsは必要ないかもしれませんが、後で必要になる場合があります。ノード.jsをインストールします。

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

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

asabeneh $ node -v
v12.14.0

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

ブラウザー

そこには多くのブラウザがあります。ただし、グーグルクロームを強くお勧めします。

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

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

グーグルクロームコンソールを開く

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

キーボードショートカットを使用してChromeコンソールを開きます。JavaScriptおよびReact開発者としてショートカットを知っておくと、ブラウザコンソールに多くの時間を費やし、開発中にショートカットを開くのを怠惰にしないでください。

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

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

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

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

Mac
Command+Option+I

Windows:
Ctl+Shift+I

コンソール.log

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

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番目のコメントです // 私は単一行のコメント
です

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

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.

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.

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

Visual Studio Code の使用方法

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

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

🎉万丈！🎉

1日目>>