1. 여러가지 패키지들을 설치한다.
yarn add styled-components
yarn add firebase
yarn add fuse.js
yarn add normalize.css대표적인 CSS-in-JS 라이브러리
https://styled-components.com/
구글 Firebase
https://firebase.google.com/?hl=ko
클라이언트 측에서 사용되는 가볍고 강력한 텍스트 검색 라이브러리
https://fusejs.io/getting-started/installation.html
웹 페이지의 스타일을 표준화시키는 CSS 리셋 스타일시트
https://github.com/necolas/normalize.css
2. 기본 튜토리얼 시작 코드
src/app.js
export default function App() {
return (
<p>hello</p>
);
}src/index.js
import React from 'react';
// import ReactDOM from 'react-dom/client';
import { render } from 'react-dom';
import App from './app';
// ReactDOM.render(<App />, document.getElementById('root'));
render(<App />, document.getElementById('root'));src/index.js(리액트 18버전)
import React from 'react';
import App from './app';
import { createRoot } from 'react-dom/client';
const rootElement = document.getElementById('root');
createRoot(rootElement).render(<App />);public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Netflix</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>3. hello 출력해보기
yarn start
여기까지 튜토리얼 영상 23분25초 내용
'Dev > React 넷플릭스클론' 카테고리의 다른 글
| 넷플릭스 클론코딩 6 global-style, eslint (0) | 2023.09.06 |
|---|---|
| 넷플릭스 클론코딩 5 Creating the Jumbotron component (0) | 2023.09.06 |
| 넷플릭스 클론코딩 4 Creating files/folders (0) | 2023.09.06 |
| 넷플릭스 클론코딩 2 (설치) (0) | 2023.09.06 |
| 넷플릭스 클론코딩 1 (개요) (0) | 2023.09.06 |
