기록하는 개발자

[React] Movie Rating Web Service-0.0. React 개발 환경 설정 본문

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
저작자표시

'Web > React' 카테고리의 다른 글

[React] React Hook-1.1 useState를 활용한 useInput  (0) 2021.09.29
[React] React Hook-1.0 useState  (0) 2021.09.29
[React] Movie Rating Web Service-2.0. Detail page, About page 만들기  (0) 2021.09.25
[React] Movie Rating Web Service-1.0.movie json api 가져오기  (0) 2021.09.23
[React] Movie Rating Web Service-0.1.component와 propTypes  (0) 2021.09.22
'Web/React' Related Articles more