[React] 리액트 기초 4 - 사각형 2개 만들기

 

 

 

HTML

 

<div id="root"></div>

 

 

JS(Babel)

 

class App extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    return(

      <div>

        <Square />

        {' '}

        <Square />

 

       </div>

    )

  }  

//   {' '}으로 공백을 만들어줄 수 있음.

// Square 태그를 생성하는 App 태그 생성

}

//  반드시 태그의 첫 문자는 대문자로

 

 

class Square extends React.Component{

    constructor(props){

    super(props);

  }

  render(){

    const style ={

     width:"100px",

      height:"100px",

      'background-color':"red",

      display:"inline-block"

    };

    

    return(

        <div style ={style}>

       </div>

    )

  }  

}

 

ReactDOM.render(<App/>, document.getElementById('root'));