[React 따라하기 #5] React JSX

JSX 란?

 

JSX는 JavaScript XML을 나타냅니다.

JSX를 사용하면 React에서 HTML을 작성할 수 있습니다.

JSX를 사용하면 React에서 HTML을보다 쉽게 ​​작성하고 추가 할 수 있습니다.

 

// JSX 없이 코딩
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

// JSX 사용
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

 

 

태그는 반드시 닫혀야 합니다.

const myCar = (
  <ul>
    <li>audi</li>
    <li>bens</li>
    <li>bmwww.</li>
);  // 오류 . </ul> 이 없음. 닫혀야함.

 

 

 

 

[React 따라하기 #1] React 개발에 필요한 도구 설치

[React 따라하기 #2] React 시작하기 hello world!

[React 따라하기 #3] Codepen에서 실행해보기

[React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

[React 따라하기 #5] React JSX

[React 따라하기 #6] React Components(컴포넌트)

[React 따라하기 #7] React Components(컴포넌트) 참조하기

[React 따라하기 #8] React Props

[React 따라하기 #9] React State

[React 따라하기 #10] React 기본 함수 (life cycle)

[React 따라하기 #11] React Event 리액트 이벤트