westagram 기준
- Main.Html
1) 상단에 import React from "react";
import "./Main.css";
2) class Main extends React.Component{
render(){
return(
)}}
3) return 안에 Main.js에 Main.html에 body tag를 복사 (body 태그는 미포함)
4) class -> className 으로 변경하기 (구글 변환 사이트 이용)
5) 맨 상단에는 div 또는 <> 태그 필수
6) img file -> src="/images/오구.png", art 기재
7) 맨 마직막에 export default Main;
- 파일이름 첫글자 대문자, 파일이름과 같은 이름 전부 변경
- css에서는 public 폴더에 접근하는게 불가능 하므로 background-image에 활용해야하는 이미지들은 src/assets/iamges/ 디렉토리에서 관리
- export 하는 이유:
다른 js에서 해당 컴포넌트를 사용 할 수 있음
index.js
import React form 'react';
import ReactDOM from 'react-dom';
import Login from "./pages/Login/Login";
import Main form "./pages/Main/Main";
ReactDOM.render(< Main/>, document.getElementById('root'));
index.html (공통으로 들어가는 태그)
< html lang="en">
< head>
< meta charset="utf-8" />
< meta name="viewport" content="width=device-width, initial-scale=1" />
< link rel="stylesheet" href="common.css"> // Login과 Main의 공통 css
< script src="https://kit.fontawesome.com/1863c979f1.js" crossorigin="anonymous">< /script>//font link
< title>westagram< /title>
< /head>
< body>
< div id="root">
< /div>
< /body>
< /html>
:D