没有 JSX 的 React.js

大家都知道，React.js 是一款非常流行的前端 JavaScript 框架，用来构建用户界面和 UI 组件。其最大的特点就是使用 JSX 语法，将 HTML 结构和 JavaScript 代码混合起来写，方便开发人员快速构建复杂的 UI 界面。不过，有没有想过在没有 JSX 的情况下，我们该如何使用 React.js 来创建界面呢？

什么是 JSX？

JSX 是一种 JavaScript 的语法扩展，它允许开发人员将 HTML 标签、属性和 JavaScript 代码直接混合在一起。这种混合并不是 HTML 和 JavaScript 的简单拼接，而是一种全新的独立语法，最终会被转换成纯 JavaScript 语法。以下是一个简单的 JSX 代码示例：

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

在这个例子中，<h1>Hello, world!</h1> 就是 JSX 的部分。在 JavaScript 中，我们其实不能直接使用尖括号来表示 HTML 标签，但在 React 中，这种写法被允许，并且被解释成一个 JavaScript 对象，最终被用来渲染页面。

使用纯 JavaScript 创建 React 组件

如果要在没有 JSX 的情况下使用 React，我们需要手动创建 React 组件，并使用纯 JavaScript 代码编写界面。下面是一个简单的例子：

function App(props) {
  return React.createElement('div', null,
    React.createElement('h1', null, `Hello, ${props.name}!`),
    React.createElement('p', null, 'Welcome to React.js')
  );
}

在这个例子中，我们手动创建一个名为 App 的函数组件，并使用 React.createElement 方法来创建组件的所有元素。这个方法需要传入三个参数：

1. 元素的类型，可以是字符串或类组件。
2. 元素的属性，可以是一个对象或 null。
3. 元素的子元素，可以是一个数组或 null。

使用这种方式创建 React 组件可能会显得比较繁琐，但是它也有一些优点。首先，由于我们只是使用了简单的 JavaScript 代码，所以不需要配置任何编译器或构建系统。其次，这种方式使得我们可以更加灵活地控制组件的渲染逻辑，而不是受限于 JSX 的语法限制。

使用函数式编程创建 React 组件

除了以类、对象、函数等方式创建 React 组件，还有一种比较流行的方式——函数式编程。下面是一个例子：

const App = (props) =>
  h('div', null,
    h('h1', null, `Hello, ${props.name}!`),
    h('p', null, 'Welcome to React.js')
  );

ReactDOM.render(h(App, { name: 'John' }), document.getElementById('root'));

在这个例子中，我们使用了一个名为 h 的函数来创建 React 元素。这个函数会将元素的类型、属性和子元素作为参数传入，并返回一个 React 元素。在这种方式下，我们需要使用另外一个库，例如 hyperscript，来帮助我们创建元素。这种方式比较适合使用函数式编程风格的开发人员，可以让我们更好地组合和操作各种元素。

总的来说，React.js 框架不仅仅只是 JSX 的语法糖，也可以通过纯 JavaScript 或者函数式编程的方式来创建组件。这种方式虽然不如 JSX 方便，但是它的灵活性和可扩展性具有很大的优势，适合有一定编程基础的开发人员使用。