1. 설치 및 Component

npm i -g create-react-app 를 통해 어디서나 react를 실행 할 수 있도록 만들어 준뒤

react-app 이라는 폴더를 만들고 들어가서

create-react-app . 를해주면 여러 파일들이 설치가 자동적으로 된다.

npm start를 해주면 react 웹브라우저가 실행이 되는데.. 이것만으로도 뭔가 개발을 한 것 같아 뿌듯해진다.

 

react는 사용자 지정 태그 를 만들어서 root라는 아이디를 가진 div에 집어 넣음으로써 만들어지는 느낌인 것 같다.

 

그 사용자 지정 태그 << 라는 것은 COMPONENT 라고 하는데 이 것이 리액트에서 정말 중요한 부분이다.

 

index.js에

 

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

 

이렇게 있다면 root라는 ID를가진 요소에 App을 넣어라!

그 App.js에 가보면

 

class Subject extends Component {

  render() {

    return (

      <header>

        <h1>m to the a n i a c </h1>

      </header>

    );

  }

}

 

class App extends Component {

  render() {

    return (

      <div className="App">

        <Subject></Subject> <<이렇게 클래스를 적용

      </div>

    );

  }

}

 

export default App;

Subject를 포함하고 있는 App이 export 되는 것을 확인 할 수 있다. 

따라서 div#root > div.App > header 이렇게 포함이 되어진다.

정리정돈의 도구이다 !

 

실제 자바스크립트는 아니고 유사 자바스크립트라고 할 수 있다. 

왜냐하면 <div>와 같은 태그는 자바스크립트에서는 사용할 수 없기때문

"<" 이렇게 일일이 안해줘도된다

JSX -> HTML로 자동적으로 바꿔줌