천천히 알아보는 코딩공부

[React] Component 본문

React/기초

[React] Component

고기고기물고기 2022. 7. 5. 11:14

https://goddaehee.tistory.com/299

 

[React] 4. React 컴포넌트(1) - 컴포넌트란?

4. React 컴포넌트(1) - 컴포넌트란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트에 대한 기본 내용 ] 입니다. : ) 리액트 공식 문서, 자습서에서 함수형 컴포넌트, 클래스형 컴포넌

goddaehee.tistory.com

 

import Header from './head';
import Side_bar from './side_bar';
import Index_main from './index_main';
import Footer from './footer';
import React from 'react';
import ReactDOM from 'react-dom/client';

import '../assets/css/style.scss'

//ReactDOM.render(<Head />, document.getElementById('head'));toggle-sidebar-btn
//ReactDOM.render(<Side_bar />, document.getElementById('side_bar'));

const head = ReactDOM.createRoot(document.getElementById("head"));
head.render(
    <React.StrictMode>
      <Header />
    </React.StrictMode>
  );

const side_bar = ReactDOM.createRoot(document.getElementById("sidebar"));
side_bar.render(
    <React.StrictMode>
      <Side_bar />
    </React.StrictMode>
  );
const main = ReactDOM.createRoot(document.getElementById("main"));
main.render(
    <React.StrictMode>
      <Index_main />
    </React.StrictMode>
  );
const footer = ReactDOM.createRoot(document.getElementById("footer"));
footer.render(
    <React.StrictMode>
      <Footer />
    </React.StrictMode>
  );
저작자표시 (새창열림)

'React > 기초' 카테고리의 다른 글

[React] Webpack 이미지 불러오기  (0) 2022.07.06
[React] Webpack CSS 설정 추가하기  (0) 2022.07.05
react-bootstrap 설치 방법  (0) 2022.07.05
React Babel 바벨 프로젝트 생성  (0) 2022.07.04
vscode 로 React 환경구성하기  (0) 2022.07.01
'React/기초' Related Articles more
Comments