1. 소스 수정 방법
create-react-app 기본 구조
src > index.js 기본 입구 파일
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.js는 import './index.css'; 의 스타일을 적용 받음
element id가 root인 태그의 안에 사용자 정의 컴포넌트인 App을 랜더링 시킴
App 은 import App from './App'; App.js안의 내용임
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
Hello React !
</div>
);
}
export default App;
App.js는 import './App.css'; 의 스타일을 적용 받음
2. 배포
npm start는 개발 환경에 최적화됨 (public)
npx run build는 빌드가 되면서 배포에 최적화된 build가 생성됨 (build)
npx serve -s build
'Dev > React' 카테고리의 다른 글
리액트 react state (1) | 2023.11.12 |
---|---|
리액트 react 이벤트(event) (0) | 2023.11.11 |
리액트 react 속성(props) (0) | 2023.11.11 |
리액트 react 컴포넌트 만들기 (0) | 2023.11.11 |
리액트 react 개발환경 기본 세팅 (0) | 2023.11.11 |