Erste Schritte mit ReactJS und Web API 2 von Grund auf neu!

Inhalt

• Welches Werkzeug wird benötigt?
• Einrichten von ECMA6, ReactJS und der Küchenspüle
• Fast dort!
• Page.js
• Page.scss
• Home.js
• Home.scss
• About.js
• About.scss
• Missing.js
• Missing.scss
• Sind wir schon da?
• Danke fürs Lesen!

Nick spielt mehrere Tabletop-RPGs und Videospiele und schreibt Fantasy-Fiction.

Welches Werkzeug wird benötigt?

Der Einstieg in ReactJS ist nicht so einfach wie die Arbeit mit einem Framework wie jQuery oder ExtJS. Es sind mehrere Tools und einige Softwarepakete erforderlich, um eine ReactJS-Site mit einem Web API 2-Backend zu erstellen.

Erstens die IDEs. Ja, es gibt zwei, die ich für ein einzelnes Projekt verwende! Ich verwende Visual Studio 2015 (Sie können Visual Studio Community Edition verwenden) zum Erstellen des Basis-Web-API-2-Projekts. Dann verwende ich Visual Studio Code, um mit ReactJS zu arbeiten. Es verfügt über einige integrierte Funktionen, die das Arbeiten mit React einfacher machen als das Arbeiten mit Visual Studio 2015 (scheint mir auch seltsam!). Sie können beide hier herunterladen.

Nachdem Sie die beiden IDEs eingerichtet haben, erstellen Sie eine neue ASP.NET-Webanwendung in Visual Studio. In diesem Beispiel rufe ich das Projekt 'MyProject' auf und speichere es in 'C: Projects '.

Einrichten von ECMA6, ReactJS und der Küchenspüle

Dies ist der Teil, für den ich eine Weile gebraucht habe, um ihn vollständig zu erfassen, und ich habe möglicherweise immer noch keinen vollständigen Überblick über den Prozess! Ich kann Ihnen jedoch die Schritte zur Verfügung stellen, mit denen Sie in die richtige Richtung weisen. Zuerst müssen Sie zu https://nodejs.org gehen und NodeJS herunterladen. Ich habe die aktuelle Version heruntergeladen, aber Sie können die empfohlene Version sicher herunterladen.

