react :: 만들면서 배우는 리액트 기초

const app = (
  <div>
    {title}
    {form}
    {mainCard}
    {favorites}
  </div>
  );
const here = document.querySelector('#app');

ReactDOM.render(app, here)

---

const favorites =(
  <ul class="favorites">{catItem}{catItem}{catItem}</ul>
  // 자바스크립트 문법을 리액트 안에서
);

---

componet 리액트 내에서 함수로 만들어서 사용

function sayHello(name){ return "안녕" + name}

로 사용

funtion Card(title, description){
	return (
  	<div>
      <h2>{title}</h2>
      {description}
      </div>
  )
}

리턴 안에는 div태그로 작성
HTML 태그처럼 사용 가능

<Card title ="리액트!" description="입니다" />

---

반복되는 아이템들

  const catItem = (
    <li>
      <img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react"/>
    </li>
  );

을

function CatItem(props) {
    return (
      <li>
      <img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react"/>
    </li>
    )
  }

로 해준다면 favorites에는

const favorites =(
      <ul class="favorites">
        <CatItem img="https://cataas.com/cat/BxqL2EjFmtxDkAm2/says/inflearn"/>
        <CatItem img="https://cataas.com/cat/18MD6byVC1yKGpXp/says/JavaScript"/>
      </ul>
    );

로 해주는것인데

props는 img로 받기 때문에 img src={props.img} 라 해준다