[JSX] 각 모듈마다 .jsx로 분리한 뒤 import, export하면 깔끔한 앱이 된다
2020. 5. 19. 01:46ㆍ컴퓨터언어/React JS
728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/JSX"></script>
</body>
</html>
// Heading.jsx
import React from "react";
function Heading () {
return <h1>My Stacks</h1>
}
export default Heading;// List.jsx
import React from "react";
function List () {
return (
<ul>
<li>HTML/CSS/JS</li>
<li>NodeJS</li>
<li>Python</li>
<li>Django</li>
<li>React</li>
<li>Flutter</li>
</ul>
)
}
export default List;// App.jsx
import React from "react";
import Heading from "./Heading";
import List from "./List"
function App () {
return (
<div>
<Heading />
<List />
</div>
)
}
export default App;// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"))728x90
반응형
'컴퓨터언어 > React JS' 카테고리의 다른 글
| [Hook] 유저와의 UI 반응을 위한 상태관리 with Functional Components (0) | 2020.05.23 |
|---|---|
| [Map Function] 배열의 원소마다 함수를 각각 실행시켜주자 (0) | 2020.05.19 |
| [props] HTML 태그에서 attribute를 사용하듯, JSX 태그에서 커스텀속성 사용하기 (0) | 2020.05.19 |
| [JSX] HTML 요소들을 .html이 아닌 .js에서 가지고 놀게 함 (0) | 2020.05.18 |
| [React JS] 효율적인 프론트엔드 솔루션 (0) | 2020.05.18 |