개발 관련 학습/React

[처음 만난 리액트]섹션 2. 리액트 시작하기

잡식성 개발자 2023. 1. 11. 14:52
728x90
반응형

섹션 2. 리액트 시작하기

  • index.html

      <!-- index.html -->

  <html>
      <head>
          <title>잡식성 개발자</title>
          <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
          <h1>잡식성 개발자 블로그에 오신 여러분을 환영합니다.</h1>

          <!-- DOM Conatiner(Root DOM Node) -->
          <div id="root"></div>
      </body>
  </html>
      <!-- index.html -->

  <html>
      <head>
          <title>잡식성 개발자</title>
          <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
          <h1>잡식성 개발자 블로그에 오신 여러분을 환영합니다.</h1>

          {/* DOM Conatiner(Root DOM Node) */}
          <div id="root"></div>

          <!-- 리액트 가져오기 -->
          <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
          <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

          <!-- 리액트 컴포넌트 가져오기 -->
          <script src="MyButton.js"></script>
      </body>
  </html>

  • MyButton.js

      // MyButton.js

  function MyButton(props) {
      const [isClicked, setIsClicked] = React.useState(false);

      return React.createElement(
          'button',
          { onclick: () => setIsClicked(true) },
          isClicked ? 'Clicked!' : 'Click here!'
      )
  }

  const domContainer = document.querySelector('#root');
  ReactDOM.render(React.createElement(MyButton), domContainer);

실습. create-react-app

create-react-app

  • 리액트로 개발을 하기 위한 모든 설정이 되어있는 상태로 프로젝트를 생성

  • 조건

    • Node.js v14.0.0 이상

    • npm v6.14.0 이상

    • VS Code


  • 명령어

      # 사용법
  $ npx create-react-app <your-project-name>

  # 실제 사용 예제
  $ npx create-react-app my-app
      # 경로 변경 (change directory)
  $ cd my-app

  # 애플리케이션 실행
  $ npm start

  • 실행 화면

  • 참고

728x90