React JS

Was ist React?

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es wurde 2013 von Facebook unter BSD-Lizenz veröffentlicht und schlägt seitdem immer größere Wellen und beeinflusst nachhaltig die gesamte JavaScript-Frontendlandschaft. Es wird verwendet von Facebook, Instagram, Whatsapp, Yahoo, AirBnB, dem Atom-Editor und vielen anderen mehr.

Motivation hinter React

Facebooks Motivation hinter React war es, seinen Frontendcode leichter verstehbar und besser wartbar zu machen. Vor React dauerte es lange, um sich das Verhalten von bestehendem Code zu vergegenwärtigen. Es gab Teile des Codes, die so komplex waren, dass niemand außer ein bestimmter Mitarbeiter sie anfassen wollte. Bugs wie unsynchronisierte Zähler ungelesener Nachrichten traten immer wieder auf. Allgemein gilt, dass je stärker gewachsener Code miteinander verwoben ist, desto schwieriger wird er zu warten.

Eine Bibliothek, kein Framework

React ist als Bibliothek konzipiert und möchte kein mächtiges Framework sein. So bleibt es ein flexibles Werkzeug, das es erlaubt Anwendungen in der Sprache ihrer eigenen Problemdomäne – und nicht der Sprache eines Frameworks – zu modellieren.

Aufgabe 1

Bei der ersten Aufgabe musst du ein Hello-World-Programm schreiben. Hier sind die einzelnen Codes.

HTML: <div id="app"></div>

JSX: ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

Ändere den Text so um, dass es "Hello World" ausgibt.

Link zur Spielwiese

Aufgabe 2

Die zweite Aufgabe ist ein Ausbau der ersten Aufgabe. Nun sollen noch wichtige Komponenten und Elemente genutzt werden um ein solides Hello-World-Programm zu erstellen.

Link zur Spielwiese

Aufgabe 3

In dieser Aufgabe musst du den verhandenen Text so verändern, dass man Tic-Tac-Toe spielen kann.

Link zur Spielwiese

Aufgabe 4

Bei der letzten Aufgabe musst du die farbliche Abfolge verändern. Programmiere das Ganze so um, dass sich die Platten beim mehrfachen drüberfahren erhellen.

Link zur Spielwiese

Explore Projects

Hier findest du noch einige interessante React-Projekte. Überzeuge dich selbst von der Effizienz.

Tetris

illustrated-algorithms

tinysynth

aframe-react-boilerplate

tmdb-app


www.developed.ch, just for awesome people!

School Project