Introduction Wprowadzenie Rozwój dynamicznych i interaktywnych aplikacji internetowych jest kluczowy w dynamicznym i ciągle zmieniającym się świecie rozwoju stron internetowych. Szybkość i wszechstronność React, zestawu narzędzi JavaScript do tworzenia interfejsów użytkownika, doprowadziły do jego wielkiej popularności. Jednak PHP jest nadal silną opcją dla programowania po stronie serwera. Ten samouczek pokaże Ci, jak łatwo połączyć funkcjonalność PHP backend i React front-end, aby w pełni wykorzystać ich odpowiednie mocne strony. Understanding the Distinct Roles of PHP and React Zrozumienie różnych ról PHP i React What Is PHP? Czym jest PHP? Termin PHP jest akronimem dla Hypertext Preprocessor. Jest to język skryptów po stronie serwera, który jest używany do rozwoju stron internetowych. Może być łatwo osadzony z plikami HTML. Merits Of PHP Zalety PHP Poniżej kilka zalet PHP: Ease of Learning and Use: PHP jest znany ze swojej prostej syntax, która jest stosunkowo łatwa dla początkujących. ta prostota pomaga nowym programistom szybko zacząć budować aplikacje internetowe. Wide Adoption and Community Support: PHP ma dużą i aktywną społeczność. Oznacza to rozległą dokumentację, liczne samouczki i bogactwo zasobów online. Wsparcie społeczności tłumaczy się również na duży wstępnie napisany kod, ramy i bibliotekę wtyczek. Integration Capabilities: PHP bezproblemowo integruje się z różnymi bazami danych (takimi jak MySQL, PostgreSQL, SQLite), serwerami internetowymi (takimi jak Apache i Nginx) i innymi usługami. Open Source: PHP jest wolny w użyciu i dystrybucji, co obniża koszty rozwoju, szczególnie dla małych firm i start-upów. Cross-Platform Compatibility: PHP może działać na wielu platformach, w tym Windows, Linux i macOS. Ta elastyczność zapewnia, że aplikacje PHP mogą być wdrażane w różnych środowiskach bez problemów z kompatybilnością. Demerits Of PHP Wymagania dotyczące PHP Poniżej kilka przykładów PHP. Inconsistent Function Naming and Parameter Order: One of the common criticisms of PHP is its inconsistent function naming conventions and parameter order. For example, functions may have different naming patterns ( vs ) parameter orders ( ) vs. ). This inconsistency can lead to confusion and errors, especially for new developers. str_replace strpos array_filter($array, $callback array_map($callback, $array) Historical Security Issues: PHP has a history of security vulnerabilities, partly due to its widespread use and partly due to its design. While modern PHP has significantly improved in terms of security features, legacy codebases and bad practices from earlier versions can still pose security risks. Performance Compared to Other Languages: While PHP has made great strides in improving performance (especially with PHP 7 and later), it can still be slower compared to some other languages like Node.js or Go for certain tasks. This can be a drawback for applications requiring extremely high performance and low latency. Weak Typing: PHP’s weak typing system, which allows implicit type conversions, can lead to unexpected behavior and bugs that are difficult to track down. For example, comparing a string to a number may yield unexpected results ( It is true, but it is false. This can be problematic, especially for large, complex codebases. "123" == 123 "123" === 123 5. Over-Reliance on Older, Procedural Code: Wiele aplikacji PHP i samouczków nadal używa starszych, proceduralnych technik programowania zamiast nowoczesnych, obiektowo zorientowanych lub funkcjonalnych praktyk programowania.To może prowadzić do mniej utrzymującego się i trudniejszego do odczytania kodu. What Is React? Czym jest React? React JS to deklaratywna, wydajna i elastyczna biblioteka JavaScript do budowania interfejsów użytkownika. Jest to „V” w MVC. ReactJS to otwarta biblioteka front-end oparta na komponentach, odpowiedzialna tylko za warstwę widoku aplikacji. Merits Of React Js Korzyści z React Js Poniżej kilka zalet React.js. Component-Based Architecture: React follows a component-based architecture, which allows developers to build reusable UI components. This modularity leads to cleaner, more maintainable, and scalable code. Components can be reused across different parts of an application, reducing redundancy and improving development efficiency. Virtual DOM for Improved Performance: React uses a Virtual DOM (Document Object Model) to optimize rendering performance. When the state of an application changes, React updates the Virtual DOM first, which then efficiently updates the actual DOM only where necessary. This minimizes direct manipulation of the DOM, leading to faster and more efficient updates, particularly beneficial for complex applications with frequent UI changes. Declarative UI: React's declarative approach to building UIs makes code more predictable and easier to debug. Developers describe what the UI should look like for a given state, and React takes care of updating the actual UI based on state changes. This simplifies the process of developing interactive user interfaces and makes the code more readable. Rich Ecosystem and Community Support: React has a vast ecosystem with numerous libraries, tools, and extensions that enhance its functionality. The strong community support ensures that developers have access to extensive resources, tutorials, and third-party components. Additionally, the backing of Facebook and contributions from a large number of developers worldwide ensure React remains up-to-date and continuously improving. Strong Support for JSX: React uses JSX (JavaScript XML), a syntax extension that allows HTML to be written within JavaScript. JSX simplifies the process of creating React components and makes the code more readable by visually separating the structure (HTML) from the logic (JavaScript). This tight integration of markup with logic enhances development efficiency and reduces context switching for developers. Demerits Of React Js Wymagania dotyczące React Js Poniżej przedstawiamy kilka zalet React.js. Steep Learning Curve: React's flexibility and the wide array of tools and libraries in its ecosystem can make the learning curve steep for beginners. Understanding concepts like JSX, components, state management, and the intricacies of the Virtual DOM can be challenging for new developers. Boilerplate and Complexity: Setting up a React project often involves considerable boilerplate code and configuration. Tools like Create React App simplify the initial setup, but as projects grow, the complexity can increase, requiring additional configuration and understanding of build tools like Webpack and Babel. Rapidly Changing Environment: The React ecosystem evolves quickly, with frequent updates and new tools emerging regularly. Keeping up with the latest best practices, updates, and libraries can be overwhelming for developers. This fast pace of change can also lead to issues with outdated documentation and compatibility between different libraries and versions. Poor SEO: By default, React renders applications on the client side, which can lead to poor SEO performance because search engine crawlers might have difficulty indexing the dynamic content. Although solutions like server-side rendering (SSR) with frameworks like Next.js exist, implementing them adds complexity to the project. State Management Complexity: Managing state in large React applications can become complex. While React's built-in state management works well for small applications, scaling up requires more sophisticated state management solutions like Redux, MobX, or the Context API. These solutions add another layer of complexity and require additional learning and setup. The Synergy Between PHP and React in Modern Web Applications Synergia między PHP i React w nowoczesnych aplikacjach internetowych Synergia między PHP i React w nowoczesnych aplikacjach internetowych wykorzystuje mocne strony obu technologii do tworzenia solidnych, dynamicznych i skalowalnych aplikacji. 5 Benefits of Using PHP with React 5 korzyści z korzystania z PHP z React Uwaga: korzyści jest więcej niż pięć, ale oto kilka wymienionych! 1. Full-Stack Versatility 1. pełna wszechstronność Integracja frontend i backend: Bezproblemowe przetwarzanie danych: React skutecznie zarządza przednim końcem, podczas gdy PHP może obsługiwać logikę po stronie serwera i wymianę danych, co prowadzi do spójnego środowiska rozwoju. Rozwój napędzany API: dostarczając dane do frontu React za pośrednictwem punktów końcowych GraphQL lub RESTful, PHP może działać jako potężny API backend, umożliwiający jasny podział obowiązków. Efficiency of Development: Rozwój równoległy: zespoły pracujące jednocześnie nad projektami front-end i back-end mogą przyspieszyć rozwój i wyeliminować bariery. Rozwój Frontend jest bardziej modułowy i łatwy w obsłudze ze względu na konstrukcję opartą na komponentach React, która gwarantuje ponowne wykorzystanie elementów interfejsu użytkownika. 2. Scalability 2. skalowalność Managing a Higher Load: Efektywne backendy: PHP frameworks takie jak Laravel są zaprojektowane, aby skutecznie zarządzać ogromną ilością danych i żądań użytkowników, obsługując skomplikowane i skalowalne procesy backend. Optymalizacja Frontend: Nawet w przypadku skomplikowanych i wymagających dużej ilości danych aplikacji wirtualny DOM React i skuteczna technika diffingu gwarantują szybkie i reaktywne zmiany interfejsu użytkownika. Architecture of Microservices: Podejście modułowe: Różne usługi mogą skalować się niezależnie, gdy PHP jest włączony do architektury mikrousług. React ułatwia skalowalność, umożliwiając korzystanie z tych usług zgodnie z wymaganiami. Dystrybucja obciążeń: Program jako całość może lepiej zarządzać ruchem, dzieląc obciążenie między PHP, który obsługuje operacje po stronie serwera, i React, który obsługuje interakcje po stronie klienta. 3. Performance 3. wydajność Quick load times: Rendering po stronie serwera (SSR): Początkowy HTML może być wstępnie renderowany przez PHP i wysyłany do klienta; następnie React może go nawilżyć. Asynchroniczne pobieranie danych: Korzystając z React, dane mogą być pobierane z PHP backend asynchronicznie, zachowując interfejs użytkownika i efektywne zarządzanie zmianami danych. Enhanced Communication: Efektywne zarządzanie stanem: funkcje zarządzania stanem React, takie jak kontekst i haczyki, umożliwiają lepsze zarządzanie zmianami stanu interfejsu użytkownika, co minimalizuje potrzebę bezsensownych ponownych renderów. Caching i optymalizacja: PHP może wykorzystywać techniki pamięci podręcznej po stronie serwera, aby przyspieszyć dostarczanie statycznego materiału i zmniejszyć zapotrzebowanie na bazę danych, a tym samym poprawić wydajność. Rich User Interfaces Bogaty interfejs użytkownika UIs that are interactive and dynamic: Projektowanie oparte na komponentach pozwala programistom na tworzenie złożonych, interaktywnych interfejsów użytkownika, które są łatwe do aktualizacji i rozszerzenia. Component-Based design: React jest w stanie wydajnie obsługiwać dynamiczne zmiany zawartości i aktualizacje w czasie rzeczywistym, zapewniając płynne i interesujące doświadczenie użytkownika. Real-Time Updates: Improved User Experience: Współczesne biblioteki interfejsu użytkownika: React działa dobrze z współczesnymi bibliotekami interfejsu użytkownika i ramami (takimi jak Material-UI i Ant Design), umożliwiając programistom projektowanie estetycznie przyjemnych i intuicyjnych interfejsów użytkownika. Budowanie responsywnych i adaptacyjnych interfejsów użytkownika (UI), które działają skutecznie na różnych urządzeniach i rozmiarach ekranów, jest uproszczone za pomocą React. 5. SEO-Friendly 5 SEO-przyjazny Better Optimization for Search Engines: Rendering po stronie serwera (SSR): Pre-rendering zawartości HTML przy użyciu PHP przed dostarczeniem go do klienta gwarantuje lepszą indeksację wyszukiwarek i SEO. Meta Tags i dynamiczny materiał: Korzystając z informacji z PHP backend, React może dynamicznie zarządzać i aktualizować meta tags, tytuły i inne materiały istotne dla SEO. Better Crawlability: Static Site Generation (SSG): React może produkować statyczne strony w czasie budowy, poprawiając SEO aplikacji przy zachowaniu PHP dla treści dynamicznych, wykorzystując rozwiązania takie jak Next.js, które obsługują zarówno SSR, jak i SSG. Struktura adresów URL: React może obsługiwać routowanie i nawigację, upewniając się, że odwiedzający i wyszukiwarki mogą łatwo odkrywać witrynę, podczas gdy PHP może zarządzać jasnymi, przyjaciółmi dla SEO strukturami adresów URL. Deweloperzy mogą budować solidne, skalowalne i zoptymalizowane dla wydajności aplikacje online z bogatym doświadczeniem użytkownika i optymalizacją wyszukiwarek, integrując PHP z React. Creating a PHP and React Development Environment Tworzenie środowiska rozwoju PHP i React W tym momencie mamy zamiar rozpocząć rzeczywisty projekt wykorzystujący React.js i PHP jako front end. Prerequisites Wymagania Istnieją rzeczy, które musisz wiedzieć jako deweloper lub rzeczy, które musisz mieć, aby PHP mogło działać jako backend z React. Posiadają podstawową znajomość PHP Poznaj React.js Upewnij się, że Node.js, wraz z npm, jest zainstalowany na komputerze. Posiadaj PHP zainstalowany w systemie, albo Apache lub Nginx Step By Step Process On How To Use PHP As A Backend Using React As A Front-end Krok po kroku proces, jak korzystać z PHP jako backend używając React jako front-end Krok do korzystania z PHP jako backend obok React jest dość prosty i jest następujący. Building The Frontend Otwórz terminal i wykonaj następujące polecenie: Step 1: npx create-react-app my-react-app Uwaga: przed uruchomieniem tego polecenia, musisz cd do katalogu, w którym chcesz, aby twoja skrzynka React! cd Documents Po tym czasie będziesz czekać na utworzenie aplikacji React. Przejdź do folderu projektu. Projekt, który właśnie utworzyłeś, musi być odwiedzany w terminalu. Step 2: cd my-react-app Rozpocznij obsługę serwera: Step 3: npm start Building the PHP Backend Nadszedł czas, aby zbudować PHP backend teraz, gdy Twoja aplikacja React jest operacyjna: Utwórz nowy folder dla swoich plików PHP w katalogu aplikacji React. Aby to osiągnąć, uruchom następujące polecenie na swoim terminalu. Step 1: mkdir php_backend Po uruchomieniu tego polecenia zobaczysz folder o nazwie php_backend. W folderze php-backend utwórz plik o nazwie Uwaga: możesz nazwać go dowolnym nazwiskiem. W moim przypadku postanowiłem użyć . Step 2: index.php index.php W tym Możesz zacząć definiowanie punktów końcowych PHP i logiki. Poniżej jest to, co jest napisane w moim Jeśli jesteś programistą PHP, będziesz zaznajomiony z tą syntaxą. Step 3: index.php php-backend/index.php <?PHP $serverName="localhost"; $userName="root"; $password=""; $databaseName="react_php"; $conn = mysqli_connect($serverName, $userName, $password, $databaseName); $recText = $_POST['text']; $query = ("INSERT INTO react_php (texts) VALUES('$recText')"); if (mysqli_query($conn, $query)) { echo "Data has been inserted successfully"; }else { echo "Error"; } ?> Teraz następną rzeczą do zrobienia jest przejście do kodu React, który utworzyłeś wcześniej i otwórz folder w edytorze kodu. Dodaj syntax poniżej. src/App.js import React, { Component } from 'react'; // import logo from './logo.svg'; import axios from 'axios'; //Import Axios import './App.css'; class App extends Component{ state = { text : "" } handleAdd = async e =>{ await this.setState({ text : e.target.value }) } handleSubmit = e =>{ e.preventDefault(); console.log(this.state.text); let formData = new FormData(); formData.append("text", this.state.text); const url = "http://localhost:80/react-backend/" axios.post(url,formData) .then(res=> console.log(res.data)) .catch(err=> console.log(err)) } render(){ return( <div className="App-header"> <input onChange={this.handleAdd} className="form-control" // value={this.state.text} type="text" id='text' placeholder='Enter Some Text!'/> <br/> <button onClick={this.handleSubmit} className="btn btn-success" id='submit'> Save</button> </div> ); } } export default App; Uwaga: Co pozwala PHP działać jest Spójrz na fragment kodu poniżej. zobaczysz, jak go używaliśmy! Axios W folderze publicznym projektu zobaczysz W tym pliku dodałem Bootstrap CDN jako framework, którego używam. index.html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> Oto trochę stylizacji. .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } Po wypróbowaniu tego wszystkiego, oto widok, który zobaczysz. Po wypełnieniu tekstu i kliknięciu przycisku Zapisz, tekst zostanie automatycznie wyświetlony w bazie danych. Później napisałem i kliknąłem na Browse, w prawym górnym rogu wyświetlanego poniżej obrazu. Freddie To jest krok, którego użyłem w React i PHP w jednej aplikacji. Conclusion konkluzji Podsumowując, integracja PHP jako backend z React jako frontendem oferuje solidne i wszechstronne rozwiązanie dla nowoczesnego rozwoju aplikacji internetowych. Jak wspomniano powyżej, to połączenie wykorzystuje mocne strony możliwości serwera PHP i dynamiczną architekturę opartą na komponentach React do tworzenia skalowalnych, wysokiej wydajności aplikacji. PHP efektywnie obsługuje logikę serwera, interakcje z bazami danych i tworzenie API, podczas gdy React zapewnia bogaty, reaktywny interfejs użytkownika i bezproblemowe przetwarzanie danych. Ta synergia między PHP i React nie tylko poprawia proces rozwoju, ale także powoduje, że aplikacje internetowe są interaktywne, angażujące i przyjazne dla SEO. Mam nadzieję, że znalazłeś ten samouczek niesamowicie cenny!Do następnego razu, do widzenia. About The Author O autorze Pełny zestaw deweloperów Laravel ma Wieloletnie doświadczenie w rozwoju oprogramowania. rozwinął pełnowartościowe umiejętności, łącząc rozwój oprogramowania, pisanie i pouczanie innych w tym, co robi. Emmanuel Okolie 4+ Jego stacje obejmują , , , Jako freelancer tworzy strony internetowe dla klientów i pisze przewodniki techniczne, aby pokazać ludziom, jak robić to, co robi. ReactJS Laravel PHP JavaScript Gdyby dać szansę, Chętnie się z Tobą porozmawiam. – Proszę, idź i idź za Nim. na Facebooku, , , oraz . Emmanuel Okolie WEB WEB GitHub Linkedin → na Twitterze
