Как код в App.css включается при экспорте приложения по умолчанию?

Question

Я новичок в реагировании (также на Javascript), у меня возникли сомнения относительно вывода при рендеринге React Component-> Appкода шаблона, созданного с помощью create-response-app.
Вот App.js:

import React from "react";
import "./App.css";

export function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

export default App;

App.css:

.App {
  text-align: center;
  color: blue;
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


serviceWorker.unregister();

Система файловых каталогов:

.
├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── serviceWorker.js
    └── setupTests.js

В файле App.js, export default App; экспорт App который затем импортируется в index.js который использует ReactDOM.render оказать App. Мне трудно понять, как код вApp.css используется / импортируется в index.js? Только в конце концовAppэкспортируется (по умолчанию), который явно не использует какой-либо код CSS внутри него. Я что-то упускаю или неправильно интерпретирую?
Спасибо за прочтение.
Изменить: в
частности, я хочу знать, как React применяет CSS (которые импортируются) к компонентам, определенным в скрипте?

Answer 1

Переходя к вашему заявлению:

I am having difficulty in understanding how the code in App.css gets used/imported in index.js?

Собственно, вы хотите знать, как код CSS, написанный на App.css применяется к AppСоставная часть. Ответ прост: это потому, что вашApp.js использует этот файл CSS, так как App.css импортируется в ваш App.js файл

`import "./App.css";`

Весь CSS сначала применяется к App Компонент и только при импорте и рендеринге App в index.js с помощью

ReactDOM.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>,
 document.getElementById('root')
);

React отображает ваш App компонент вместе со всем CSS, который предоставляется в App.css.

Теперь перейдем к другому вашему положению:

Afterall only App is getting exported (as default) which is not visibly using 
any CSS code inside it.

Я должен сказать, что это неправильное утверждение, App Компонент использует CSS, написанный на App.css. В вашем JSX вы вернули следующее:

<div className="App">
  <h1>Hello</h1>
</div>

Вы видите className="App", так App вот твой class selector и CSS для этого таков.

.App {
  text-align: center;
  color: blue;
}

Попробуйте использовать здесь любое другое свойство CSS, и вы увидите, как отражаются изменения.