#01 리액트 입문 :: App.js에서 JSX 실습 (컴포넌트)

위치: App.js 파일

 

1. 버튼을 클릭하면 alert창이 나오도록 하기

[오류] onClick의 Click은 대문자여야한다. 

<button onclick={raiseError}>클릭!</button>

 

2.부모-자식 컴포넌트

[오류] 컴포넌트 대문자로 미작성. (mother => Mother)

function mother() {

    return <son />;

}

function GrandFather() {

    return <mother />;

}

function App() {

    return <GrandFather />;

}

 

3. <div>태그에 클래스 넣기

<div className ="test"> : JSX문법은 이렇게 사용해야함!

 

4.<p>태그에 style 적용하기 - 인라인으로 넣을땐, 객체!

<p style = {

  { color : 'red'}

}

 

4-1.<p>태그에 style 적용하기 - 변수로 선언

const pTagStyle =  {

  { color : 'red'}

}

 

<p style ={ pTagStyle }>