ReactのReact Learning Weekのために!

难しすぎるあなたを理解するために、整理して、よく勉强します。

#0. What is React ?

前期のPreCourse Bootサマーキャンプでは,Webページの作成方法と基礎を理論的に学んだ.
JSを単純HTMLタグに直接マッピングし,CSSを用いて修飾し,動的に動作させる.

Reactは、Webページを非常に効率的に作成するだけでなく、ステータスを効率的に管理できます.すなわち,ReactはWebページを効率的に作成し,状態を管理できるライブラリ,フレームワークの1つである.またReactの他にView(Vue JS)またはAngular(Angular JS)がある.(+reactはFacebookから、AngularはGoogleから.)



どうせこうやって禁酒の反応が始まるのだから、初めて会った友達なので見慣れない.まず用語たちと親しくしなければならない.まず、コンポーネントを見てみましょう.

#1.Componentとは?

Reactプロファイルビデオの後半では、「Reactはコンポーネントコンセプトに集中したフロントエンドライブラリです.」こんな紹介がありました.

簡単に言えば「自分のHTMLタグ」です.これは後の内容を勉強してから完全に理解することができます.現在では、「私が作成した既存のHTMLタグを仮想のLibriayとして作成して名前を付けます.そして、名前を付けた「私のHTMLタグに属する」と入力し、実際には存在しないそのHTMLタグを入力して、保存したHTMLタグの出力を可能にします.そのため、私のHTMLタグと呼ばれています.」理解すればいいです.
つまり、慣例に従って、

このようにすべて入力します.
しかし、コンポーネントは存在しません.つまり、自分のHTMLタグを使っている場合は、

こんなに簡単にできて、とても直感的です.これは,Componetが再利用性を向上させるだけでなく,コードを直感的に記述できることを意味する.Reactはこのようにコンポーネントユニットで開発されている.

コンポーネントを理解した以上、ES 6とJSXを理解しましょう.簡単な反応を取り付けずに済むCodesandboxから.

#2-1. ES6 => React

ES 6を簡単にスキップします.reactはES 6構文を使用します.短時間ですべてのES 6文法を習得することは不可能であるが,以下の7つの概念は熟知する必要がある.

#2-2. JSXとは何ですか。

JSXは、作成したコンポーネントを画面に出力するために使用されます.
HTMLファイルではなく、JSでHTMLを使用して関数の戻り部分に書き込みます.とても特別で、初めて見た構造で、JSXです.

「JSXは一見HTMLのように見えるかもしれません(書いてあるフォントがHTMLタグだから~!?)しかし、JSXはJS文法の拡張です!!
JSXを使わないと、以下のようなデメリットが出てきます.

JSXを使って非常に簡単にこの問題を解決することができます.

ただし、以下の注意事項を遵守して使用しなければならない。

1.装飾品で包まなければなりません。(左側の画像に示すように、右側の線分を2つの線分ではなく記入してください。)

2.JavaScriptコードを適用する場合は、{}のカッコ内に記入してください!

render(){
	return(
	const name = 'Walli' 
	/* 변수 name을 불러오려면, 중괄호 안에 {name}이라 작성하여 불러온다. */
	<div>
	hello{name}!;
	<div>
  );
}

3.JSX内部でif文は使用できません!この目的のために、IIFEまたは3つの演算子を代替方法として使用します。

4.別名を適用する場合はclassNameを使用します。

#3.次編-JSX実戦-JSX文法コード

JSXを知っている以上、実戦に入りましょう.Codesandboxで練習を行い、reactをインストールする必要はなく、練習内容は次の記事でさらに紹介します.
[試食予告編!]

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
    </div>
  );
}