ReactDOM.render() 의 사용; 컴포넌트 랜더링

import React from 'react';
class Card extends React.Component {
    render() { // react ele -> DOM
        const img = "img/strings.png";
        const imgalt = "string";
        const desc = "A very authentic and beautiful instrument!!"; 
        const price = 100;
        const productName = "Strings";
        return(
            <div className="col-md-6 col-lg-4 d-flex align-items-stretch">
                <div className="card mb-3">
                    <img className="card-img-top" src={img} alt={imgalt} />
                    <div className='card-body'>
                        <h4 className='card-title'>{productName}</h4>
                            price: <strong>{price}</strong>
                        <p className='card-text'>{desc}</p>
                        <a href="#" className="btn btn-primary">Buy</a>
                    </div>
                </div>
            </div>
        );
    }
}

• 리액트 컴포넌트는 React.Component를 상속받는 자바스크립트 클래스다. 
• render(): 리액트 앨리먼트를 반환하며, 리액트 컴포넌트를 일반 DOM태그처럼 랜더링 한다. 
• 컴포넌트 이름은 대문자로 시작, 카드 컴포넌트 이름은 대문자 C로 시작한다. 
  • div같은 일반 DOM태그와 컴포넌트 DOM 태그 구별 위함. 

reacDOM.render(<Card/>, document.getElementById('root));

HTML  파일의 루트 div안에 컴포넌트를 랜더링한다.