[React] 생성 / TIL # 38

6193 단어 ReactTILReact

React 프로젝트를 생성해보자

설치할 것들

  1. node.js , npm 설치 (node.js 설치시 npm 자동 설치)

  2. CRA 설치
    cd 프로젝트 폴더 -> npx create-react-app my-app
    -> cd my-app -> npm start(로컬 서버 시작)
    터미널에 표시된 Local: url에서 url 클릭 (맥: cmd + click)
    아래와 같은 화면이 뜨면 성공!

  3. SPA를 위한 react-router 설치
    npm install react-router-dom --save
    (--save는 package.json의 "dependencies" 객체에 기록을 남기는 옵션이다)

"dependencies"에 기록은 왜? 🤔
npm install시 "dependencies"에 있는 속성들이 자동으로 받아진다
git을 통해 해당 프로젝트를 공유할 경우 모든 패키지가 들어있는 node_modules 폴더는 너무 무거우니 .gitignore를 통해 제외시키고, 공유 받은 쪽에서 npm install을 통해 해당 프로젝트에 필요한 패키지를 받는 것이 옳기 때문에 --save를 통해 "dependencies"에 기록을 남기는 것이다

  1. SASS(SCSS) 설치
    npm install node-sass --save

주의 ❗️ 현재 CRA와 버전 호환이 안맞는 오류가 있다고 하니 알맞은 버전을 설치하도록 하자
원하는 버전 설치 : npm install node-sass@원하는 버전 --save

파일 & 코드 정리

CRA(툴체인)을 통해 초기 세팅을 완료했을시 쓸모없는 파일 & 코드가 있다
필요한 것만 남기고 모두 정리해보자

파일 정리

  • public 폴더 - index.html 외 모두 삭제
  • src 폴더 - App.js, index.js 외 모두 삭제

코드 정리

index.html

  1. 내용 모두 삭제 후 html 초기 세팅 내용만 삽입
  2. body안에 <div id="root"></div>추가
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

App.js

function App() {
  return <h1>MY REACT !</h1>;
}
export default App;

return (원하는 html요소 JSX로 작성)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

모두 정리 했다면 아래와 같은 화면이 나온다

이제부터 React로 나만의 웹 페이지, 사이트를 만들어 보자..! 🚀

4장 설계 및 선언
[python] underscore(_) in Python

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage