- Objective: - Breadcrumb: # 概念阐释 组件是 React 中的最小可重用代码块。 # 实例 在网页中，我们可以创建搜索组件、导航栏组件、仪表盘组件等等，也可以用[[React 组件 函数组件]]创建新的自定义组件。 - import [[React 组件 React]] - import [[React 组件 ReactDOM]] # 相关内容 ## React文件 - 在 React 应用程序中通常有两个文件： - `App.js`是应用程序顶层文件 - `index.js`是入口点 ## Importing and Exporting React 组件 ```jsx //在 App.js文件中 import React from 'react'; function MyComponent() { return <h1>Hello world</h1>; } export default MyComponent; ``` ```jsx //在 index.js文件中 import React from 'react'; import ReactDOM from 'react-dom/client'; import MyComponent from './App';//这里的 App 没有.js ``` ## React组件渲染 渲染的代码在`index.js`页面中添加，实现渲染首先要引入`react-dom`library中的`.creatRoot()`和`.render()`两个方法。 - `.creatRoot()`方法用于告诉 React 内容放在哪里 - `.render()`方法用于渲染内容 ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import MyComponent from './App'; ReactDom.creatRoot(document.getElementById('app')).render(<MyComponent />); ``` - `document.getElementById('app')` 从 **index.html** 返回一个 DOM 元素。 - `.createRoot()` 接收 DOM 元素作为第一个参数，并为其创建根。 - `.render(<MyComponent />);` React 将在根目录中显示 `<MyComponent />` 并使其出现在屏幕上。 和[[JSX 渲染]]的不同是： - 直接引入`.createRoot()`方法 - `.render()`中的变量名写法 # 参考资料 - [Importing and Exporting React Components](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/your-first-react-component/exercises/react-101-importing-and-exporting-react-components) - [[js modules 导入和导出]] - [[js modules 默认导出和导入]]