React.js 的 render() 方法

React.js 库就是将应用程序拆分为多个组件。每个组件都有自己的生命周期。 React 为我们提供了一些内置方法，我们可以在组件生命周期的特定阶段覆盖这些方法。

在基于类的组件中，render() 方法是所有内置生命周期钩子/方法中唯一必需且最重要的方法。在 render() 方法中，我们可以读取props 和 state并将JSX 代码返回到应用程序的根组件。在 render() 方法中，我们不能改变状态，也不能产生副作用（比如向 webserver 发出 HTTP 请求）。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下命令创建一个 React 应用程序。

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

  cd foldername

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

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { Component } from 'react';
export default class App extends Component {
  state = {
    PawriDays: [
      { id: '123s', Day: 'Monday' },
      { id: '234r', Day: 'Saturday' },
      { id: '12d5', Day: 'Sunday' }
    ]
  }
  
  render() {
    const PartyDays = this.state.PawriDays.length
    const style = {
      'textAlign': 'center',
      'color': 'green'
    }
  
    // Return JSX code
    return (
      

        
I am User
        
 We party: {PartyDays} days a week 
      
    );
  }
}

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

npm start

输出：