Web/React
[React] Movie Rating Web Service-0.0. React 개발 환경 설정
밍맹030
2021. 9. 19. 18:06
728x90
react 사용에 필요한 것
- nodeJS, npm, npx, git, code editor
- nodeJS 설치 시 npm이 함께 설치된다. (yarn과 npm은 동일한 역할을 수행한다.)
- 원하는 code editor 사용 ex) VSCode, Sublime Text, Brackets, Atom, Vim etc..
react를 배우기 전 기본적으로 알아야 할 것
- html, css, vanillaJS
1. npx install
> npm install npx -g
2. create app
> npx create-react-app <app이름>
ex) npx create-react-app myapp
3. app 실행
> cd myapp
> npm start
< App.js >
import React from "react";
function App(){
return <div>Hello!</div>;
}
export default App;
< Index.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>< Index.js >
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));- index.js는 ReactDom.render를 통해 app.js의 App() component(함수)를 index.html의 "root"라는 id를 가진 div에 render 한다.
→ ReactDom.render는 <App/ >라는 application을 render 한다.
→ getElementById를 통해 index.html 의 <div id="root"><div>를 선택한다.
* react는 모든 react application을 div 사이에 넣는다.
728x90