7강. JS 코딩하는 법
//index.html
<div id="root"></div>
//index.js
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<APP/>
<?React.StrictMode>
);
//App.js
//function type
import React from 'react';
import './App.css';
function App(){
return(
<div className = "App">
Hello, World!
</div>
}
}
export default App;
//class type
import React, {Component} from 'react';
import './App.css';
class App extends Component{
render(){
return (
<div className = "App">
Hello, World!
</div>
);
}
}
export default App;
8강. CSS 코딩하는 법
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; //css를
import App from './App'; //App.js를 <App>으로 import ???????
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
9강. 배포하는 법
create-react-app 을 실행함으로써 실행되는 파일의 용량
해결 :
npm run buildbuild내 html은 공백을 제거한 min 파일로 생성됨, 용량 절약 -> 서비스에 사용
npm을 통해 간단한 서버 설치
npm install -g serve //npm을 통한 간단한 웹서버 설치 가능npx serve -s build //설치한 serve라는 웹서버을 root로 실행(1회)
11-12강. 컴포넌트 만들기
//index.html
<html>
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
<nav>
<ul>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ul>
</nav>
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</body>
</html>import React, { Component } from 'react';
import './App.css';
class Subject extends Component{
//js최신문법 - class 내에서는 function 생략 가능
//기존 : function render(){..}
render(){
return(
//component는 반드시 하나의 최상위태그만 사용 가능
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class TOC extends Component{
render(){
return(
<nav>
<ul>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ul>
</nav>
);
}
}
class Content extends Component{
render(){
return(
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
);
}
}
//jsx - (create-react-app) 이 ->js로 컨버팅
class App extends Component{
render(){
return(
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
반응형
'REACT > [boostcourse] 리액트&리덕스' 카테고리의 다른 글
| 웹 프론트엔드 시작하기 - 4. 리액트의 이벤트 (0) | 2022.08.09 |
|---|---|
| 웹 프론트엔드 시작하기 - 3. state와 props (0) | 2022.08.07 |
| 웹 프론트엔드 시작하기 - 1. 리액트의 시작 (0) | 2022.08.05 |