React Course 1-1 | Components, Props, JSX

🐰1. Rendering root component 리액트 시작하기

index.js 파일이 시작지점이다.

import React from "react";
import ReactDom from "react-dom/client";

function App() {
  return <h1>Hello React!</h1>;
}

// React v18
const root = ReactDom.createRoot(document.getElementById("root"));
// id=root인 html을 불러와서 렌더링
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🐰2. Props

parent components에서 child components로 data를 넘겨줄 때 사용한다.

Example 1

<Pizza
name="Pizza Prosciutto"
ingredients="omato, mozarella, ham, aragula, and burrata cheese"
photoName="pizzas/prosciutto.jpg"
price={10}
/>

Example 2

function SkillList() {
  return (
    <div className="skill-list">
      <Skill skill="React" emoji="💘" color="skyblue" />
      <Skill skill="JavaScript" emoji="💘" color="orange" />
      <Skill skill="HTML+CSS" emoji="💘" color="yellow" />
    </div>
  );
}

function Skill(props) {
  return (
    <div className="skill" style={{ backgroundColor: props.color }}>
      <span>{props.skill}</span>
      <span>{props.emoji}</span>
    </div>
  );
}

🐰3. JSX Rules

• className (not class)
• htmlFor (not for)
• Every tag needs to be closed. <img />
• All event handlers, CSS property names need to be camelCased. onClick
• aria-* and data-* are same as in HTML
• CSS inline styles: {{<style>}} (to reference a variable, and then an object)

🐰4. && Conditioning

각각 레벨에 다른 이모지 출력
&&: 조건이 true이면 뒷부분 실행, false이면 pass.

<span>
  {level === "beginner" && "🐣"}
  {level === "intermediate" && "😊"}
  {level === "advanced" && "💪"}
</span>