ReactJS einfach erklärt: Warum ist es gut für die Entwicklung

Was ist ReactJS

Manchmal irrtümlich ein JS-Framework genannt, ähnelt React in der Tat einem Framework durch die tiefgehende Integration mit Redux- und Flux-Bibliotheken, die ihre eigenen architektonischen Muster auferlegen. React ist eine Bibliothek, die oft mit AngularJS, einem beliebten JS-Framework verglichen wird und sowohl Einschränkungen als auch Vorteile mit sich bringt.

React ist sehr flexibel und kann für UI-Projekte mit jeder Größe und Plattform verwendet werden, einschließlich mobiler, Web- und Desktop-Entwicklungen. Entwickler verwenden React häufig für kleine und mittlere Projekte, bei denen die Anwendung globaler Modelle unnötig ist. Gleichermaßen nutzen viele weltbekannte Unternehmen React bei ihren Produkten, z. B. Netflix, Dropbox, Khan Academy, Reddit, Imgur und viele andere.
Wir bei Infopulse schätzen React für unsere Bedürfnisse als sehr vorteilhaft ein. Eine unserer React-basierten Lösungen, die für einen externen Kunden entwickelt wurde, ist eine umfassende Multimodul-Webanwendung. Etwa sechs Personen arbeiten derzeit an diesem Projekt. Die Produktfreigabe ist für den Sommer 2017 mit der weiteren Unterstützung und Wartung geplant.

Das System, an dem wir arbeiten, digitalisiert und automatisiert einen massiven Workflow, der höchste Transparenz und Sicherheit bietet. Ein veraltetes, auf JQuery basiertes System war instabil, nicht sicher, zeigte schlechte Leistung und entbehrte viele Features. Wir konnten das veraltete System weder aktualisieren noch migrieren und mussten alles neu entwickeln, indem wir React für die Frontend-Entwicklung und C# für das Backend verwendet haben.

Vorteile von React für die Entwicklung

Verglichen mit den regulären MVC- und anderen JS-Frameworks bietet React viele Vorteile.

Softwareskalierbarkeit und Flexibilität. Genauso wie Angular nutzt React eine Komponentenmethode für die Entwicklung, mit deren Hilfe man skalierbare und flexible Apps erstellen kann. Das Material-UI-Framework bietet eine umfangreiche Basis von Komponenten und Modulen, die die perfekte Synergie mit der ReactJS-Bibliothek darstellt.

Wenn wir uns das React-API detaillierter anschauen, können wir den Komponentenstatus in jedem einzelnen Moment überprüfen. Die oberen React-API-Komponenten sind für den funktionalen Ansatz konzipiert. Die Komponenten sind in Klassen unterteilt, sodass sie leicht übertragen, erweitert und skaliert werden können. Darüber hinaus werden die Kernfunktionalitäten von React durch die Redux- oder Flux-Bibliotheken erheblich erweitert. Beispielsweise ist es möglich, die Geschichte der gesamten Anwendung in einem lokalen Speicher mit Hilfe der Redux-Bibliothek zu speichern.

Das obere React-API ermöglicht das Erstellen der verkapselten Komponenten. Wenn wir also eine Seite mit einem Menü und einem Netz haben, wird nach dem Standard-MVC-Ansatz empfohlen, separate Modelle für jedes der Seitenelemente zu erstellen. React beschreibt sie mit einem Modell beim Zusammenführen und Verarbeiten von Daten über Redux.

//MENÜ-BEISPIEL

 import React from 'react';
import {connect} from 'react-redux';
import {MenuItem} from '../path-to-menu-item.jsx';

class Menu extends React.Component {

	render() {
		return (
			

				{
					this.props.menuItemList.map(item => )
				}
			

		)
	}
}


const mapStateProps = (state, props) => {
	return {
		menuItemList: state.menuItemList
	}
};

const mapDispatchToProps = (dispatch) => {
	return {}
};

export default connect(mapStateProps, mapDispatchToProps)(Menu); 

Bei der Entwicklung mobiler Apps empfiehlt es sich, React Native zu verwenden, ein separates Framework für mobile App-Entwicklung, das mit einer großen, speziellen Komponentenbibliothek ausgestattet ist, die auf die mobile Entwicklung ausgerichtet wurde. Im Gegensatz zu PhoneGap und Cordova benötigt React Native keinen Browser oder WebView und nutzt das JavaScript-API zusätzlich zu den nativen Komponenten. Dies ermöglicht eine reibungslose Verarbeitung und schnellere Leistung im Vergleich zu Cordova und PhonGap.

All die Faktoren resultieren in einer reibungslosen Skalierung jeder Komponente und einer besseren und einfacheren Projektentwicklung. Da wir im System ständig neue Features hinzufügen, konnten wir neue Komponenten und Module mit React stets laufend einbauen.

Vereinfachte Entwicklungskomplexität und Wiederverwendbarkeit. Ein weiterer großer Vorteil von React ist die JSX-Syntax-Erweiterung, die eine hervorragende Wiederverwendbarkeit bietet. Die Standardmechanik bei React schlägt vor, standardisierte Inline-Stile zu verwenden, die mit JavaScript-Objekten beschrieben sind. JSX verbindet HTML und CSS in einem JavaScript-Code und befreit von den Schmerzen, die Links zu anderen Dateien über Attribute einfügen zu müssen. Jede Komponente kann überall im Projekt frei definiert werden, indem ihr ein bestimmter einzigartiger Status zugewiesen wird.

