React JS index.js 파일이 id 참조를 위해 index.html에 연결하는 방법은 무엇입니까?
이 질문에 이미 답변이 있습니다.
최근에 반응을 시작했습니다.
내 index.html 에는
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
그리고 하는 index.js는 포함
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
내 의심은 내가의 index.js스크립트 태그에 언급하지 않았다는 것 입니다 index.html. 그러나 rootdiv 요소를 index.html어떻게 참조하고 있습니까? 잘 작동하는지 궁금합니다. 설명해주세요.
이 명령을 실행하여 앱을 만들었습니다.
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create-React-App 매우 흥미로운 설정입니다.
package.jsonnpm 스크립트 에서 파기 시작했습니다.start
"start": "반응 스크립트 시작"
여기에 관련 내용을 게시 할 것입니다. react-scripts아래 의 바이너리 로 이동 node_modules/.bin
합니다.
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
[require.resolve('../scripts/' + script)].concat(args),
{ stdio: 'inherit' }
);
그래서 이것은 그들이 ../scripts/폴더 내에서 스크립트를 찾고 있다는 것을 알려줍니다 .
나는 반응-스크립트 NPM 모듈로 이동 (그래서 node_modules/react-scripts)과 열 node_modules/react-scripts/scripts/start.js파일을 나는 일 이후 npm start.
이제 여기에서 내가 찾고 있던 webpack 설정을 찾았습니다.
그들은 구체적으로 node_modules/react-scripts/config/webpack.config.dev.js. 여기에 관련 내용을 게시하겠습니다.
entry: [
// Finally, this is your app's code:
paths.appIndexJs,
],
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
따라서 참조되는 paths.appIndexJs파일은 webpack 구성의 항목 파일입니다.
그리고 그들은 HtmlWebpackPlugin 을 사용 하여 경로에서 html을로드합니다 paths.appHtml.
퍼즐의 마지막 조각은 이것을 게시 한 파일에 다시 연결하는 것입니다. 관련 게시물 올리기paths.js
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
...
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveApp('src/index.js'),
...
}
따라서 애플리케이션 디렉토리 내에서
appHtml은 파일입니다. public/index.html
appIndexJs는 파일입니다.src/index.js
Your two files in question.
Wow! That was quite a journey..:P
To consolidate @Aftab Khan comments
npm start
Below adding individual links for above commands for node @8.9.4
@node_modules/react-scripts/bin/react-scripts.js >> line number 35
@node_modules/react-scripts/scripts/start.js >> line number 46
@node_modules/react-scripts/config/webpack.config.dev.js >> line number 21, 102
@node_modules/react-scripts/config/paths.js >> line number 56
'Program Club' 카테고리의 다른 글
| MockMvc를 SpringBootTest와 함께 사용하는 것과 WebMvcTest를 사용하는 것의 차이점 (0) | 2020.11.27 |
|---|---|
| Java 스트림 toArray ()는 특정 유형의 배열로 변환 (0) | 2020.11.27 |
| React Router를 사용하여 페이지를 리디렉션하는 가장 좋은 방법은 무엇입니까? (0) | 2020.11.27 |
| C #의 코드로 네트워크 설정 (IP 주소, DNS, WINS, 호스트 이름)을 어떻게 변경할 수 있습니까? (0) | 2020.11.27 |
| 동일한 폴더에서 동일한 어셈블리의 다른 버전 사용 (0) | 2020.11.27 |