[react]react基本概念(2)-JSX

3093 ワード
React TIL テキストリンク

JSX


▼JSXはHTMLとJavascriptを組み合わせた文法です。


コンポーネントを作成するときは、JSX構文を学習しましょう.

1.テスト構成部品の作成


./src/Test.js
import React from 'react';

function Test() {
  return <h3>I am test component</h3>;
}

export default Test;	// 다른 파일에서 Test 컴포넌트 사용 가능

2.テスト構成部品をApp構成部品にインポートする


./src/App.js
import React from 'react';
import Test from './Test';

function App() {
  return (		
  <div>
    <h1>Hello</h1>
    <Test />		// Test 컴포넌트 추가
  </div>
  );
  }
  
export default App;

index.jsにReactDOM.render(<App /><Test />, document.getElementById('root'));と書くとエラーになります.
「隣接するJSX要素は1つのラベルで囲まなければならない.」
反応器は最終的に素子を描くからだ.
Web_React #17
dkmsダイナミックモジュールロード