// from 뒤에 경로가 현재 디렉토리라도 꼭 적어야함.

  import { add } from './utils'; 
  // 하나만 갖고올거야해도  브레이스 표기
  // 여러개 중에서 하나만 갖고올거야 할때는 브레이스 표기

  import { add, sum } from './utils';
  // 여러개 갖고올거야

  import { add as Add } from './utils';
  // alias 별명. add라는게 이미 import 시키는 파일에 존재하면 as 뒤에 별명 붙혀서 사용

  import Add from './utils';
  // 기본적으로 내보내는 함수 1개일 때. export 할 때는 export default 로 하고 브레이스 없이 바로 별명 붙혀서 import 시킴.

  import * as name from './utils';
  // 예를 들면 15개의 모듈이 name으로 내보내져서 methods사용하듯이 사용하면 됌. name.function 어쩌고~

  import name from 'react';
  // npm에서 다운로드 받으면 node_modules 폴더가 만들어지는데, 경로 지시자가 없을 경우 바로 node_modules 폴더에서 찾아옴.

import React from 'react';
import ReactDOM from 'react-dom';

// 1. reactDOM이 제공해주는 render함수를 이용해서 가상돔 만들기.
ReactDOM.render(React.createElement('h1', null, 'hello'), 
  document.querySelector('#root')
) // 버츄얼 돔 받기
// react가 이 virtal DOM을 real DOM으로 바꿀텐데..
// 근데 이렇게 쓰면 번거로움

// 2. 일반 html을 반환하는 function은, babel이 알아서 리액트에 맞는 돔으로 바꿔줌.
function Hello(){
  return <h1>Hello? 안녕하세요?</h1>;
}

// 3. 그래서 이런 식으로 가능하다~ 
ReactDOM.render(<Hello></Hello>, document.querySelector('#root')); 

  function App(){
    return (
      <div>
        <Title></Title>
        <Contents></Contents> 
        <br></br> 
      </div>
    )
    //리액트가 제공하는 html components는 대문자가 아니라 소문자로 작성한다. 사용자 컴퍼넌트는 대문자로 사용한다.

    // br단독태그라고 해도 닫히는 태그를 작성해줘야한다. 아니면 <br /> 이렇게라도 써야한다.
  }

function Title(props){
  return <h1>{props.title}</h1>;
}

// vue가  이렇게 감싼 것처럼 {} 이렇게 감쌈. 문자열이 아니라는걸 구분하기 위해서..

// style줄때 더블브레이스가 -> 문자열 말고 js 쓸꺼야. 그리고 전달해주는건 객체야 해서 

import React from "react";

// 상태값을 가져야할 때 형식
export default class ColorTitle extends React.Component {
  // react는 상태를 가지기 위해서 생성자를 만듬.
  const

  onChangeColor() {
    console.log("click h1");
  }

  // 이런 형식일 때 지켜야하는 약속. 규칙. render 함수
  render() {    
    const colors = this.props.color.split(",");
    const styles = {
      color: colors[0],
      fontSize: 20
    };

    return (
      <h1 style={styles} onClick={this.onChangeColor}>
        {this.props.title}
      </h1>
    );
  }
}