#5 Create React App

[5.0] Introduction

// 터미널
1) 터미널 명령어
$ cd ~ //사용자 홈 디렉토리로 이동
$ ls //현재 위치한 경로 안의 내용 출력

2) npx create-react-app 폴더명
파일 만들어주기

3) code 폴더명
리엑트 vs코드로 열어주기

// vs studio
4) npm run start || npm start
온라인 서버 열어주기

5) src : 모든 폴더가 여기 있어야함!

• index.js : 가장 중요한 것
  ReactDOM과 getElementById가 있음
• App.js : return되는 것들이 있음

6) 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>
);

7) App.js 남길 것만 남기기

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

export default App;

8) src 파일에서 App.js와 index.js 빼고 지우기

[5.1] Tour of CRA
1) Button.js 만들기

function Button ({text}){
    return <button>{text}</button>
}
export default Button;

• export default Button의 의미 : App.js에서 Button 가져다 쓰기 위해서

2) App.js에 Button 가져오기

import Button from "./Button"

• button은 Button 함수 내용 확인해서 잘 적기

3) div 안에 Button text={"Continue"} 만들어주기

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
      <Button text={"Continue"}/>
    </div>
  );
}

4) npm i prop-types

• prop-type 다운로드하기
• package.json에 설치 확인

5) import PropTypes from "prop-types"
Button.propTypes = {
text: PropTypes.string.isRequired,
}

• button 폴더 안에 불러들이기

6) styles.css 만들어주기, index.js에 import 해주기 => 삭제

• style.css

button {
    color: white;
    background-color: tomato;
}

• index.js

import "./styles.css"

7) style.css를 Button.module.css로 변경

• Button.module.css의
  button {} 을 .btn {}으로 변경
• Button.js에서

import styles from "./Button.module.css"

function Button ({text}){
    return <button className={styles.btn}>{text}</button>
}