ツールのインストール

Tools

Terminal

MacBook(iterm), Windows(cmder)

Node.js

JavaScriptを使用して任意の場所でプログラミングできるフレームワーク.
👉 JavaScriptを実行する環境
👉 以前、JavaScriptはブラウザ上で実行されるWebアプリケーションまたはWebアプリケーションのために作成された言語でした.
👉 Node.jsのおかげで、Webブラウザの外でも、オペレーティングシステムの上でも、Node.js環境があれば、JavaScriptでコードを記述して実行できます.
👉 Back-endサーバの作成、サーバ側レンダリング、コマンドラインツールとスクリプトの作成に使用します.
⚽ JavaScript runtime environment (framework) that executes JavaScript code outside a web browser
"JavaScript everywhere"
server-side rendering
command line tools

npm

👉 Node for npm.jsをインストールします.
👉 npmはパッケージマネージャ
👉 外部ライブラリが必要な場合は、ライブラリを簡単にダウンロードおよび管理できます.
👉 ライブラリのインストール、更新、削除が可能
👉 npmを使用すると、プロジェクトはpackage.jsonというファイルを生成します.package.json⚽ Publish and share course code of Node.js packages simplify installation, updating, and uninstallation of packages.
install library
npx
npmとは異なり、必要なライブラリの実行に役立ちます.
npmはインストールと更新しかできず、ライブラリを実行できません.
プロジェクト自体を実行するためにプロジェクトに追加する必要がありますが、npxは必要なパッケージを実行するのに役立つツールです.
実行する外部ライブラリまたはパッケージがある場合は、npx library-nameを選択します.
=>対応するライブラリを実行できます
npm、npxの代わりに糸を使う

yarn

Facebookで作成されたパッケージマネージャ
npmの後に性能をさらに改善した.
npmに不足している=>npmは、バージョン管理、パフォーマンス、セキュリティなどに問題があります.
これを補うために、Facebook社で糸という新しい包装マネージャーを設立しました.
糸のnpm上の運動
package.npmと互換性のあるjsonファイルを使用できます.
プロジェクトの管理には、糸を使ってもいいし、npmを使ってもいいです.
性能は

npmより

速い

一貫したバージョン管理

セキュリティがやや高い

Package Manager
built on top of npm to resolve some of npm's shortcomings faster, consistent, and secure

Git

Mac

$ git -v

$ node -v 

$ npm -v

$ brew install yarn

$ yarn -v

iterms setting

React Tool

create-react-app

reactプロジェクトのインストールと実行
Facebook上で作成され、reactを開発する多くの開発者が、共同で使用している本当に役立つツールを自動的にインストールするのに役立つツールです.
Reactもこのツールを積極的にお勧めします.
現在の業界では、実際に必要なものは自動で作ったものよりも直接配置して使うことが多い.

$ mkdir basic
$ cd basic
$ yarn create react-app test
$ cd test

create react-appを使用すると、これらのツールは箱の中でよく包装されています.
内容を直接確認する必要はありません
中身を確認して修正したいなら?yarn ejectプロジェクトの実行

yarn start

Visual Studioの実行

code .

Project structure

.gitignore
これ以上追跡したくないファイル.
プロジェクトを実行するときに付属します.
バージョン管理に含めるべきでないコンテンツ
package.json

npmでバージョンを管理する場合、私のプロジェクトで外部で使用されているライブラリとそのバージョンが明確にリストされています.

直接修正する必要は少ない

コマンドで外部ライブラリを追加し、バージョン

を更新します.
node_modules
ライブラリの自動追加
package.jsonに含まれるライブラリ
リポジトリ構造を理解している場合は、チェックできます.
public/
public/manifest.json
後でProgression Webアプリケーションを作成する場合、
モバイル・ストレージのWebアプリケーション・キーの作成に必要な
public/robots.txt
Webスクロール用
src/
ソースコード
src/index.js

Tools etc.

react-appはFacebookで作成されたパッケージです

Gitも

初期化yarn eject箱の中身を開ける
しかし、糸が飛び出したら、箱を包装することはできません.
プロジェクトを書くときは本当に私が必要なので、詳細を設定する必要があるときに開くしかありません.
ファイルにたくさんの内容が開いていますconfig:webpack(コードをモジュール化して配置するのに役立ちます)は、詳細な設定を行うためにどのように設定しますか.
toolを使用すると、babelとwebpackの設定方法は全く分かりませんが、共通に多く設定されているので、プロジェクトの作成と使用が容易です.
現在の業界では、会社やプロジェクトに基づいて追加の設定とそれを行う必要があるものがあります.
したがって、create react appはあまり使用されません.手動で管理する.
プロジェクトの規模が拡大するにつれて、手動で管理と管理するチームが増え、多くの知識と時間が必要になります.
パーソナルアイテムはポップアップされません.
=>Reactの開発にはbabel,webpack,テスト関連コンテンツ,Type Script,eslint,jest,PostCSSなどがよく用いられる.

👉 JavaScript transcompiler
👉 JavaScript Transformerコンパイラ
👉 ECMAScript 2015+バージョンを以前のバージョンに変換
👉 convert ECMAScript 2015+ -> older version
開発者は最新バージョンのクリーンで最新のJavaScript構文を使用し、配置時にバーベルを使用して以前のブラウザでも理解できる、以前のバージョンのJavaScriptコードに変換します!
また、
私たちがやっている仕事は、ブラウザがそれを理解できるように、純粋なJavaScriptではないjsxをJavaScriptに変換することです.
どのバージョンに変換するかをより詳細に設定できます.
💡 ブラウザまたは以前のバージョンのブラウザを理解可能なソースコードに変換します.

Bundling the code, JavaScript module bundler
👉 バインドコード=作成したソースコード(.js、.sassなど)またはリソースイメージ(.jpg、.pngなど)をパッケージ化し、ユーザーにバンドル形式で提供します.
👉 mainpageを開くにはJavaScript a,b,cが必要で、画像が書き込まれるとスムーズになり、ユーザーに送信されます.ユーザーが別のページを開き、新しいページに必要なJavaScriptや画像があれば、それらを集めてスムーズにすることができます.
👉 ソースコードを減らしてJavaScriptを作成し、長変数や関数の名前を他の人と異なる=ハッカーに名前が異なることを理解させる作業をしています.
💡 私たちが丹念に作ったプロジェクト=モジュールをバンドルして、ソースコードをユーザーに伝えることができます!

👉 私たちのコードにすぐにエラーが発生すると、警告信号が表示されます.
👉 コード作成エラーや問題が発生した場合、eslintは事前に通知します.

delightful JavaScript testing framework
👉 テストフレームワーク、ユニットのテストを支援
👉 テストの作成に使用する一般的なツール

expandable CSS libraries
tool for transforming CSS with JavaScript
👉 CSSフロントプロセッサ
👉 lessまたはsassこれらは、フレームワークにCSSを作成するときにブラウザが理解できるCSSに変換されます.PostCSSも悪くない
👉 Sassは指定したことしかできませんが、PostCSSにはいろいろなプラグインがあり、私たちが欲しいものを追加することができます.
👉 現在は業界でも多く使われており、人気もますます高まっています

開発中に役立つツール!

Chromeブラウザを中心に開発しています.
👉 React Developer Tool
vscode
👉 reactjs snippet
👉 auto import
jsxまたはjsファイル、および後述するPostCSSでコメントを使用するには、
👉 VS Code settings.jsonに追加

  "emmet.includeLanguages": {

    "javascript": "javascriptreact",

    "postcss": "css"

  },

  "emmet.syntaxProfiles": {

    "postcss": "css"

  },