[노마드코더/ReactJS로 영화 웹 서비스 만들기]2.0 Creating your first React Component

2.0 Creating your first React Component

• 리액트 : 개발자가 쓰는 모든 요소들을 생성
  • Java Script로 만들고 HTML에 넣음
  • 모든 요소들을
    사이에 넣음
  • Virtual document object -> react는 virtual 이여서 빠름
  • npm start 를 콘솔에서 계속 실행해야 서버가 실행 가능

• componenet : HTML을 반환하는 함수
  ( react는 componenet와 함께 동작 ,모든 것이 component)
  ex) (component의 형태)

• component를 사용해서 HTML처럼 작성하려는 경우에 필요

• HTML 과 JS 의 조합으로 jsx라고 불림 (react 사용 유일한 개념)

• potato.js

import React from "react"; //component 작성할 떄마다 써줘야함

function Potato(){
    return <h3>O love potato </h3>;
}
export default Potato; //Potato를 export 해줘야함 

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

-> react는 하나의 component만을 rendering해서 여기다가 못씀

• App.js

import React from 'react';
import Potato from "./Potato";  // ./는 같은 directory에 있다는 뜻

function App() {
return (
    <div>
    <h1>Hello !!!</h1>
    <potato />
    </div>
    );
}
export default App;

-> App.js 안에 Potato를 포함 시켜줘야함
-> component 안에는 많은 component를 넣을 수 있음