REACT/Study

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

ㅈㅣㄴ 2024. 2. 7. 16:46
[처음 만난 리액트] 섹션 2. 리액트 시작하기

 

HTML 만으로 간단한 웹사이트 만들기

 

<html>
  <head>
    <title>참진의 블로그</title>
  </head>
  <body>
    <h1>참진의 블로그에 오신 여러분을 환영합니다.</h1>
  </body>
</html>

 

 CSS 를 사용하여 웹사이트 스타일링하기

 

h1 {
  color: green;
  font-style: italic;
}

 

<link rel="stylesheet" href="styles.css" />

 

동일한 디렉터리에 위치해야 한다.

 

 

웹사이트에 React.js 추가하기

 

<html>
  <head>
    <title>참진의 블로그</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>참진의 블로그에 오신 여러분을 환영합니다.</h1>

    <!--DOM Container (Root DOM Node)-->
    <div id="root"></div>

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

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

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

 

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 (CRA)

 

$ npx create-react-app my-app

 

$ cd my-app
$ npm start