32일차

🍻

32일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 1. React Getting Started

 

---

 

 

Ch 1. React Getting Started

 

 

https://slides.com/woongjae/react2021

React 2021

 

React Concept

 

 

 🔗 NVM 

 

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

 

 

 🔗 React 라이브러리 

 

// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';

// 2. 리액트 컴포넌트 만들기
import React from 'react';

 

https://reactjs.org/docs/cdn-links.html

CDN Links – React

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

 

  const Component = (props) => {
    return React.createElement(
      "p",
      null,
      `${props.message} : ${props.count}`
    );
  };

  ReactDOM.render(
    React.createElement(Component, { message: "init", count: 0 }, null),
    document.querySelector("#root")
  );

  document.querySelector("#btn_plus").addEventListener("click", () => {
    ReactDOM.render(
      React.createElement(
        Component,
        { message: "update", count: 10 },
        null
      ),
      document.querySelector("#root")
    );
  });