[react]基本アプリケーション#2の表示
1. /public/index.html
indexではbodyに次のタグが表示されます.
<!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>TITLE</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><div id = "root"></div>roottagに何が含まれているかを見てみましょう.
ファイルを一つ一つ掘り起こす!
2. /src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// 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();最初の値:
2番目の値のドキュメント.getElementById('root')
見てみましょう.
renderは画面に出力するために使用され、appはコンポーネントです.
document.getElementById(「root」)は、id属性値がrootのタグセレクタである.
すなわち,id属性値がルートのタグにAppコンポーネントの内容を送信する.
index.「jsファイルの上部を表示すると、次のコードが表示されます.」アプリケーションファイルのアプリケーションコンポーネントを取得します.
import App from './App';3. App.js
やっとスクリーンで見た要素を見つけることができます.
比較して、感じを見つけます.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Appというコンポーネント、indexが存在します.jsにインポート
index.jsにappコンポーネントをインデックスします.htmlファイルのid=「root」に
確認できます.
Reference
この問題について([react]基本アプリケーション#2の表示), 我々は、より多くの情報をここで見つけました https://velog.io/@chajuhui123/React-기본-앱-살펴보기-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol