React 中最基础的 JSX 语法

这个有趣的标签语法既不是字符串也不是HTML。它被称为JSX,它是JavaScript的语法扩展。我们建议将它与React一起使用来描述UI应该是什么样子。JSX可能会提醒您一种模板语言,但它具有JavaScript的全部功能。

上面的引用是 React 官方文档里对 JSX 语法的描述,今天就介绍一下 JSX 语法。

使用的还是之前的项目文件和代码,打开程序的入口文件 index.js 文件。

./src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

在最后一行的 rander 方法中,第一个参数是 <App /> ,跟我们平时写的 html 标签差不多的代码块,它的意思是使用 App 这个组件。

我们打开 App.js 这个文件,这里面是 App 组件的主要内容。这个组件渲染的内容,是由下面的 rander 函数返回的结果所决定的。

./src/App.js:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

上面 rander 函数返回了一个 h1 标签,标签里的内容是 Hello World

正常情况下,我们的标签是写在 html 文件里的,现在我们把这种标签写在了 js 文件里。在 React 中, js 文件中写的这些 html 标签就是我们的 JSX 语法。

React 中,我们不仅仅只是可以用 html 现有的标签,还可以使用自己定义的标签。

在一开是我们看的 index.js 文件中,有一个 <App /> 的语法,这个就是我们自定义的标签。在 JSX 语法中,如果我们要使用自己创建的组件,我们直接通过这种标签形式来使用我们定义的组件名。

import App from './App'; 这句语句中 import 后面的 App 就是我们定义的标签名。

特别注意,我们定义的标签名是有特定的规则的,必须是大写字母开头。

React 中,当你看到大写字母开头的标签,你就会知道它是一个组件,全是小写字母的标签就是 html 中所使用的标签。

JSX 最基础的语法就这些,希望对大家有帮助。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • React简介 (1)简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc...
    鱼鱼吃猫猫阅读 1,737评论 1 6
  • [toc] REACT react :1.用来构建用户界面的 JAVASCRIPT 库2.react 专注于视图层...
    拨开云雾0521阅读 1,550评论 0 1
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,170评论 2 35
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,633评论 1 13
  • 放眼望去,少了城市的喧嚣,生机盎然,一片绿意。在这暴雨,暴晒来回切换模式里,万物以最快速度生长着。
    d380cf993c0a阅读 127评论 0 0

友情链接更多精彩内容