[노마드/React로 영화 웹 서비스 만들기] Ch05 CREATE REACT APP | 0. Introduction & 1. Tour of CRA

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  create-react-app

---

npx create-react-app@lastest my-app

👉🏻해당 명령어를 통해 react app을 생성한다.

• lastest 자리에는 가장 최신의 버전을 적는다.
• my-app 자리에는 본인이 생성할 app의 이름을 적는다.

👉🏻위와 같은 구조로 파일이 생긴다. src 디렉토리에서 필요한 App.js와 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>
);

👉🏻index.js

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

export default App;

👉🏻App.js

npm start

👉🏻해당 명령어로 react app을 실행한다.

해당 화면

 

2.  Button 만들고 css 적용

---

import PropTypes from "prop-types";
import styles from "./Button.module.css"

function Button({ text }) {
    return (
        <button className="btn">
            {text}
        </button>
    );
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
};

export default Button;

👉🏻Button component를 만들어 Button.js 파일에 담아준다.

npm i prop-types

👉🏻해당 명령어를 실행해야 propTypes를 사용할 수 있다.

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

👉🏻Button.module.css파일에 해당 코드를 적는다.