[react] react 시작하기 ① - 개요와 환경설정 본문

Web/React

[react] react 시작하기 ① - 개요와 환경설정

미니모아 2020. 4. 12. 17:26
반응형
  • 리액트의 장점
    • 상호작용이 많은 UI
    • 효율적인 컴포넌트 갱신 및 렌더링
    • 스스로 상태 관리하는 컴포넌트
    • DOM과 별개로 상태 관리
    • 앱 안 데이터 손쉽게 전달
  • npm ?
    node package manager. 자바스크립트의 다양한 라이브러리들을 관리해주는 도구. 파이썬의 pip랑 비슷함
    • 개별 프로젝트 폴더에 따로 설치 가능
    • 전체적으로 사용하도록 설치도 가능 (-g, global)
    • 사용은 주로 npm으로 시작
    • npx : 따로 모듈 설치 없이 사용할 수 있게 해주는 툴

  1. Node.js 설치하기

    운영체제에 맞는 거 설치
    터미널에 node--version을 쳤을때 버전이 나오면 정상적으로 설치된 것임

  2. 프로젝트 생성하기
    npx create-react-app [앱 이름]

    이렇게 나오면 설치 완료

    위에서 하라는대로 해보면 다음과 같은 화면을 확인할 수 있다.

    ㅎㅇㄹ

  3. Hello World 띄워주기
    App.js 파일에서 retrun 안을 다음과 같이 바꿔준다.

       function App() {
     return (
       <div className="App">
         <h1>Hello World</h1>
       </div>
     );
    }

    indexjs 에서는 app.js를 import하여 index.html에 뿌려준다.

     ReactDOM.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
     document.getElementById('root')
   );

    index.html에 이 부분으로 데이터 뿌려지게 된다.

       <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div> //이 부분!

    npm start 했을 때 열렸던 브라우저 창으로 결과를 확인할 수 있다. npm 끄는 건 ctrl+ c

반응형
저작자표시 비영리 변경금지

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

[react] Props&State ① - Props  (0) 2020.04.12
[react] react 시작하기 ② - JSX  (0) 2020.04.12
[react] react를 위한 js ④ - Promise, Async - Await  (0) 2020.04.12
[react] react를 위한 js ③- Async, Callback  (0) 2020.04.12
[react] react를 위한 js ② - class 와 super  (0) 2020.04.12
'Web/React' Related Articles more
Comments