今日はwecodeでreactの最初の授業です.
授業前に生活コードを通じてある程度の基礎を理解した.
第1節の授業を通じて以下の学習目標を達成することができる.

🚀 学習目標

は、今日多くのreactが使用されていることをどのような流れで説明することができますか.

Reactとは何かを定義できます.

CRAをインストールし、フォルダとファイルがどのように構成されているかを説明できます.

コンポーネントの概念および種類を説明することができる.

JSXを定義し、その基本的な特性を説明できます.

の既存のWestagramをReactに変換してレンダリングできます.

📝 Mentor's Tip

反応は理解しにくい概念であり、多くの概念を学習してもコードに移行する前に.会議に参加したり、オンライン講座を聞いたり、ブログを見たりして勉強するときは、必ずコードに従って勉強しなければなりません.

の概念が欠けていても、コードを記述して概念を学ぶことは大きな助けになります.

を既存のバニラJavaScript実装と比較し,なぜ反応の利点が何なのか,欠点が何なのか,コンポーネントがどのように区分されているのか,JSXの特徴が何なのかをまとめ,その過程における参加をまとめた.既存のテクノロジーと新しいテクノロジーの違いを実感したときだけ、あなたはあなたのものです.

セッションのクリーンアップ

1.なぜ反応液を使うのですか。

フレームワークとは、技術的に使用すべき構造が設定されていることを意味します.
したがって,その中には方式に従って開発しなければならないルールがある.
しかし、ライブラリはもっと自由です.ツールにはパーティーのルールが規定されていないので、私が作成しました.
また,FBの持続的な管理と生態系は活発な状態にある(ユーザが多く,コミュニティが活発で,多くの参考資料がある).大きなメリットがあります.
ただし,ライブラリとしての反応器は閲覧のみを担当しているため,内蔵の機能はないが,third-partyライブラリを併用している.(例えばRedux、React-rrouter!)

反応とは?

UIを作成するjsライブラリとして、開発者が直接更新することなく、更新するたびにUIを自動的に更新できます.
また、反応はプログラム的ではなく宣言的である.
(例えば、掃除をしている間に掃除機を回したり、モップを引っ張ったり…といちいちするのではなく、「何をしたいのか」を完成させたいUIに対して宣言します(完成後はそうすべきです).そうなると反応します で描画するには、データを更新するだけです.
応答は仮想DOMを介してUIを更新することに注意してください.

3. Setting: node.js & nom

1) Node.jsとは何ですか。

JavaScriptをブラウザ外(ex.サーバ)で実行させる環境==を脱網と呼ぶ.
プロジェクト開発環境を構築する主なツールはnodeです.jsベース

Npmとは?

ノードパッケージマネージャとしては,複数のアプリケーションを持つPlayStoreと考えられる.

3)CRAとは?

反応プロジェクトを開始するために必要な開発環境を設定するツールです.(toolchain)
反応しますね.多くの場合,開発者はUI機能を提供するだけで直接構築できる.そのため,初期段階では開発環境を直接構築することは困難であるため,CRAを用いる.

4.CRAをインストールし、フォルダとファイルを設定する

node.モジュールの容量が大きすぎるのでignoreにアップロードされ、他の開発者はnpmの誘導で開発環境に必要なものを自動的にダウンロードします.Nodeモジュールには、ライブラリのソースコードも含まれています.
srcには、コンポーネント、ページ、スタイルが含まれています.
△この部分は今後、プロジェクトを行う際にきちんと守る部分で、個別に整理して詳しく紹介します.

5.構成部品

componentを使用する場合は関数型(function)とクラス(class)表現があります.
現在の業界では関数型の傾向があり、プロジェクト中にclassを使用してコンポーネントを作成する計画です.
しかし、両者の違いを指摘するには、関数型にrenderがないということです.


class componentのデフォルト構文は次のとおりです.

class (파일명) extents React.Component{
  render(){
 	return <div className = "App"></div>; //jsx로 작성
  }
 }

function componentのデフォルト構文は次のとおりです.

function App(){
  return <div className = "App"></div>; 
 }

classまたはfunctionとして使用する場合の違いに加えて、次の図に示すように、コンポーネントに含まれるフレームワークは次のとおりです.
1)import
2)component
3)block
4)export
入るということです.
今日の課題で私が困ったのは
1)cssファイルとjsファイルの中で、誰が親フォルダで、どこでimportとexportを行うべきですか?
2) App.jsはすべてのファイルをインポートする必要がありますか?
3)画像や写真などの経路を変更する点
(共通の画像ファイルフォルダでは、親フォルダは不要、/image/ファイル名.pngを書くだけでこの問題を解決できます.
4)htmlヘッダーを挿入するフォントアドレスはどこに置けばいいですか?△私たちはbodyからコピーしたからです.

1)cssファイルとjsファイルの中で、誰が親フォルダで、どこでimportとexportを行うべきですか?
まず、cssファイルにはexportは必要ありません!
その後jsファイルは各cssファイルにインポートすればよい.
通常は同じファイルに存在するため、現在のパス"./"探してあげることができます.
2) App.jsはすべてのファイルをインポートする必要がありますか?
いいえ.
すべてのファイルがAppです.jsではなくインデックス.htmlに収集する必要があります.
ただし、cssファイルは->jsファイルにパッケージされます.
各jsファイルのみindexに以下のように表示されます.
現在はSassがないため、同時にレンダリングすることはできません.ホームページまたはloginページのいずれかしかレンダリングできません.

ReactDOM.render(
    <Login / 혹은  Main />, document.getElementById('root')
);

このように処理してこそ、reactで必要なファイルを表示することができます.
3)画像や写真などの経路を変更する点
(共通の画像ファイルフォルダでは、親フォルダは不要、/image/ファイル名.pngを書くだけでこの問題を解決できます.
**4)htmlヘッダーを挿入するフォントアドレスはどこに置けばいいですか?△私たちはbodyからコピーしたからです。 フォントアドレスはindexです。htmlに置けばいいので、単独でマークしたり置換したりする必要はありません。