【React】入门学习篇

React 哲学 从设计稿开始 假设我们已经有了一个返回 JSON 的 API，以及设计师提供的组件设计稿。如下所示： 该 JSON API 会返回以下数据： 一.划分组件层级 FilterableP

组合 vs 继承 参考文档：https://react.docschina.org/docs/composition-vs-inheritance.html 有些组件无法提前知晓它们子组件的具体内容。

状态提升 参考文档：https://react.docschina.org/docs/lifting-state-up.html 通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近

表单 参考文档：https://react.docschina.org/docs/forms.html 在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素

列表 & Key 参考文档：https://react.docschina.org/docs/lists-and-keys.html 通过使用 {} 在 JSX 内构建一个元素集合，使用 Javasc

条件渲染 参考文档：https://react.docschina.org/docs/conditional-rendering.html html代码 JS代码 元素变量 可以使用变量来储存元素。

参考文档：https://react.docschina.org/docs/handling-events.html React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 J

封装真正可复用的 Clock 组件。它将设置自己的计时器并每秒更新一次。 参考文档：https://react.docschina.org/docs/state-and-lifecycle.html

组件 & Props React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。 函数组件与 class 组件 定义组件最简单的方式就是编写 JavaScript 函数：

元素渲染 官方文档：https://react.docschina.org/docs/rendering-elements.html 从官方提供的文档介绍及GIF图来看，React DOM 只会更新实

参考链接：https://react.docschina.org/docs/introducing-jsx.html JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使

上一篇文章已经尝试使用了React的Button组件，这一篇文章将开始学习征程第一步 Hello World！ 官方文档：https://react.docschina.org/docs/hello-

React是什么？ react.docschina.org/docs/gettin… React 是一个用于构建用户界面的 JavaScript 库。流行的 React 工具链，它们有助于完成如下任务