var webpack = require ("webpack"); var ExtractTextPlugin = require ("extract-text-webpack-plugin"); module.exports = {entry: "./src/index.js", Ausgabe: {path: "MyProject / content", Dateiname: "bundle.js", publicPath: "/ content /"}, module: {loaders: [{test: /.js$/, exclude: / (node_modules) /, loader: 'babel-loader', query: {presets: ["latest", "stage-2", "react"]}}, {test: /.css$/, loader: ExtractTextPlugin.extract ({fallback: 'style-loader', benutze: 'css-loader! autoprefixer-loader'})}, {test: /.scss$/, loader: ExtractTextPlugin.extract ({fallback: 'style-loader', benutze: 'css-loader! autoprefixer-loader! sass-loader'})}, test: /.(jpg]}, plugins: [new ExtractTextPlugin ( "bundle.css")]};

Fast dort!

Wütend! Nachdem dies alles erledigt ist, müssen wir jetzt unsere Ordnerstruktur in unserem Projekt einrichten, um unsere Dateien aufzunehmen. Erstellen Sie im Projektordner 'C: Project MyProject MyProject ' einen 'Content'-Ordner. Hier werden bundle.js und bundle.css hingehen.

Erstellen Sie im selben Ordner eine index.html-Datei mit den folgenden Angaben.

! DOCTYPE html> html> head> title> Sampe Site / title> link rel = "stylesheet" type = "text / css" href = "content / bundle.css"> / head> body> div id = "reaktionscontainer "> / div> script src =" content / bundle.js "> / script> / body> / html>

Erstellen Sie im Stammordner 'C: / Projects / MyProject' einen 'src'-Ordner. Hier werden alle Ihre Komponenten und Stile abgelegt. Erstellen Sie im Ordner "src" einen Ordner "components", einen Ordner "images" und einen Ordner "styles". Erstellen Sie im Ordner 'src' eine Datei 'index.js'. Dies ist der Einstiegspunkt in Ihre Bewerbung.
Geben Sie in 'index.js' Folgendes ein und ändern Sie Ihre Routen nach Bedarf.

importieren Reagieren von 'reagieren'; ReactDOM aus 'react-dom' importieren; Seite aus './components/Page' importieren; import Missing from './components/Missing'; {Router, Route, HashHistory} aus 'React-Router' importieren; window.React = React; ReactDOM.render (Router history = {hashHistory}> Routenpfad = "/" component = {Page} /> Routenpfad = "Home" component = {Page} /> Routenpfad = "About" component = {Page} /> Route path = " *" component = {Missing} /> / Router>, document.getElementById ('react-container'));

Fügen Sie beim Erstellen von Komponenten die Datei *. Js zum Ordner 'components' und die Datei *. Scss zum Ordner 'styles' hinzu. Wir werden vier Komponenten erstellen: Seite, Startseite, Info und Vermisst.

Page.js

importieren Reagieren von 'reagieren'; {Link} von 'React-Router' importieren; Home von './Home' importieren; Importieren von About './About'; Import Missing from './Missing'; import '../styles/Page.scss'; Klassenseite erweitert React.Component {Konstruktor (Requisiten) {Super (Requisiten); this.getNavActions = this.getNavActions.bind (this); this.getNavAction = this.getNavAction.bind (this); } state = {sectionName: 'Home', activeAction: 0, activeComponent: Home />}; handleNavAction (Aktion) {try {var act = this.getNavAction (Aktion); if (! act) {act = {activeAction: -1, sectionName: 'Missing', activeComponent: Missing />}; } if (this.state.sectionName === act.sectionName) {return; } this.setState (act); } catch (ex) {}}; getNavActions () {return [{activeAction: 0, sectionName: 'Home', activeComponent: Home />}, {activeAction: 1, sectionName: 'About', activeComponent: About />},]; }; getNavAction (Wert, useAction = true) {var action = null; if (useAction) {action = this.getNavActions (). find (x => x.activeAction == value); } else {action = this.getNavActions (). find (x => x.sectionName === value); } if (! action) {action = {activeAction: -1, sectionName: value, activeComponent: Missing />}; } return action; }; componentWillMount () {var section = this.props.location.pathname.replace ('/', ''); if (section == '') {section = 'Home'; } this.setState (this.getNavAction (section, false)); }; render () {return (div className = "Seite"> div> Link zu = "/ Home" onClick = {this.handleNavAction.bind (this, 0)}> Home / Link> | Link zu = "/ About" onClick = {this.handleNavAction.bind (this, 1)}> Info / Link> | Link zu = "/ BadLink" onClick = {this.handleNavAction.bind (this, -1)}> Bad Link / Link> / div> {this.state.activeComponent} / div>); }; }; Standard-Seite exportieren;

Page.scss

.Seite {Hintergrundfarbe: Silber; }}

Home.js

importieren Reagieren von 'reagieren'; import '../styles/Home.scss'; const Home = () => {return (div className = "Home"> Dies ist die Home-Komponente / div>); }; Standard-Startseite exportieren;

Home.scss

.Home {Hintergrundfarbe: Silber; }}

About.js

importieren Reagieren von 'reagieren'; import '../styles/About.scss'; const About = () => {return (div className = "About"> Dies ist die About-Komponente / div>); }; Standard exportieren Info;

About.scss

Über {Hintergrundfarbe: Silber; }}

Missing.js

importieren Reagieren von 'reagieren'; import '../styles/Missing.scss'; const Missing = () => {return (div className = "Missing"> Die angeforderte URL kann nicht gefunden werden. / div>); }; Standard exportieren Fehlend;

Missing.scss

.Missing {Hintergrundfarbe: Silber; }}

Sobald dies alles vorhanden ist, sollte Ihre Dateistruktur wie in der Abbildung unten aussehen.

Sind wir schon da?

Ja! Jetzt müssen Sie nur noch Ihre Anwendung in Visual Studio (nicht in Code) ausführen, und Ihre index.html sollte drei Links und Text enthalten, alle mit silbernem Hintergrund. Sie können auf die Links klicken, um von "Startseite" zu "Info" und dann zu einem fehlerhaften Link mit dem Namen "Fehlerhafter Link" zu gelangen, um die fehlende Komponente zu demonstrieren.

Sie werden die URL in der Adressleiste für diese Enden in # / Home, # / About und # / BadLink bemerken. So funktioniert die clientseitige MVC von React-Router. Es wird eine einseitige App erstellt, die noch navigierbare Links enthält.

Danke fürs Lesen!

Vielen Dank, dass Sie dieses Tutorial gelesen haben.Ich hoffe, es hilft Ihnen, ohne so viel Einschüchterung mit WebPack und ReactJS zu beginnen. Sobald Sie den Dreh raus haben, werden Sie immer weniger auf die Installationsanweisungen verweisen! Sie können mehr über ReactJS erfahren

Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.