dir.by  
  Search  
Programming, development, testing
React
Why don't they use class Component, but you have to use a regular function in React app?
  Looked at 611 times    
 Why don't they use class Component, but you have to use a regular function in React app? 
last updated: 19 February 2025
An application on React consists of components.

Previously, class Component was used.
class Component had a method render for rendering the application.

Right now, it is recommended to create new React applications using the usual functions (this is a functional component).
Example
When we click on the Login button, my method onSubmit will be called.
My method onSubmit shows a window with the information you entered.
 
Using Component is a bad rule.
Using function is a good rule.
File main.js
  JavaScript  
var React = require("react");
var ReactDOM = require("react-dom");
import { Component } from "react";

class MyApp extends Component {

     onSubmit(e) {

          alert("Hello! " + e.target.myName.value + e.target.myAge.value);
     }

     render() {
          return (
               <div>
                    <h2> Welcome </h2>
                    <form onSubmit={ this.onSubmit }>
                         <div>
                              <input type="text" name="myName" />
                         </div>
                         <div>
                              <input type="text" name="myAge" />
                         </div>
                         <div>
                              <button>Login</button>
                         </div>
                    </form>
               </div>
          );
     }
}

ReactDOM.render(
     <MyApp ></MyApp>,
     document.getElementById('my_container'));
File main.js
  JavaScript  
var React = require("react");
var ReactDOM = require("react-dom");

 
function MyApp() {

     const onSubmit = (e) => {

          alert("Hello! " + e.target.myName.value + e.target.myAge.value);
     }

 
     return (
          <div>
               <h2> Welcome </h2>
               <form onSubmit={ onSubmit }>
                    <div>
                         <input type="text" name="myName" />
                    </div>
                    <div>
                         <input type="text" name="myAge" />
                    </div>
                    <div>
                         <button>Login</button>
                    </div>
               </form>
          </div>
     );
 
}

ReactDOM.render(
     <MyApp ></MyApp>,
     document.getElementById('my_container'));
 
← Previous topic
Creating new web application with React using Visual Studio Code. Use: Node.js + Webpack (collect all js files, libraries into one js file) + Babel (extended js functionality with jsx and classes) + React (write our component)
 
Next topic →
Create a web application "Login form and send a post request" with React | Visual Studio Code
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
Новое приложение React
Вариант 1
Создаем новое web приложение с React в текстовом редакторе. Библиотеку React не скачиваем, библиотеку React берем из CDN (ссылаемся на библиотеку React)
Вариант 2 (для меня лучший)
Creating new web application with React using Visual Studio Code. Use: Node.js + Webpack (collect all js files, libraries into one js file) + Babel (extended js functionality with jsx and classes) + React (write our component)
Описание React
Why don't they use class Component, but you have to use a regular function in React app?
Examples
Create a web application "Login form and send a post request" with React | Visual Studio Code
WWW sites to explore React
Sites to explore React

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика