리액트의 첫 화면의 시작은 src 폴더안의 index.js 이다.
변수 root에 App을 렌더링하고 있다.
렌더링하고있는 './ App.js'로( .js가 생략되어있는것) 이동하여 수정하자
return값으로 태그를 내보내고있는데, " "감싸져있지않다. 이말은? 문자열이 아니라는것. 결국 태그가 아니다.
jsx 객체이다.
수정후 npm start
수정된 화면이 나오는데 id="root" div 안에 수정한 App.js가 보인다.
root는 어디있는가하면 public안에 index.html 안에 있다.
App.js에 사용자정의 태그를 사용하여 좀 더 풍성하게 만들어보자
규칙이 있는데, return값은 태그 하나로 묶을것, 함수명은 대문자를 사용할것.
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();import './App.css';
function App() {
return (
<div>
<Header></Header>
<Contents</Contents>
<Article></Article>
</div>
);
}
export default App;<!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" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>반응형
'FRAME WORK > REACT' 카테고리의 다른 글
| React ) 리액트로 사업자번호 유효검사 (2) | 2024.09.25 |
|---|---|
| React ) state (0) | 2024.09.23 |
| React ) 컴퍼넌트 (0) | 2024.09.20 |
| React ) 리액트 설치 (0) | 2024.09.20 |
