- Objective:
- Breadcrumb:
# 概念阐释
- `App.js`
- `index.js`
- `index.html`
- `MyQuote.js` : 文件夹命名与函数自己命名一致，函数组件命名遵循**PascalCase**的写法。函数组件中的函数仍然与 JS 函数命名规则一致。
- `QuoteMaker.js`
# 实例
```jsx
//App.js
import React from 'react';
import MyQuote from './MyQuote'
function App() {
return (
<MyQuote /> // 组件
);
};
export default App;
```
- App.js 是应用程序的顶层文件
- 导入 React
- 导入自定义的其他 js 文件
- 导出 App 函数组件
- 函数中return 返回的是自定义的 js 文件
- 最终渲染的框架页面不一定在 `App.js` 文件中。在 React 应用程序中，`App.js` 通常是应用程序的主入口点，它包含了应用程序的主要结构和路由。
```jsx
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(
document.getElementById('app')
).render(<App />);
```
- index.js是所有文件的入口点，并且连接 HTML，得到渲染效果
- 如果导入的是`import {createRoot} from 'react-dom/client';`，那么只写 `createRoot()`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="app">
</main>
<script src="https://content.codecademy.com/courses/React/react-18-course-bundle.min.js"></script>
<script src="/index.compiled.js"></script>
</body>
</html>
```
- HTML 文件
```jsx
//MyQuote.js
import React from 'react';
function MyQuote() {
return (
<blockquote>
<p>
What is important now is to recover our senses.
</p>
<cite>
<a target="_blank"
href="https://en.wikipedia.org/wiki/Susan_Sontag">
Susan Sontag
</a>
</cite>
</blockquote>
);
};
export default MyQuote;
```
```jsx
import React from 'react';
function QuoteMaker() {
return (
<blockquote>
<p>
The world is full of objects, more or less interesting; I do not wish to add any more.
</p>
<cite>
<a target="_blank"
href="https://en.wikipedia.org/wiki/Douglas_Huebler">
Douglas Huebler
</a>
</cite>
</blockquote>
);
};
export default QuoteMaker;
```
- 自定义 js 文件一般包括 3 个部分
- 导入 React
- 函数组件
- 导出函数组件
# 相关内容
# 参考资料
- [Use Multiline JSX in a Component](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-react-components-860d3f06-e0ad-456f-b7fa-d5aef4dd565d/lessons/react-components-advanced-jsx/exercises/render-multiline-jsx)