[React] 리액트 기초 3 - 리액트 props 기초, 리액트로 사각형 만들기

리액트 props 기초

 

 

HTML

 

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

<div title="야옹">안녕</div>

 

 

 

JS(Babel)

 

console.clear();

 

class App extends React.Component{

  constructor(props){

    super(props);

    

    console.log(this.props.name);

  }

  render(){

    return (

      <section>

        <div>안녕하세요,</div>

        <div> {this.props.name}님.</div>

        </section>

    );

  }

//   싱글 태그 사용 불가 ---> <br />

//   여러 줄로 쓸 때는 괄호로 묶기

//   하나의 부모 엘리먼트로 묶어주어야 함.   

//  자바스크립트 표현식은 중괄호로

  

}

// 상속: 리액트 컴포넌트에 있는 기능을 가져와서 class app에 넣겠다.

// 클래스 : 함수를 담을 수 있는 상자, constructor 와 render 라는 메소드가 반드시 있어야 함.

 

ReactDOM.render(<App name="방울"/>, document.getElementById('root'));

 

 

 

 

리액트로 사각형 만들기

 

 

 

HTML

 

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

 

 

 

JS(Babel)

 

console.clear();

 

class App extends React.Component{

  constructor(props){

    super(props);

//     부모의 생성자를 호출한다.

//     App의 부모 -> react.component

  }

  render(){

    return <Square/>

  }

}

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

 

 

class Square extends React.Component{

   constructor(props){

     super(props);

   }

    render(){

      const style = {

        "width" : "100px",

        "height" : "100px",

        "background-color" : "pink"     

      }

//       style 이라는 객체를 만든다.

      console.log(style.width);

      console.log(style.height);

      console.log(style['background-color']);

//   대쉬(-)가 들어있기 때문에 그대로 적을 수 없음.

      

      

      return <div style = {style}></div>;

    }

  

}

 

 

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