2220523 react

lillly02v·2022년 5월 23일

ReactJS로 영화 웹 서비스 만들기

#2 THE BASICS OF REACT

#2.0 introduction

폴더 생성 react-for-beginners

<script src="[https://unpkg.com/react@17.0.2/umd/react.production.min.js](https://unpkg.com/react@17.0.2/umd/react.production.min.js)
"></script>
<script src="[https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js](https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js)"></script>

#2.2 Our First React Element

React DOM은 모든 React element 들을 HTML body에 둘 수 있도록 해준다.

const span = React.createElement("span", {}); 두번째 인자로 span의 property들이 들어갈 수 있음.

const span = React.createElement("span", {id: "sexy-span"});

const span = React.createElement("span", {id: "sexy-span", style: {color: "red"}}, "Hello I'm a span");

const span = React.createElement("span", {id: "sexy-span"}, "Hello I'm a span"); //createElement의 세번째 argument는 span의 content(내용)이다.

#2.3 Events in React

const span = React.createElement("span", null, "Hello I'm a span");

const container = React.createElement("div", null, [span, btn]);

// eventListener
const btn = React.createElement("button", {
      onClick: () => console.log("im clicked"),
    }, "Click me");

#2.5 JSX

const Title = <h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>Hello I'm a title</h3>
    // const h3 = React.createElement("h3", {
    //   id: "title",
    //   onMouseEnter: () => console.log("mouse enter"),
    // }, "Hello I'm a title");

button

const Button = <button style={{
        backgroudColor: "tomato",
      }} onClick={() => console.log("im clicked")}>Click me</button>

Babel은 코드를 변환해주는 녀석. JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

type=”text/babel”

script type="text/babel">
    const root = document.getElementById("root");
    const Title = <h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>Hello I'm a title</h3>
    const Button = <button style={{
        backgroudColor: "tomato",
      }} onClick={() => console.log("im clicked")}>Click me</button>
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(btn, root);
  </script>

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js
  "></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = <h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>Hello I'm a title</h3>
    const Button = <button style={{
        backgroudColor: "tomato",
      }} onClick={() => console.log("im clicked")}>Click me</button>
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(btn, root);
  </script>
</html>

#2.6 JSX part Two

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js
  "></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    function Title() {
      return (
        <h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>Hello I'm a title</h3>
      );
    }
    const Button = () => ( //arrow function과 functinon (){ return();}과 같다.
       <button style={{
        backgroundColor: "tomato",
      }} onClick={() => console.log("im clicked")}>Click me</button>
    );
    const Container = <div><Title/> <Button/></div>
    ReactDOM.render(Container, root);
  </script>
</html>

컴포넌트의 첫 글자는 반드시 대문자여야 한다.

html 요소라면 소문자로 적기

const Container = () => ( 
      <div><Title/> <Button/></div>
    );
    ReactDOM.render(<Container/>, root);

SOMEmo

이전 포스트

githuub pages 여러개 만들기

다음 포스트