Hướng dẫn can you use react with python backend? - bạn có thể sử dụng phản ứng với chương trình phụ trợ python không?

Mặc dù thư viện JavaScript phổ biến nhất để tạo giao diện người dùng là React, việc học cách sử dụng thư viện này như một nhà phát triển Python có thể là một quá trình dài và khó khăn.

Mặc dù bạn có thể xem và đọc tất cả các hướng dẫn phản ứng có thể để hiểu thư viện này, nhưng nó có thể khó khăn nếu bạn không biết đường dẫn thích hợp hoặc cách tiếp cận từng bước.

Điều này là do React sử dụng các cấu trúc dữ liệu và cú pháp rất khác so với Python, điều này gây khó khăn cho các nhà phát triển Python để thích nghi.

Trong bài viết này, chúng tôi sẽ vạch ra một kế hoạch đường bộ để bắt đầu với React, cũng như các điều kiện tiên quyết cốt lõi để lặn vào React như một nhà phát triển Python. Chúng tôi cũng sẽ tạo một ứng dụng Trình quản lý liên lạc với Flask (khung web Python) và phản ứng làm ví dụ.

Trước khi bắt đầu, bạn nên có kiến ​​thức về HTML, CSS, JavaScript và Python.

Giới thiệu để phản ứng

Facebook đã tạo và duy trì thư viện JavaScript React để thiết kế giao diện người dùng. Nó đã phát triển phổ biến trong những năm gần đây do khả năng mang lại sức mạnh của chương trình phản ứng và tuyên bố cho lĩnh vực phát triển Frontend.

React cũng đã giúp dễ dàng xem xét mã giao diện người dùng và mô hình lập trình của nó khuyến khích mã mô -đun và có thể sử dụng lại.

Nó rất quan trọng để hiểu rằng React không gì khác hơn JavaScript.

React không phải là một ngôn ngữ lập trình độc lập hoặc một khung dành riêng cho miền, phải mất nhiều năm để hiểu. Nó có một API đơn giản chỉ với một vài chức năng và khái niệm để thành thạo trước khi bạn có thể sử dụng nó để tạo các ứng dụng web.

Hãy cùng tìm hiểu về một số khái niệm phản ứng sẽ rất quan trọng để hiểu trong hành trình xây dựng các ứng dụng web của bạn với React.

Các thành phần phản ứng

Các thành phần là các đoạn mã có thể tái sử dụng được khép kín. Họ hoàn thành điều tương tự như các hàm JavaScript, ngoại trừ chúng hành động độc lập và trả lại HTML.

Chúng có thể liên quan đến lập trình hướng đối tượng Python (OOP) vì cả Python và JavaScript đều thể hiện sự kế thừa của các mô hình dữ liệu.

Tuy nhiên, trong OOP, dữ liệu không giới hạn vì bất kỳ đối tượng nào có thể được tạo ra từ một lớp Python, không giống như các thành phần React trong đó dữ liệu được giới hạn trong một tập hợp các thành phần khác. Ngoài ra, các thành phần React có thể giữ dữ liệu cho trạng thái của chính họ, điều này không giống với các lớp Python.

Trong React, các thành phần có thể chia một ứng dụng web thành các phần riêng biệt với các chức năng riêng biệt. Ví dụ: bạn có thể tạo một thành phần cho tiêu đề của ứng dụng web và một thành phần khác cho menu điều hướng, sử dụng lại nó trên các trang khác trong ứng dụng của bạn.

Kiến trúc thành phần

Trong Python, không có hệ thống phân cấp đặc biệt cho cách sử dụng các lớp. Tuy nhiên, các thành phần React hoạt động trong một hệ thống phân cấp cụ thể.

Chúng tôi biết rằng chúng tôi có thể gọi và kết xuất các thành phần trong các thành phần khác. Thành phần được gọi là thành phần con, trong khi phần gọi thành phần con được gọi là thành phần cha. Đây được gọi là mối quan hệ cha mẹ và con cái.

Bạn sẽ tìm hiểu sau trong bài viết này quan trọng như thế nào khi biết kiến ​​trúc này đối với việc truyền dữ liệu giữa các thành phần.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Thành phần lớp

Thành phần lớp là một thành phần kế thừa các tính năng từ

def Header() {
  return "Hello, I am a header!";
}

Dưới đây là một ví dụ về một thành phần lớp:

class Header extends React.Component {
  render() {
    return 
Hello, I am a header!
;
  }
}

Trong thành phần lớp ở trên, chúng tôi đã bao gồm

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

Thành phần cũng yêu cầu hàm

def Header() {
  return "Hello, I am a header!";
}

Tương đương với thành phần lớp trong Python như sau:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Các thành phần chức năng

Một thành phần chức năng, như thành phần lớp, trả về HTML và hoạt động tương tự, nhưng các thành phần chức năng có thể được xây dựng với mã ít hơn đáng kể, dễ nắm bắt hơn do cú pháp đơn giản của chúng và được ưa chuộng trong hướng dẫn này:

function Header() {
  return 
Hello, I am a header!
;
}

Dưới đây là tương đương Python:

def Header() {
  return "Hello, I am a header!";
}

JSX

Mặc dù các thẻ

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

Chúng tương tự như động cơ tạo khuôn viên Python Jinja.

Có một vài khác biệt chính giữa thẻ JSX và HTML. Đầu tiên chỉ đơn giản là từ khóa

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

Thứ hai, trong HTML, chúng tôi sử dụng các chuỗi như sau để xác định các kiểu nội tuyến:

Hello

Tuy nhiên, trong JSX, chúng tôi sử dụng các đối tượng có con lạc đà:

 Hello 

Và cuối cùng, các biến có thể được thêm vào đánh dấu JSX của chúng tôi để được hiển thị bằng cách gói một biến trong:

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

Các lớp phản ứng khác có thể được tham chiếu ngoài các phần tử HTML như

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

Hello

Hello

Hello

Thành phần kiểu dáng

Có ba cách để tạo kiểu cho các thành phần phản ứng của bạn: sử dụng CSS đơn giản, kiểu nội tuyến với các đối tượng kiểu JavaScript hoặc tạo các thành phần kiểu dáng.

Sử dụng CSS đơn giản để tạo kiểu

Theo cách đầu tiên để tạo kiểu các thành phần React, sử dụng CSS đơn giản, bạn phải tạo tệp CSS thông thường và nhập nó vào thành phần React của bạn. Sau khi nhập nó, bạn phải thêm tên lớp cho các thành phần HTML hoặc JSX tương ứng của chúng cho các kiểu.

Dưới đây là một ví dụ cho kiểu tiêu đề CSS:

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

Sau đó, chúng tôi có thành phần tiêu đề:

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

Sử dụng các đối tượng kiểu JavaScript

Trong phương thức thứ hai, bạn phải xóa tệp CSS đã nhập và tạo một đối tượng có phần đệm

Hello

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

Điều đáng chú ý là bạn không cần phải cung cấp pixel làm đơn vị đệm. Theo mặc định, React biến điều này thành một chuỗi pixel. Nếu bạn muốn một đơn vị nhất định, hãy viết nó dưới dạng chuỗi. Vì vậy, ví dụ, nếu bạn muốn phần đệm là một tỷ lệ phần trăm, nó sẽ là

Hello

Sử dụng các thành phần kiểu dáng

Cách thứ ba để tạo kiểu cho các thành phần của bạn là bằng cách tạo các thành phần kiểu dáng. Trong phương pháp này, bạn phải tạo các đối tượng theo kiểu, gắn chúng và bọc các phần tử JSX của bạn.

Thành phần kiểu dáng là một gói phát triển cho React và React Native. Nó cho phép bạn sử dụng các kiểu cấp độ thành phần trong các ứng dụng của bạn và chúng tích hợp JavaScript với CSS bằng cách sử dụng một kỹ thuật được gọi là CSS-in-JS.

Các thành phần theo kiểu được xây dựng trên các mẫu mẫu được gắn thẻ, ngụ ý rằng mã CSS thực tế được viết giữa các backticks khi các thành phần tạo kiểu. Các nhà phát triển có thể sử dụng lại mã CSS của họ từ dự án này sang dự án tiếp theo là kết quả của việc này.

Khi sử dụng các thành phần kiểu dáng, không cần phải ánh xạ các thành phần được xây dựng của bạn theo kiểu CSS bên ngoài.

Bạn có thể cài đặt các thành phần theo kiểu bằng lệnh NPM bên dưới:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Dưới đây là một ví dụ về cách sử dụng chúng trong mã React của chúng tôi:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Bạn sẽ thấy rằng khi xây dựng một thành phần chức năng React, bạn có thể chỉ định tên của thành phần với loại biến và tên của nó, như trong

Hello

Hello

Chúng tôi đã nhập

Hello

Hello

Hello

 Hello 

def Header() {
  return "Hello, I am a header!";
}

def Header() {
  return "Hello, I am a header!";
}

 Hello 

Những trạng thái

Một đối tượng trạng thái được tích hợp vào các thành phần React. Đối tượng trạng thái là nơi bạn giữ các giá trị thuộc tính của thành phần và các trình tạo lại thành phần khi đối tượng trạng thái thay đổi:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Trong ví dụ mã ở trên, chúng tôi đã tạo một trạng thái

 Hello 

 Hello 

 Hello 

 Hello 

