React là một khung ứng dụng web JavaScript để xây dựng các giao diện người dùng phong phú chạy trong các trình duyệt web.
React là một triển khai của khái niệm khung JavaScript. Tìm hiểu làm thế nào các phần này khớp với nhau trong chương phát triển web hoặc xem bảng nội dung cho tất cả các chủ đề.
Hướng dẫn phản ứng cho người mới bắt đầu
Nói chung trước khi bạn bắt đầu làm việc với React, bạn sẽ muốn tìm hiểu cách xây dựng phụ trợ Python của mình với một khung web như Django, Flask hoặc Kim tự tháp. Khi bạn cảm thấy thoải mái với những điều cơ bản phát triển web với một trong những khung hình đó cũng như JavaScript thì sẽ dễ dàng hơn nhiều khi phản ứng để xây dựng giao diện người dùng phía máy khách của bạn.
Các nguyên tắc cơ bản của JavaScript trước khi học React cung cấp kiểm tra đường ruột rằng bạn có kiến thức điều kiện tiên quyết để tránh bị mắc kẹt vô cùng trong khi cố gắng học React.
Hướng dẫn phản ứng chính thức là một trong những cách tốt nhất để bắt đầu sử dụng React vì nhiều hướng dẫn khác nhanh chóng rơi vào thời điểm trong khi cách này có xu hướng gắn bó với những điều cơ bản có liên quan đến người mới bắt đầu.
9 điều mỗi người mới bắt đầu React.js nên biết không phải là một hướng dẫn mà thay vào đó, tác giả đưa ra một số ý kiến mạnh mẽ cho những gì người mới bắt đầu nên biết khi họ bắt đầu học phản ứng.
React Bootstrap [Mã nguồn thay thế JavaScript bootstrap hiện có bằng các thành phần React không dựa vào jQuery.
Python+React Hướng dẫn
Cách thiết lập Django với React trình bày một cách quan điểm của một nhà phát triển để kết hợp một mặt sau được cung cấp bởi Django với React ở mặt trước, bao gồm cả cách phục vụ các tài sản tĩnh.
Django nghỉ ngơi với React [Django 2.0 và một bài kiểm tra rắc] kết hợp phần phụ trợ Django Plus Django Rest [DRF] với React ở phía trước và cho thấy cách Stich tất cả lại với nhau.
Sê-ri Hướng dẫn 4 phần Django hiện đại này được thực hiện tốt, có mã nguồn có sẵn miễn phí và bao gồm:
- Thiết lập Django và React
- Thiết lập bộ định tuyến Redux và React
- Tạo API và tích hợp với React
- Thêm xác thực để phản ứng spa bằng DRF
Xây dựng một ứng dụng CRUD đơn giản với Python, bình và React cho thấy cách kết hợp phụ trợ bình với React.
Tìm hiểu ứng dụng React là một kho lưu trữ Git với hướng dẫn mã và hướng dẫn về cách theo dõi, cũng như các bài tập để đảm bảo bạn được kiểm tra khi bạn đi.
Tài nguyên phản ứng khác
React Câu hỏi phỏng vấn là một bài kiểm tra tốt để xem những gì bạn biết hoặc vẫn cần tìm hiểu về các nguyên tắc cơ bản của việc sử dụng React.
Under-the-hood-Reactjs kiểm tra chính cơ sở mã phản ứng thay vì dạy bạn cách sử dụng nó.
Bạn có cần tạo kiểu cho ứng dụng của bạn hoặc triển khai nó?
Ứng dụng của tôi chạy nhưng trông khủng khiếp. Làm cách nào để tạo kiểu giao diện người dùng?
Tôi đã xây dựng một ứng dụng web Python, bây giờ làm cách nào để triển khai nó?
Làm thế nào tôi nên lưu trữ và phục vụ các tệp nội dung tĩnh?
Tôi có kinh nghiệm xây dựng các ứng dụng web bằng cách sử dụng bình React và Python với nhau, vì vậy có lẽ tôi có thể giúp đỡ.
Tôi không biết cách sử dụng trực tiếp Python trên các ứng dụng web phía máy khách, nhưng chắc chắn có rất nhiều cách để sử dụng Python trên phần phụ trợ. Các khung web Python phổ biến nhất là Flask và Django.
Nếu vậy bạn có thể vui lòng cho tôi một số liên kết để học hỏi đó
YouTuber Corey Schafer có một loạt hướng dẫn trên YouTube tuyệt vời trên bình, mà tôi hoàn toàn muốn giới thiệu.
Khi bạn cảm thấy thoải mái hơn với sự phát triển web trong Python, tôi nghĩ rằng trang web //realpython.com/ có hướng dẫn tuyệt vời cho cả hai câu hỏi cụ thể [ví dụ: xác thực dựa trên mã thông báo trong bình] và hướng dẫn chung hơn.
Nếu bạn đi với Django, nó có một ORM tuyệt vời được xây dựng để làm việc với cơ sở dữ liệu.
Nếu bạn đi với Flask, IMO thân thiện với người mới bắt đầu hơn, tôi sẽ đề nghị Peewee Orm làm việc với cơ sở dữ liệu quan hệ trừ khi bạn có trường hợp sử dụng phức tạp hơn, trong trường hợp SQLalchemy là tiêu chuẩn thực tế.
Chúc may mắn học tập!
Cập nhật
Tôi vừa bắt gặp thư viện Python tuyệt vời này có tên Transcrypt giúp chuyển mã Python vào JavaScript, vì vậy hóa ra bạn có thể viết mã phía máy khách cho web trong Python. Trang web của họ có một số hướng dẫn thú vị.
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!";
}1.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!";
}2. Tuyên bố này thêm một kế thừa def Header[] {
return "Hello, I am a header!";
}3 cho thành phần, cho phép nó truy cập vào các chức năng def Header[] {
return "Hello, I am a header!";
}3.Thành phần cũng yêu cầu hàm
def Header[] {
return "Hello, I am a header!";
}5, trả về HTML, để hiển thị dữ liệu trong đó.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!";
}6 và def Header[] {
return "Hello, I am a header!";
}7 trông giống như các thẻ HTML, nhưng chúng không. JSX là một phần mở rộng cú pháp cho JavaScript có chứa các thẻ này và được nhóm React thiết kế để kích hoạt đánh dấu giống như HTML trong các thành phần JavaScript.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!";
}8 bây giờ là def Header[] {
return "Hello, I am a header!";
}9.def Header[] {
return "Hello, I am a header!";
}8 keyword is now def Header[] {
return "Hello, I am a header!";
}9.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!";
}6 và def Header[] {
return "Hello, I am a header!";
}7. Ví dụ, trong 2 của chúng tôi, chúng tôi hiển thị thành phầnHello
3 bằng cách truy cập nó làHello
4.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ểuTheo 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 JavaScriptTrong 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
5 và chuyển đối tượng cho div bằng thuộc tính kiểu:Hello
import React from 'react';
function Header[] {
const wrapper = {
padding: 20
};
return[
Chủ Đề