Wenn manche Teile des Codes von einem Browser uneingeschränkt verarbeitet werden müssen, können wir Sass – oder Less-Präprozessoren für zusätzliche Einstellungen verwenden. Dies ermöglicht das einfache Implementieren und den unkomplizierten Import der Code-Teile als regulärer JavaScript-Objekte.

Im nachfolgenden Beispiel wird die Netzkomponente durch eine Vorlage beschrieben, während die Tabellenkomponente mit Material-UI beschrieben wird. Obwohl diese Vorlagen von den normalen HTML-Vorlagen abweichen, bauen sie alle auf einer HTML-Vorlage auf.

//BEISPIELTABELLE (MATERIAL-UI)

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

const TableExampleSimple = () => (    
   < Table> 
     < TableHeader> 
      < TableRow> 
         <TableHeaderColumn > ID  </TableHeaderColumn> 
        < TableHeaderColumn > Name  </TableHeaderColumn> 
         < TableHeaderColumn > Status  </TableHeaderColumn> 
       < /TableRow> 
     < /TableHeader> 
     < TableBody> 
       < TableRow> 
         <TableRowColumn > 1  </TableRowColumn> 
         < TableRowColumn > John Smith  </TableRowColumn> 
         < TableRowColumn > Employed  </TableRowColumn> 
       < /TableRow> 
       < TableRow> 
         < TableRowColumn > 2 < /TableRowColumn> 
         < TableRowColumn > Randal White </TableRowColumn> 
         < TableRowColumn > Unemployed </TableRowColumn> 
       < /TableRow> 
      < TableRow> 
         < TableRowColumn > 3  </TableRowColumn> 
         < TableRowColumn > Stephanie Sanders </TableRowColumn> 
         < TableRowColumn > Employed  </TableRowColumn> 
       < /TableRow> 
       < TableRow> 
        < TableRowColumn > 4  </TableRowColumn > 
         < TableRowColumn > Steve Brown </TableRowColumn > 
         <TableRowColumn > Employed </TableRowColumn > 
      < /TableRow > 
     </TableBody > 
   < /Table > 
);

export default TableExampleSimple;

Wiederverwendbare Aktionen und Korrektheit des Codes. Mit Hilfe der Redux-Bibliothek kann man eine unendliche Anzahl an wiederverwendbaren Aktionen erzeugen, die den Komponentenstatus in einem globalen Modell aufnehmen. Durch dieses Modell können wir die Daten an alle Komponenten verteilen. Dies beschleunigt die Entwicklung, da wir die möglichen Fehler, Nichtübereinstimmungen von Modellen, Überschneidungen oder Fälle nicht zu berücksichtigen brauchen, in denen ein Regler nur Fehlermeldungen bei dem Versuch produzieren würde, die Modelle nacheinander abzuarbeiten. Stattdessen spielt jede Aktion die Rolle eines Reglers, sodass er nicht mehrmals neu beschrieben werden muss, um die Fehler loszuwerden.

//AKTIONEN/ABSCHWÄCHER/WORKFLOW

//KOMPONENT

 import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {MenuItem} from '../path-to-menu-item.jsx';
import {increment} from '../path-to-action.js';

class CounterButton extends React.Component {
	render() {
		return  < button onClick={(pr) =>  this.props.increment(this.props.counter)}> Clicked: {this.props.counter} </button > 
	}
}

 const mapStateProps = (state, props) => {
	return { 
		counter: state.counter
	}
};

const mapDispatchToProps = (dispatch) = > {
	return {...bindActionCreators({increment}, dispatch)}

};

export default connect(mapStateProps, mapDispatchToProps)(CounterButton);

//AKTION

export const increment = (counter) => {
	return {
		type: 'INCREMENT',
		counter: counter + 1
	}
}

//ABSCHWÄCHER

 export default function reducers(state = {counter: 0}, action) {
	switch (action.type) {
		case 'INCREMENT':
			return {
				...state,
				counter: action.counter
			};
	}
}

Bessere Leistung. Virtual DOM und die Geschwindigkeit der DOM-Verarbeitung sind enorme Vorteile von ReactJS. Im Vergleich zu Angular 2, wo der Zugriff zum DOM-Überschatten emuliert wird, kann React eine mindestens 20% bessere Leistung bei kleinen und mittelgroßen Projekten zeigen. So hat unser System eine stabile und hohe Leistung z.B. bei einer Spitzenauslastung (über 10.000 Verbindungen) gezeigt. Angular erfordert tiefgehende Kenntnis der HTML-Syntax, die viel komplexer als das schlichte, auf JavaScript basierte Modell von React ist.

Da sowohl React als auch Angular kontinuierlich weiterentwickelt werden, werden die Vor- und Nachteile in der Szene ständig diskutiert sowie endlose Argumente für und gegen jede der JS-Technologien angeführt. Wir bei Infopulse werden auch weiterhin sowohl React als auch Angular für unsere zukünftigen Projekte nutzen, je nach Bedürfnissen unserer Kunden. Wir empfehlen allen, die an solchen Projekten arbeiten, beide Optionen in Erwägung zu ziehen, da sie unterschiedlichen Vorsprung gewähren.

Haben Sie Ihre Empfehlungen, welche Technologie besser ist? Planen Sie ein Projekt mit React?

Kontaktieren Sie uns, wir sprechen miteinander darüber!