리액트를 설치하면, 기본 파일이 생성된다.
App.js가 루트 컴포넌트이다.
이 파일에는 다음과 같이 작성되어 있다.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
여기서, render 함수 안에 return 안ㅔ html로 생긴 이것이 바로 JSX 코드이다.
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
JSX 코드는 리액트 컴포넌트를 만들때 사용하는 언어이다.
.js로 파일을 생성하면, render() 에서 태그가 자동완성 되지 않아 고생이 많았다.
알고봤더니, React에서는 .jsx로 작성해야한다.
이렇게 하면, HTML 자동 완성이 된다.
하지만, 반전이 있다.
HTML 문법이지만, HTML이 아니다. 이것은 자바스크립트이다.
리액트에서 빌드시, 고쳐준다고 한다. 고맙다.
JSX파일
다만, jsx보다는 js로 주로 사용된다.
'개발' 카테고리의 다른 글
| [React] 리액트에서 props이란 무엇이며 어떻게 사용하는가? (0) | 2018.07.10 |
|---|---|
| [React] 02) 리액트(React) 설치 방법 및 구조 (0) | 2018.07.07 |
| [vue.js] Vue.js란 무엇이며 왜 사용할까? (0) | 2018.06.30 |
| [vue.js] 1. Vue.js를 설치하는 방법과 webpack 설치 시 구조 (0) | 2018.06.28 |
| 웹스톰 쓸데없는 경고창들 없애기 (0) | 2017.12.12 |
