Create-React-App

leeyw2709·2022년 1월 23일
0

React

목록 보기
4/6
post-thumbnail

Introduction

  • node.js 설치

    • node -v로 설치 확인

    • npx

  • create-react-app

    npx create-react-app my-project
  • npm start



Tour of CRA

  • export default

    • 다른 파일에서 해당 파일의 컴포넌트를 사용할 수 있게 해준다.

      function Button({text}){
        return <button className={styles.btn}>{text}</button>;
      }
      Button.propTypes = {
        text: PropTypes.string.isRequired,
      }
      // App.js 에서 Button을 가져올 수 있게 함.
      export default Button;
  • PropTypes 사용하기

    • 설치

      npm i prop-types
    • 사용하기

      import PropTypes from "prop-types";
      
      function Button({text}){
        return <button>{text}</button>;
      }
      
      Button.propTypes = {
        text: PropTypes.string.isRequired,
      }
      
      export default Button;
  • 특정 컴포넌트를 위한 CSS 파일 만들기

    • Global (전역적인) CSS Style

      • styles.css 생성
      • index.js 에 styles.css 를 import
    • Local CSS Style (==CSS module==)

      • Button.module.css 파일 만들기

        .btn {
          color: white;
          background-color: tomato;
        }
      • 해당 css 를 사용하고 싶은 컴포넌트.js 에서 import

        // styles: JavaScript 오브젝트
        // create-react-app 이 CSS 코드를 JavaScript 오브젝트로 변환시켜줌.
        import styles from './Button.module.css'
        
        function Button({text}){
          return <button className={styles.btn}>{text}</button>;
        }

        create-react-app은 무작위 랜덤 클래스를 만듦

profile
사람을 이해하는 프론트엔드 개발자가 되고 싶습니다!

0개의 댓글