React:React(feat.babel,react-dom)の起動

Babel

ES 6構文をES 5の役割に変換
ES 6構文がサポートされていないブラウザの互換性

reactとreact-dom

reactファイルは構成部品を担当します.
react-domファイルは実際のDOMのレンダリングを担当します.
->実際のページでjsx形式をレンダリングするためのコード
反応15以降のバージョンからファイルが分離されます.

component

構成部品JavaScriptのクラス、反応構成部品クラスを継承して使用
コンポーネントから別のコンポーネントを読み込み、使用する

JavaScriptのclass

JavaScriptのクラスはES 6から導入された構文

既存のプロトタイプに基づく継承をより明確に示す
**クラスベースではなく構文のみをもたらす新しいオブジェクト向けモデルではありません

JavaScript classの使用

ジェネレータメソッドあり
作成者内部でのみメソッドを作成できます

생성자 내부에서 변수(인스턴스의 프로퍼티) 사용
constructor(변수1, 변수2){
	this.변수1 = 변수1;
    this.변수2 = 변수2;
}
// 클래스는 오브젝트(객체)를 정의
// 변수에 담긴 오브젝트는 인스턴스(하나의 객체)

クラスは使用前に宣言する必要があります
クラスに静的メソッドを作成できます(インスタンスの作成前に静的メソッドを使用できます).
クラス継承可能(supurキーで親を呼び出すことができます)

render()

すべての反応素子にはrender()法がある.
->構成部品の外観を定義する

JSX

JavaScriptコードでhtmlセグメントを定義できます(XMLクラス構文)
JSXはxmlのような構文をオリジナルJavaScriptに変換
引用符なし
括弧は省略できますが、可読性には括弧を使用する必要があります.
ES 6構文ではありませんが、babelはjsx-loaderで変換されます

JSX使用例

class Codelab extends React.Component{
  render(){
    return(
      <div>Codelab</div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <Codelab />
    );
  }
}

// react-dom에서 JSX형태의 코드를 페이지에 렌더링
// 인자1. 렌더링 할 JSX코드/컴포넌트, 인자2. 렌더링할 페이지의 html엘리먼트
ReactDOM.render(
  <App />, document.getElementById('root')
)

JSXの特性

Nested Element:レンダリング時にcontainer要素の内部に複数の要素を作成する必要があります

	render(){
    	return(
        	<>
            	<h1>Hi</h1>
                <h2>Yaeh</h2>
            </>
        )

JavaScript Expression:JSX構文でJavaScriptを使用
-パッケージを>{}として使用

	render(){
		let text = 'Hi';
    	return(
        	<>
            	<h1>{text}</h1>
                <h2>Yaeh</h2>
            </>
        )

Inline Style:JSXでスタイルを使用してCamelCaseに設定されたオブジェクト

	render(){
    	let style = {
        	color: 'aqua',
            backgroundColor: 'black'
        };
		let text = 'Hi';
    	return(
        	<div style={style}>
            	<h1>{text}</h1>
                <h2>Yaeh</h2>
            </div>
        )

Comments:JSXのコメント形式は{/コメント/}で、container要素に

を作成します.

	render(){
    	<>
        	{/* 주석 작성 /*}
        </>
        )

JavaScript変数宣言方式

scope:変数アクセス範囲(有効範囲)
1.var:再宣言/再割り当て可能、範囲スキャン-関数
2.let:再宣言不可/再配分不可、スキャン範囲-ブロック
3.const:再宣言不可/再割り当て不可、スキャン範囲-ブロック
**デフォルトではletを使用し、必要に応じてvar、constを使用します.