modern js

現代のjavascriptと反応への道

このガイドの目的は、モダンなJavaScriptとReactライブラリを学ぶのに役立ついくつかの無料のRessources（記事、本、ビデオ？）のリストを提供することです。

ショ和このガイドは、JavaScriptやReactについて知っておくべきすべてをリストすることを意図したものではありません。私の経験と私が出会った人々に基づいて、あなたがこの世界にまったく新しいものであった場合、私は何が役立つかをリストしようとしました。あなたの好きなものがそこにリストされていない場合、それは私がそれを嫌うか、それを不承認にするという意味ではありません。たとえば、TypeScriptまたはGraphQLは素晴らしいですが、初心者としてそれを最初に学ぶことは必須ではないと思います。

1）現代のJavaScript？

すべてをカバーするチュートリアル：

• Web開発を学ぶと、HTMLとCSSも教えます。
• Eloquent JavaScriptは、JSおよび一般的なプログラミングの概念を学習するのに最適です。
• 現代のJavaScriptチュートリアルが現在どのように行われているか。基本から高度なトピックまで、単純だが詳細な説明。
• ES6を学ぶ（ECMAScript 2015）？しばらく前にJavaScriptを書いていて、最新の構文に追いつく場合。

私が気に入った記事やビデオ：

• Modern JavaScriptは、恐竜のために、NPM、Babel、Webpackなどの基本とその背後にある歴史を学ぶことを説明しました。
• JavaScriptの巻き上げを理解する別のプログラミング言語から来た場合、JSの変数を宣言する方法に不快感を感じるかもしれません。この記事は、気分が良くなるのに役立ちます！
• JavaScriptをデバッグしますか？ FirefoxまたはEdgeには独自のDevToolsもありますが、私は個人的にはコーディング時にChromeのものを使用することを好みます。
• JavaScriptの機能プログラミング？これらのビデオは、元Spotify JS開発者によって作成されています。彼は、約束、閉鎖、高次の機能などの重要な概念を教えます。それらのことは反応に不可欠です。
• 相続財産上の構成？学校では、オブジェクト指向プログラミングをたくさんしなければなりませんでした。このビデオは、なぜそれが必ずしも必要ではない理由を理解するのに役立ちました。

ドキュメント

たとえば、コードベースの特定のキーワードがわからない場合や、ネイティブ機能の使用方法を学びたい場合など、ドキュメントを検索する必要がある場合があります。もちろん、任意の検索エンジンまたはStackoverFlowを使用できますが、MDN Webドキュメントを使用することをお勧めします。

2）反応⚛️

• 反応とは：初心者向けの視覚的な紹介
• javascriptは反応を知る
• 公式のドキュメントは、反応を学ぶのに最適な場所です。
• 反応のための初心者のガイド？
• Reactサイトをパフォーマンスにするためのプログレッシブな反応のヒント。 Web.devには、そのような多くの記事もあります。
• バニラJavaScriptとReactを使用して、強力なWebアプリを構築するための学習パターンパターン。

フック？クラスコンポーネント

フックは非常に反応していますが、なぜ反応フックを反応させるのかを確認することをお勧めします。 ？ Reactの歴史や、現在フックを使用している理由について詳しく知るために。また、多くのコードベースに存在するため、クラスコンポーネントとコンポーネント間でロジックを共有するために使用されるいくつかのパターン（フック到着前）についても学びたいかもしれません。

• フックフロー図とクラスコンポーネントライフサイクルメソッド図と比較する
• 高次コンポーネント：Reactアプリケーション設計パターン
• 小道具をレンダリングします

国家管理およびその他の図書館

ある時点で、プロップを何度も渡すことを避けるために、あらゆる反応コンポーネントの何らかのグローバルな状態にアクセスできると思うかもしれません...人々はReduxまたはMobxまたはApolloまたはXSTATE、または[人気のあるライブラリ名を挿入]を使用してそれを達成するように言うかもしれませんが、それは過剰になります！ React React State Management Librariesを読むことと、素晴らしい概要を取得する方法を読むことをお勧めします。 2023年のReactライブラリは、このテーマなどにも取り組みます！

3）次は何ですか！？ ？

• 最新情報を入手して、React NewsletterとBYTES Newsletterで新しいことを発見してください。
• codeSandboxでブラウザでCreate-React-Appまたは直接対応する練習
• 生産準備完了アプリをビルド：vite、next.js、gatsby、expoを介してネイティブを反応します。

スタイリングはどうですか？ ？

いくつかの基本

• CSS Evergreen CSSコースを学び、Webスタイリングの専門知識を高めるために参照してください。
• 恐竜について説明した現代のCSS
• CSS-in-jsまたはcss-and-js
• スタイリングとCSS公式React Doc

あなたがあなたのスタイルを管理するために使用できるsomne​​ライブラリ：

• 追い風
• CSSモジュール
• バニラ抽出物
• 感情
• スタイルのコンポーネントは、「クラシック」CSSを書くのに慣れており、JavaScriptとミキシングすることで活用したい人にとっては、選択肢の間で最高だと思います。

設計システム

たぶん、あなたはただアプリを構築し、CSSとHTMLを書くのに多くの時間を費やすことを避けたいだけかもしれません。 Material-UI、Ant Design、Polarisなどのライブラリを使用することをお勧めします。独自の設計システムを構築したい場合は、アトミックデザインを読むことをお勧めします。

テストはどうですか？ ？

• しかし、本当に、JavaScriptテストとは何ですか？
• Reactテストライブラリのチュートリアルの使用方法Jestを理解し、React Testing Libraryを介して自動テストを作成する方法を学びました（ライブラリをテストする他のものがありますが、RTLは公式ドキュメントで推奨される素晴らしいものです）。
• Jest Mocks mockingを理解することは、依存関係を制御および検査できるオブジェクトに置き換えることにより、被験者を分離する手法です。
• なぜサイプレス？ ？エンドツーエンドのテストなどを書くライブラリ。

デフォルトで他のツール

• コードエディター：VSコード。
• オートコードのフォーマッタ：きれいな;
• リナー：eslint;
• コマンドの代わりにUIを介してGITを管理する：sourcetreeまたはvsコード。
• [アプリ：netlify]をビルドして展開します。
• 継続的な統合：Travis CI;
• ドメイン名を購入：Googleドメイン。

その他のライブラリはデフォルトです

• ルーティング：React-Router;
• 国際化：linguijs;
• コンポーネントを単独で開発し、ストーリーブックを介してチームに共有します。ストーリーブックを展開し、各ストーリーでクロマティックを介してスクリーンショットテストを実行します。
• テスト時のAPIモッキング：モックサービスワーカー。

有料コース？

それらを完成させた後に私がお勧めするもの：

• wes bosコース？ JavaScript、React、CSSなど。一部は無料です！
• ケントC.ドッズコース？反応、テスト;