[React] Create React App

#5 Create React App

creat-react-app 

→ 애플리케이션 제작 시 개발 서버 접근, 자동 새로고침, 즉각적으로 애플리케이션에 CSS 포함 가능

 

1. node js 사용자 버전 설치
2. 원하는 곳에서 새로운 폴더 생성
3. vscode에서 해당 폴더 열어줌
4. vscode 상단 메뉴에서 Terminal - New Terminal 클릭 (명령어로 vscode 제어 가능)
5. node -v 입력 후 현재 버전이 표시되면 node js 설치 성공한 것
6. Terminal에 npx create-react-app . (스페이스 + . 할 것!) (현재 폴더에 개발환경을 세팅하겠다는 뜻)
*y 눌러서 설치
7. Success! 가 뜨면 설치 완료

 

8. 설치 후 Terminal 에서 npm start

 

< creat-react-app 사용해서 어플리케이션 만들었을때 초기 버전 >

 

+) src 파일 중 index.js 가장 중요 

     creat-react-app은 어플리케이션 가지고 index.html 안에 넣어주도록 설정 되어있음

 

9. src 파일 에서 App.js / index.js 빼고 모두 삭제

 

App. js 밑 코드로 변경

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
    </div>
  );
}

export default App;

 

index.js 밑 코드로 변경

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

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

 

 

 

• css 사용 

1. styles.css 파일 생성후 indes.js에 import

    → 모든 button에 똑같이 적용

 

2. style prop 사용

(css파일 import 안 시켜도 된다)

ex)빨간 버튼, 파란 버튼 각각 만들때

 

<Button.module.css 파일>

.btn{
    color: white;
    background-color: tomato;
}

 

➣ Button.js에 import 

 

실행 페이지