Để làm điều này, chúng tôi đã sử dụng móc

 Hello 

 Hello 

 Hello 

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

Móc

Móc là các chức năng cho phép bạn hook hook vào các tính năng phản ứng như các chức năng trạng thái và vòng đời. Chúng tương tự như các nhà trang trí trong Python cho phép bạn nối vào một lớp hoặc chức năng và kiểm soát hành vi của nó.

Để sử dụng móc, bạn phải nhập chúng từ thư viện React. Chúng không thể được sử dụng với các thành phần lớp và chỉ có thể được sử dụng ở cấp cao nhất của một thành phần trong đó các thuộc tính chức năng được khai báo, như được thấy trong mã dưới đây:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Như đã thấy trong mã trên, móc

 Hello 

Móc làm cho việc quản lý trạng thái dễ dàng hơn vì chúng được tích hợp để thực hiện logic quản lý trạng thái đơn giản cho bạn, điều này ngăn bạn lãng phí thời gian để phát minh lại bánh xe.

Một số ví dụ về móc là

 Hello 

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

Đạo cụ

Đạo cụ phản ứng tương tự như các đối số hàm JavaScript và các thuộc tính HTML. Họ sử dụng cùng một cú pháp như các thuộc tính HTML để chuyển đạo cụ vào một thành phần:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Đạo cụ là cách bạn truyền dữ liệu giữa các thành phần và có thể được truyền từ thành phần cha sang thành phần con:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Thành phần cha mẹ ở đây là

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

Trạng thái vượt qua như đạo cụ

Bạn cũng có thể vượt qua trạng thái dưới dạng đạo cụ giữa các thành phần cha mẹ và con cái:

<

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Trong ví dụ mã ở trên, chúng tôi khai báo trạng thái

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

Sau đó, chúng ta có thể chuyển các trạng thái này cho thành phần

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

Redux

Khi làm việc trong React, bạn sẽ cần xử lý các trạng thái trên các thành phần trong một ứng dụng phức tạp. Vấn đề này được giải quyết bằng Redux, gói JavaScript hỗ trợ duy trì trạng thái ứng dụng. Redux lưu trữ tất cả các tiểu bang của bạn trong một nguồn duy nhất và bạn có thể tìm hiểu thêm về nó trong hướng dẫn này.

Trang web

WebPack là một người đóng gói mô -đun JavaScript cho phép bạn giữ các phụ thuộc như các tệp tĩnh trong dự án của bạn để bạn không phải. Trình tải cũng được bao gồm trong WebPack để hỗ trợ thực hiện một số hoạt động nhất định trong dự án của bạn.

Kết xuất máy chủ

Kết xuất máy chủ học sẽ cho phép bạn phát triển các thành phần trên máy chủ và hiển thị chúng dưới dạng HTML trong trình duyệt của bạn; Sau khi tất cả các mô -đun JavaScript tải xuống, React sẽ lên sân khấu.

Đây là một trong những tính năng tốt nhất của React, và nó có thể được sử dụng với bất kỳ công nghệ phụ trợ nào. Bạn có thể tìm hiểu về kết xuất máy chủ trong bài viết này.

Xây dựng bình và các ứng dụng phản ứng

Bây giờ, hãy để xây dựng ứng dụng Flask để quản lý cơ sở dữ liệu và yêu cầu dữ liệu, đây sẽ là phần phụ trợ cho ứng dụng React của chúng tôi. Phần này sẽ trình bày cách xây dựng API Python hoạt động với React, sau đó xây dựng một ứng dụng React tạo ra các yêu cầu từ CNTT của bạn.

Cài đặt bình

Để cài đặt bình, chạy lệnh bên dưới:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Tiếp theo, chạy lệnh sau để tạo dự án bình:

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Bây giờ chúng ta có thể tạo một

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Thiết lập ứng dụng bình

Ứng dụng Flask sẽ yêu cầu bạn cài đặt

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

function Header() {
  return 
Hello, I am a header!
;
}

Sau khi cài đặt các mô -đun cần thiết, nhập chúng và thiết lập chúng. Để thực hiện việc này, hãy sao chép mã bên dưới trong tệp

.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}

function Header() {
  return 
Hello, I am a header!
;
}

Tiếp theo, thiết lập cơ sở dữ liệu của bạn cho Trình quản lý liên hệ:

function Header() {
  return 
Hello, I am a header!
;
}

Mô hình

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

Xây dựng các điểm cuối

Trong mã bên dưới, chúng ta có thể tạo, truy xuất và thay đổi điểm cuối cho ứng dụng Trình quản lý liên hệ:

function Header() {
  return 
Hello, I am a header!
;
}

Điểm cuối

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

Cuối cùng, điểm cuối

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

Xây dựng ứng dụng React

Để bắt đầu xây dựng các ứng dụng React của chúng tôi, trước tiên chúng tôi phải cài đặt React:

function Header() {
  return 
Hello, I am a header!
;
}

Để tạo dự án React của bạn, hãy nhập lệnh bên dưới:

function Header() {
  return 
Hello, I am a header!
;
}

Thiết lập ứng dụng React

Trong ứng dụng React bạn vừa tạo, xác định vị trí tệp

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

function Header() {
  return 
Hello, I am a header!
;
}

Tiếp theo, tạo hai thư mục có tên

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

Tệp

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

3

Tiếp theo, hãy để nhập và hiển thị thành phần

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

function Header() {
  return 
Hello, I am a header!
;
}

Xây dựng các thành phần

Trong phần này, chúng tôi sẽ xây dựng các thành phần tạo nên ứng dụng Trình quản lý liên lạc.

Thành phần

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

4

Tạo một tệp mới có tên

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

function Header() {
  return 
Hello, I am a header!
;
}

Trong mã trên, chúng tôi đã tạo thành phần

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Sau đó, bằng cách tạo trạng thái

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Tiếp theo, móc

render() {
    var myText = 'Hello!';
    return (
          
{myText}
    );
}

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Khi tạo hàm

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Chức năng

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Hàm này cũng đặt trạng thái

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Và cuối cùng, hàm

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Sau đó, chúng ta có thể chuyển chức năng

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Thành phần

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

00

Thành phần

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

function Header() {
  return 
Hello, I am a header!
;
}

Bằng cách hiển thị mỗi liên hệ trong danh sách bằng hàm bản đồ để ánh xạ dữ liệu trong prop

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Hàm

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Cùng với đó, danh sách liên lạc của chúng tôi hiện trông giống như danh sách dưới đây:

Thành phần

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

01

Thành phần biểu mẫu hiển thị biểu mẫu được sử dụng để gửi dữ liệu cho ứng dụng của chúng tôi. Để thực hiện việc này, hãy tạo một tệp mới có tên

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

import React from 'react';
import PropTypes from 'prop-types';
import './Header.css';
...
export default function Alert() {
  return(
    

      
React Header
    
  )
}

def Header() {
  return "Hello, I am a header!";
}

Ở đây, hàm

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Hàm

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Trong

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

import React from 'react';

function Header() {
  const wrapper = {
    padding: 20
  };

  return(
    

      

    
  )
}

export default Header;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

class MyComponent(Component):
    def __init__(self):
        super().__init__()

    def render(self):
        return "Hello, I am a heder" ;

Và ở đây, Mẫu liên hệ thêm cuối cùng:

Sự kết luận

Cuối cùng, chúng tôi có một danh sách liên hệ làm việc mà chúng tôi có thể thêm và xóa liên hệ một cách hiệu quả:

Cả Python và React là những lựa chọn tuyệt vời để tạo một ứng dụng web. Khi sử dụng chúng, bạn sẽ nhận thấy rằng một số tính năng, chẳng hạn như trang trí Python, và móc nối, là giống hệt nhau.

Chỉ có một vài thay đổi trong Cú pháp mã và mô hình dữ liệu/nguyên tắc chuyển giao, chẳng hạn như cách xác định các hàm và cách dữ liệu trong thành phần React được quản lý khác với dữ liệu trong lớp Python.

Là một nhà phát triển Python, Learning React rất quan trọng khi xây dựng phía máy chủ của các ứng dụng web của bạn. Cảm ơn bạn đã đọc, và mã hóa hạnh phúc !!

Khả năng hiển thị đầy đủ vào các ứng dụng phản ứng sản xuất

Gỡ lỗi các ứng dụng React có thể khó khăn, đặc biệt là khi người dùng gặp phải các vấn đề khó sao chép. Nếu bạn quan tâm đến việc theo dõi và theo dõi trạng thái Redux, tự động xuất hiện các lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử logrocket.

Logrocket giống như một DVR cho các ứng dụng web và di động, ghi lại mọi thứ xảy ra trên ứng dụng React của bạn. Thay vì đoán tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái của ứng dụng của bạn khi xảy ra vấn đề. Logrocket cũng theo dõi hiệu suất của ứng dụng của bạn, báo cáo với các số liệu như tải CPU của máy khách, sử dụng bộ nhớ máy khách và hơn thế nữa.

Gói Logrocket Redux Middleware bổ sung thêm một lớp hiển thị vào các phiên người dùng của bạn. Logrocket ghi lại tất cả các hành động và nêu từ các cửa hàng Redux của bạn.

Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình - bắt đầu giám sát miễn phí.