[React TIL] Node.js & Why React?

220331

node.js取付

vscode有用な拡張インストール

node.js基礎課

react.js基礎課

JSの外部モジュールexport

// example
module.exports = {
    moduleName : "calc module",
    add : add,
    sub : sub,
}; 

npm

node package manager = node.jsのパッケージングツール、管理しやすい

package

登録モジュール、文字認証モジュール等

package.json

作成するパッケージ情報の優先パラメータファイルを記録します.
名前、バージョン、情報、設定など
main:ファイルへ
ㄴcripts:頻繁に実行されるコマンドを事前に定義する
キーのみを入力するとvalueのコマンドが自動的に実行されます

npmjs

他の人のモジュールを使用したい場合に使用します.
ノート
オープンソース形式で提供
npmjsに特定のモジュールがインストールされている場合、

package.jsonのdependencies部分
->インストール済みモジュールを含むランダムバージョン(複数)

random modulesフォルダの作成
->フォルダにインストールしたモジュールの実際のコードが格納されています.(=外部パッケージ電子倉庫)

package-lock.jsonファイルの生成
->インストールしたモジュールの正しいバージョン

が表示されます.

なぜ反応を使うのか

1.重複コードの作成

1つの問題は複数のコードを修正する必要があります->メンテナンスの問題(散弾銃手術)
見出し、プッシュ、Navなどの構成部品の作成:必要に応じて名前を付けて使用
タイピングのコード量が著しく減少
素子化と呼ぶ

反応器は素子ベースのライブラリです
レゴを作って組み立てる感じ=幸せ(一体)

2.宣言式プログラミング

左はjquery、右はreact

3. virtual DOM

5回更新する必要があり、それらを組み合わせて1回の演算を行います.

Create React App

boiler plate

パッケージ内のパッケージ=npx

npx creat-react-app '프로젝트명' . (점 찍어야 파일구조 깔끔함)
npm start ( 리액트 실행 .. )

私はhtmlを書いていませんが、どうしてWebブラウザを実行しますか?

App関数が返す値はidがルートのdivの下のサブ要素に入ったと推定できます.
public > index.htmlには私たちがずっと探していたhtmlファイルが存在します!
整理して、🌟
index.jsで「開始->id」をルートとする要素を検索->appというコンポーネントをインポート

jsx

jsとhtmlを組み合わせて使用
=JavaScript式
= jsx

構成部品

appという関数を作成し、jsx構文のhtmlを返してコンポーネントを作成します.
トップクラスのコンポーネントはいつでも交換できます(app以外)
export.default(ES 6バージョン…?)
module.exports(Common jsバージョン)

サスペンス

npmで実行しますか、それともノードで実行しますか.

MacBook開発者ツールショートカットオプション+command+i

create-act-appでインストールする場合、node modules内のパッケージは非常に多い(要するにreactも外部モジュールであり、ここに存在する).バニラを入れるのに時間がかかります.

事実パッケージ.json, package-lock.jsonでパッケージ名が指定されているため、node modulesファイルを削除できます.うっかり削除しても...npm-iコマンドは

インストール可能

npm i = npm install