chevron_left

React 实践教程

免费
第 2.4 回

教程文档

React 实践教程 - 组件 & Props

2023年12月20日
React 实践教程

组件 & Props

示例

0503fc8e-0cfb-4816-9737-23008385a9f3.png

import React, {Component} from 'react'

// 子组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 父组件
export default class App extends Component {
  render() {
    return (
      <div>
        <Welcome name="Aaron"/>
        <Welcome name="Pipi"/>
        <Welcome name="Daniel"/>
     ...

课程介绍

「长乐未央」出品的 React 开发教程。

React 是用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大,从最早的 UI 引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI,就能同时运行在服务器、浏览器和手机。

React 主要用于构建 UI。你可以在 React 里传递多种类型的参数,如声明代码,帮助你渲染出 UI、也可以是静态的 HTML DOM 元素、也可以传递动态变量、甚至是可交互的应用组件。

  1. 声明式设计:React 采用声明范式,可以轻松描述应用。
  2. 高效:React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互。
  3. 灵活:React 可以与已知的库或框架很好地配合。

适合这样的人

有一定开发基础,最好之前学过Vue的同学