如何简单使用react,以及react的两种写法

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，由 Facebook 开发，用于构建Instagram的用户界面。

React 可以使用两种主要方式：

1. 类组件：使用 ES6 类和 React 组件一起工作。
2. 函数组件：使用纯函数和 React 组件一起工作。

下面是如何在 React 中创建一个简单的 Hello World 应用程序的示例。

首先，你需要安装 Node.js 和 npm。然后，你需要安装 create-react-app，这是一个用于设置新 React 项目的脚手架工具。

npm install -g create-react-app

然后，你可以使用以下命令创建一个新的 React 应用程序：

create-react-app my-app

然后，你可以进入新创建的应用程序的目录，并启动它：

cd my-app
npm start

现在，你可以开始编辑 src/App.js 文件，来创建你的第一个 React 组件。

1. 类组件的写法：

import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}
 
export default App;

2. 函数组件的写法：

import React from 'react';
 
function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}
 
export default App;

在这两种写法中，我们都创建了一个简单的 React 组件，它在页面上显示 "Hello, World!"。

类组件和函数组件之间的主要区别在于它们的设计模式。类组件是使用 ES6 类来创建的，它允许你使用更多的特性，如组件的内部状态和生命周期方法。而函数组件是一个纯函数，它更简单，更轻量，更易于理解，并且在大多数情况下，更容易使用。