طريقة بناء تطبيقات الويب باستخدام "React و Python"

نظرة عامة حول كيفية تطوير البرامج الحديثة باستخدام React و Python.

هاتان لغتان حديثتان تحتويان على أدوات حديثة للتطور بسرعة وفعالية.

React هي مكتبة JavaScript شائعة لبناء واجهات المستخدم ، و Python

هي لغة برمجة قوية تستخدم غالبًا لتطوير الواجهة الخلفية.

سوف تستكشف هذه المقالة كيفية استخدام هذه التقنيات لتطوير تطبيقات البرامج الحديثة.

أولاً ، دعنا نلقي نظرة على React . React هي مكتبة JavaScript تعريفية

وفعالة ومرنة لبناء واجهات المستخدم. يسمح للمطورين بإنشاء مكونات قابلة

لإعادة الاستخدام يمكن دمجها بسهولة لبناء واجهات مستخدم معقدة.

إعداد بيئة تطوير لـ React و Python

لبدء استخدام React ، ستحتاج إلى تثبيت المكتبة وإعداد بيئة تطوير.

يتضمن هذا عادةً تثبيت Node.js ووقت تشغيل JavaScript ومحرر

التعليمات البرمجية مثل Visual Studio Code.

بمجرد إعداد بيئة التطوير الخاصة بك ، يمكنك إنشاء مشروع React جديد باستخدام

أداة إنشاء التطبيق. سيؤدي ذلك إلى إنشاء بنية أساسية لمشروعك ، بما في ذلك

خادم تطوير وبعض الأمثلة على التعليمات البرمجية.

لتثبيت Node.js و npm ، يمكنك تنزيل المثبت من موقع الويب Node.js واتباع

المطالبات لتثبيت وقت التشغيل ومدير الحزم. بمجرد التثبيت ، يمكنك استخدامه npm

لتثبيت React عن طريق تشغيل الأمر التالي في جهازك الطرفي:

npm install -g react

تشير -gالعلامة إلى أنه يجب تثبيت الحزمة عالميًا ، مما يعني أنها

ستكون متاحة لجميع المشاريع على جهازك.

بمجرد تثبيت React ، يمكنك استخدام الأمر create-react-app tool

لإنشاء مشروع React جديد. هذه الأداة عبارة عن أداة مساعدة لسطر الأوامر

تنشئ بنية أساسية لمشروع React ، بما في ذلك خادم تطوير وبعض الأمثلة على التعليمات البرمجية.

لإنشاء مشروع جديد ، قم بتشغيل الأمر التالي في جهازك الطرفي:

npx create-react-app my-project

استبدل مشروعي بالاسم الذي تريده لمشروعك. سيؤدي هذا إلى إنشاء

دليل جديد بالاسم المحدد وإنشاء هيكل المشروع الأساسي بداخله.

لبدء خادم التطوير ، انتقل إلى دليل المشروع وقم بتشغيل الأمر التالي:

npm start

سيبدأ هذا خادم التطوير ويفتح نافذة متصفح جديدة بمشروعك. يمكنك الآن

البدء في بناء تطبيق React الخاص بك عن طريق تعديل الكود في دليل src.

بناء واجهة المستخدم باستخدام React

يتضمن البناء باستخدام React تعريف المكونات باستخدام JavaScript

وبناء جملة React. المكونات هي اللبنات الأساسية لتطبيق React ويمكن

أن تكون بسيطة أو معقدة حسب الحاجة. بالإضافة إلى ذلك ، يمكن

أن تتكون من مكونات أخرى لإنشاء هيكل هرمي.

لإنشاء مكون جديد ، يمكنك تحديد وظيفة أو فئة تقوم بإرجاع عنصر React.

على سبيل المثال ، هذا مكون بسيط يعرض التحية:

import React from 'react';

function Greeting(props) {

return <h1>Hello, {props.name}!</h1>;

}

يأخذ هذا المكون اسمًا واسمًا واحدًا ويستخدمه لعرض التحية. لاستخدام هذا المكون ،

يمكنك استيراده إلى مكون آخر وتقديمه عن طريق استدعاء الوظيفة بقيمة الخاصية المطلوبة:

import React from 'react';

import Greeting from './Greeting';

function App() {

return (

<div>

<Greeting name="John"/>

<Greeting name="Jane"/>

</div>

);

}

سيؤدي هذا إلى عرض مثيلين من مكون الترحيب ، مع prop

تعيين الاسم على "John" و "Jane" على التوالي.

بمجرد تحديد المكونات الخاصة بك ، يمكنك استخدامها لبناء واجهة المستخدم

الخاصة بك عن طريق تحويلها إلى DOM. يستخدم React DOM الظاهري

لتحسين عملية العرض وتقليل عدد تحديثات DOM المطلوبة للحفاظ على تحديث UI / UX .

