- Objective:
- Breadcrumb:
# 概念阐释
React 是由数十个或上百个组件组成的，每个组件都是一个 js 文件，它们定义了应用程序的一小部分界面和功能。组件之间的交互方式最终展现了网页的页面。
# 实例
## 返回另一个组件
在本例中，picture 作为另一个组件，在 profile 中返回
```jsx
import React from 'react';
function Picture() {
return <img src="https://content.codecademy.com/courses/React/react_photo-octopus.jpg" />;
}
function Profile() {
return (
<>
<Picture />
<h1>Name: Octavia</h1>
<h2>Species: Octopus</h2>
<h2>Class: Cephalopoda</h2>
</>
)
}
export default Profile;
```
在本例中，NavBar 是另一个页面的组件，在这个页面中被导入
```jsx
import React from 'react';
import NavBar from './NavBar'
function ProfilePage() {
return (
<div>
<NavBar />
<h1>All About Me!</h1>
<p>I like movies and blah blah blah blah blah</p>
<img src="https://content.codecademy.com/courses/React/react_photo-monkeyselfie.jpg" />
</div>
);
}
export default ProfilePage;
```
# 相关内容
React 的优势之一是它的组件化架构，这使得代码更易于维护和重用，同时也支持更高效的更新和渲染过程。
组件之间的交互是通过状态（[[state]]）和属性（[[React props]]）来管理的。状态是组件内部的数据，可以在组件内部改变，而属性则是从父组件传递到子组件的不变数据。这种状态和属性的传递机制允许组件间有效地交流和共享数据。
# 参考资料
- [review](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-components-interacting-218cf398-22f2-4666-97bc-52d6789f0a78/lessons/components-render-each-other/exercises/review)
- [NavBar](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-components-interacting-218cf398-22f2-4666-97bc-52d6789f0a78/lessons/components-render-each-other/exercises/component-in-render-function-apply)