React官网学习实践 - jSX简介

野性酷女 2021-06-24 16:11 486阅读 0赞

const element = <h1>Hello, world!</h1>;

这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML.  
它被称为 JSX, 一种 JavaScript 的语法扩展。  
有了这种扩展，正好符合了react的组件的使用，将每个组件封装起来，放在同一个模块中进行渲染。

> 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用`camelCase` 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。  
> 例如，`class` 变成了 [`className`][className]，而 `tabindex` 则对应着 [`tabIndex`][tabIndex].

以下尝试显示一行"hello world",

*  先时定义了一个方法:传入一个对象，然后将这个对象的第一个字符串和第二个字符串拼接返回。
 *  然后定义一个对象，注意此时的对象的赋值方式，对象后用等号，里面的字段用冒号。
 *  最后在retun里面进行对这个方法的调用，便成功的将"Hello World"输出在界面上了。

import React, { Component } from 'react';
    import './App.css';
    
    const stringHW = {
        firstString: 'Hello',
        secondString: 'World'
    }
    
    function showHelloWorld(stringHW) {
        return stringHW.firstString + " " +  stringHW.secondString;
    }
    
    class App extends Component {
        render() {
        return (
            <div>
                {showHelloWorld(stringHW)}
            </div>
        );
      }
    }
    
    export default App;

![2789632-a8bbd2db3d0b4112.png][]

[className]: https://developer.mozilla.org/en-US/docs/Web/API/Element/className
[tabIndex]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex
[2789632-a8bbd2db3d0b4112.png]: /images/20210615/41efe91ad9044d5b946e167c88830fdd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关 react学习（一）--JSX简介

由于在中国银联实习的项目要用到react，所以不得不硬着头皮把react学习一下。这是要往全栈发展吗0.0 正文：一个最简单的React例子如下，

落日映苍穹つ/ 2021年11月14日 11:52/ 0 赞/ 376 阅读

相关 React官网学习实践 - 列表 & Keys

渲染多样的组件 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number)

傷城~/ 2021年06月24日 16:11/ 0 赞/ 485 阅读

相关 React官网学习实践 - jSX简介

const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML. 它被称为 JSX,

野性酷女/ 2021年06月24日 16:11/ 0 赞/ 487 阅读

相关 React官网学习实践 - Refs & DOM

在典型的 React 数据流中, [属性（props）][props]是父组件与子代交互的唯一方式。要修改子组件，你需要通用新的 props 重新渲染它。但是，某些情况下你需要

小咪咪/ 2021年06月24日 16:11/ 0 赞/ 462 阅读

相关 React官网学习实践 - 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，

Myth丶恋晨/ 2021年06月24日 16:11/ 0 赞/ 500 阅读

相关 React官网学习实践 - React安装

1. 创建一个新的APP npm install -g create-react-app create-react-app my-app

谁借莪１个温暖的怀抱￠/ 2021年06月24日 16:11/ 0 赞/ 470 阅读

相关 React官网学习实践 - 组件&Props

组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一

Love The Way You Lie/ 2021年06月24日 16:10/ 0 赞/ 474 阅读

相关 React官网学习实践 - 状态提升

使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。我们会创建一个温度计算器来计算水是否

红太狼/ 2021年06月24日 16:10/ 0 赞/ 513 阅读

相关 React官网学习实践 - 表单

HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。例如，下面这个表单只接受一个唯一的name。 <form> <

爱被打了一巴掌/ 2021年06月24日 16:10/ 0 赞/ 489 阅读

相关 React官网学习实践 - 深入JSX

本质上来讲，JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。比如下面的代码：

小灰灰/ 2021年06月24日 16:10/ 0 赞/ 511 阅读