没有 JSX 的 React.js

JSX：考虑以下代码片段，

const sample = Greetings
;

上面的代码片段有点像 HTML，它也使用了一个类似 JavaScript 的变量，但它既不是 HTML 也不是 JavaScript，它是 JSX。 JSX 基本上是常规 JavaScript 的语法扩展，用于创建 React 元素。然后将这些元素渲染到 React DOM。每个 JSX 元素只是为了轻松使用 React 并以更少的工作调用 React.createElement(component, props, ...children)。因此，使用 JSX 完成的任何事情也可以使用纯 JavaScript 完成。

大多数人使用 JSX 和 react，但这需要 Babel 将 ES6 代码转换为与浏览器兼容的代码。这意味着我们需要一个类似 webpack 的东西。如果我们不使用 JSX，那么我们不必担心这一点。

以 JSX 为中心的 React 应用程序的无 JSX 方法：对于中型或更大的项目，建议坚持使用 JSX。它仍然有助于理解幕后发生的事情。对于较小的 React 项目，您不想添加复杂的构建工作流程，或者对于多页面应用程序，您可以考虑使用 JSX-less 版本。

示例 1：在没有 JSX 的情况下使用 CDN（没有 Node）使用 React。以下是一个简单的 Html 代码，用于在没有 JSX 的情况下使用 React 打印Hello World 。

index.html

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
  
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

输出：

上述程序的输出

示例 2：在应用程序中使用没有 JSX 的 React。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app rwjsx
```
第 2 步：创建项目文件夹即rwjsx后，使用以下命令移动到该文件夹：
```
cd rwjsx
```

项目结构：它将如下所示。

项目结构

现在在所有导入语句之后在src文件夹中的index.js文件中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
  
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：