يمكن أن يؤدي ذلك إلى تحسين أداء تطبيقك بشكل كبير ، خاصة عند التعامل مع كميات كبيرة من البيانات.

لتقديم مكوناتك إلى DOM ، يمكنك استخدام ReactDOM.render()

الوظيفة. تأخذ هذه الوظيفة وسيطتين: عنصر React المراد تصييره وعنصر DOM لعرضه عليه.

على سبيل المثال ، يمكنك استخدام الكود التالي لتصيير Appالمكون root للعنصر:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

سيؤدي هذا إلى عرض Appالمكون rootلعنصر الصفحة ، والذي

يتم تحديده عادةً في ملف HTML الخاص بمشروعك.

التكامل مع بايثون الخلفية

الآن بعد أن أصبح لديك فهم لكيفية إنشاء واجهة مستخدم باستخدام React ،

يمكنك البدء في دمجها مع واجهة Python الخلفية . يمكن القيام بذلك

باستخدام مجموعة متنوعة من الأساليب ، مثل استخدام واجهة برمجة تطبيقات

REST أو واجهة برمجة تطبيقات GraphQL.

لإنشاء واجهة برمجة تطبيقات REST باستخدام Python ، يمكنك

استخدام إطار عمل مثل Flask أو Django. يوجد أدناه مثال في Flask

عن كيفية إدارة ملف تعريف المستخدم :

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/v1/users', methods=['GET'])

def get_users():

users = [{'id': 1, 'name': 'John'}, {'id': 2, 'name': 'Jane'}]

return jsonify(users)

@app.route('/api/v1/users/<int:id>', methods=['GET'])

def get_user(id):

user = [user for user in users if user['id'] == id]

if len(user) == 0:

abort(404)

return jsonify(user[0])

@app.route('/api/v1/users', methods=['POST'])

def create_user():

if not request.json or not 'name' in request.json:

abort(400)

user = {'id': users[-1]['id'] + 1, 'name': request.json['name']}

users.append(user)

return jsonify(user), 201

@app.route('/api/v1/users/<int:id>', methods=['PUT'])

def update_user(id):

user = [user for user in users if user['id'] == id]

if len(user) == 0:

abort(404)

if not request.json:

abort(400)

if 'name' in request.json and type(request.json['name']) != str:

abort(400)

user[0]['name'] = request.json.get('name', user[0]['name'])

return jsonify(user[0])

بمجرد إعداد API الخاص بك ، يمكنك استخدامه لجلب البيانات من الواجهة

الخلفية الخاصة بك وتمريرها إلى مكونات React الخاصة بك كدعامات.

يمكن القيام بذلك باستخدام fetch() الوظيفة أو مكتبة مثل Axios أو Apollo Client:

import axios from 'axios';

const API_URL = 'http://localhost:5000/api/v1';

export function getUsers() {

return axios.get(`${API_URL}/users`)

.then(response => response.data);

}

export function getUser(id) {

return axios.get(`${API_URL}/users/${id}`)

.then(response => response.data);

}

export function createUser(name) {

return axios.post(`${API_URL}/users`, { name })

.then(response => response.data);

}

export function updateUser(id, name) {

return axios.put(`${API_URL}/users/${id}`, { name })

.then(response => response.data);

}

يمكنك بعد ذلك استخدام هذه الوظائف في مكونات React الخاصة بك لتقديم

طلبات API وتحديث حالة المكون بناءً على الاستجابة. على سبيل المثال ،

يمكنك استخدام getUsersالوظيفة لجلب قائمة المستخدمين وعرضهم في جدول :

import React, { useState, useEffect } from 'react';

import { getUsers } from './api';

function UserTable() {

const [users, setUsers] = useState([]);

useEffect(() => {

getUsers().then(setUsers);

}, []);

return (

<table>

<tbody>

<tr key={user.id}>

<td>{user.id}</td>

<td>{user.name}</td>

</tr>

</tbody>

</table>

)

}

في الختام ، يعتبر كل من React و Python من التقنيات القوية التي

يمكن استخدامها لبناء تطبيقات الويب الحديثة.

من خلال الجمع بين الطبيعة التعريفية والفعالة لـ React مع تعدد استخدامات

Python وقابليتها للتوسع ، يمكن للمطورين إنشاء تطبيقات برمجية قوية وديناميكية

توفر تجربة مستخدم رائعة. علاوة على ذلك ، باستخدام الأدوات والتقنيات المناسبة ،

يمكن للمطورين الاستفادة من نقاط القوة في كلتا التقنيتين لبناء تطبيقات ويب

قوية وقابلة للتطوير تلبي احتياجات مستخدميهم.

J Rose

القائمة الرئيسية

الصفحات

طريقة بناء تطبيقات الويب باستخدام "React و Python"