Ξεκινώντας με το ReactJS και το Web API 2 από το μηδέν!

Περιεχόμενο

• Τι εργαλείο χρειάζονται;
• Ρύθμιση ECMA6, ReactJS και του νεροχύτη κουζίνας
• Σχεδόν έτοιμο!
• Σελίδα.js
• Σελίδα.scss
• Home.js
• Home.scss
• Σχετικά με το jj
• Σχετικά.scss
• Λείπει. Js
• Λείπει.scss
• Είμαστε ακόμη εκεί?
• Ευχαριστώ για την ανάγνωση!

Ο Nick παίζει πολλά επιτραπέζια RPG και βιντεοπαιχνίδια, καθώς και γράφει φανταστική φαντασία.

Τι εργαλείο χρειάζονται;

Το να ξεκινήσετε με το ReactJS δεν είναι τόσο απλό όσο δουλεύετε με ένα πλαίσιο όπως το jQuery ή το ExtJS. Υπάρχουν πολλά εργαλεία και δύο πακέτα λογισμικού που απαιτούνται για τη δημιουργία ενός ιστότοπου ReactJS με ένα backend Web API 2.

Πρώτον, οι IDE. Ναι, υπάρχουν δύο που χρησιμοποιώ για ένα μόνο έργο! Χρησιμοποιώ το Visual Studio 2015 (μπορείτε να χρησιμοποιήσετε το Visual Studio Community Edition) για τη δημιουργία του βασικού έργου API API 2. Στη συνέχεια, χρησιμοποιώ το Visual Studio Code για να συνεργαστώ με το ReactJS. Έχει μερικές ενσωματωμένες δυνατότητες που καθιστούν την εργασία με το React ευκολότερη από την εργασία με αυτό στο Visual Studio 2015 (μου φαίνεται περίεργο!). Μπορείτε να κατεβάσετε και τα δύο εδώ.

Μόλις ρυθμίσετε τα δύο IDE, προχωρήστε και δημιουργήστε μια νέα εφαρμογή Web ASP.NET στο Visual Studio. Για αυτό το παράδειγμα, αποκαλώ το έργο «MyProject» και το αποθηκεύω στο «C: Projects ».

Ρύθμιση ECMA6, ReactJS και του νεροχύτη κουζίνας

Αυτό είναι το κομμάτι που μου πήρε λίγο χρόνο για να κατανοήσω πλήρως και ίσως ακόμα δεν έχω πλήρη κατανόηση της διαδικασίας! Ωστόσο, μπορώ να δώσω τα βήματα για να σας δείξω στη σωστή κατεύθυνση. Πρώτα, πρέπει να μεταβείτε στο https://nodejs.org και να κατεβάσετε το NodeJS. Κατέβασα την τρέχουσα έκδοση, αλλά μπορείτε να κατεβάσετε με ασφάλεια την προτεινόμενη έκδοση.

var webpack = απαιτείται ("webpack"); var ExtractTextPlugin = απαιτείται ("extract-text-webpack-plugin"); module.exports = {entry: "./src/index.js", έξοδος: {διαδρομή: "MyProject / content", όνομα αρχείου: "bundle.js", publicPath: "/ content /"}, ενότητα: {φορτωτές: [{test: /.js$/, exclude: / (node_modules) /, loader: 'babel-loader', ερώτημα: {presets: ["latest", "stage-2", "react"]}}, {test: /.css$/, loader: ExtractTextPlugin.extract ({fallback: 'style-loader', use: 'css-loader! autoprefixer-loader'})}}, {test: /.scss$/, loader: ExtractTextPlugin.extract ({fallback: 'style-loader', use: 'css-loader! autoprefixer-loader! sass-loader'})}, δοκιμή: /.(jpg]}, plugins: [new ExtractTextPlugin ( "bundle.css")]};

Σχεδόν έτοιμο!

Μπά! Τώρα που όλα αυτά έχουν γίνει, πρέπει τώρα να ρυθμίσουμε τη δομή φακέλων στο έργο μας για να φιλοξενήσουμε τα αρχεία μας. Στο φάκελο έργου 'C: Project MyProject MyProject ' δημιουργήστε ένα φάκελο 'content'. Εδώ θα πάνε το bundle.js και το bundle.css.

Στον ίδιο φάκελο, δημιουργήστε ένα αρχείο index.html με τα ακόλουθα.

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

Στο ριζικό φάκελο 'C: / Projects / MyProject' δημιουργήστε ένα φάκελο 'src'. Εδώ θα πάνε όλα τα στοιχεία και τα στυλ σας. Στο φάκελο "src", δημιουργήστε ένα φάκελο "συστατικά", ένα φάκελο "εικόνες" και ένα φάκελο "στυλ". Στο φάκελο "src", δημιουργήστε ένα αρχείο "index.js". Αυτό θα είναι το σημείο εισόδου στην αίτησή σας.
Στο 'index.js' πληκτρολογήστε τα ακόλουθα, αλλάζοντας τις διαδρομές σας όπως απαιτείται.

εισαγωγή React από το "react"; εισαγωγή ReactDOM από το 'react-dom'; εισαγωγή σελίδας από './components/Page'; εισαγωγή Λείπει από "./components/Missing"; εισαγάγετε {Router, Route, hashHistory} από το "react-router". window.React = Αντιδρά; ReactDOM.render (Router history = {hashHistory}> Route path = "/" component = {Page} /> Route path = "Home" component = {Page} /> Route path = "About" component = {Page} /> Διαδρομή διαδρομής = " *" component = {Λείπει} /> / Router>, document.getElementById ('react-container'));

Κατά τη δημιουργία στοιχείων, προσθέστε το αρχείο *. Js στο φάκελο "components" και προσθέστε το αρχείο *. Scss στο φάκελο "στυλ". Θα δημιουργήσουμε τέσσερα στοιχεία: Σελίδα, Σπίτι, Πληροφορίες και Λείπει.

Σελίδα.js

εισαγωγή React από το "react"; εισαγωγή {Link} από το "react-router". εισαγωγή αρχικής σελίδας από το './Home'; εισαγωγή Σχετικά με το './About'; εισαγωγή Λείπει από "./Missing"; εισαγωγή '../styles/Page.scss'; Η σελίδα τάξης επεκτείνει το React.Component {buildor (props) {super (props); this.getNavActions = this.getNavActions.bind (αυτό); this.getNavAction = this.getNavAction.bind (αυτό); } κατάσταση = {sectionName: 'Home', activeAction: 0, activeComponent: Home />}; handleNavAction (δράση) {δοκιμάστε {var act = this.getNavAction (δράση); if (! act) {act = {activeAction: -1, sectionName: 'Missing', activeComponent: Missing />}; } if (this.state.sectionName === act.sectionName) {επιστροφή; } this.setState (πράξη); } αλίευση (πρώην) {}}; getNavActions () {return [{activeAction: 0, sectionName: 'Home', activeComponent: Home />}, {activeAction: 1, sectionName: 'About', activeComponent: About />},]; }; getNavAction (τιμή, useAction = true) {var action = null; if (useAction) {action = this.getNavActions (). find (x => x.activeAction == τιμή); } αλλιώς {action = this.getNavActions (). find (x => x.sectionName === τιμή); } if (! action) {action = {activeAction: -1, sectionName: value, activeComponent: Λείπει />}; } επιστροφή δράσης; }; componentWillMount () {var section = this.props.location.pathname.replace ('/', ''); if (ενότητα == ") {ενότητα =" Σπίτι "; } this.setState (this.getNavAction (ενότητα, false)); }; render () {return (div className = "Page"> div> Link to = "/ Home" onClick = {this.handleNavAction.bind (this, 0)}> Αρχική / Σύνδεσμος> | Σύνδεσμος προς = "/ Σχετικά με" onClick = {this.handleNavAction.bind (this, 1)}> About / Link> | Σύνδεσμος προς = "/ BadLink" onClick = {this.handleNavAction.bind (this, -1)}> Bad Link / Link> / div> {this.state.activeComponent} / div>); }; }; εξαγωγή προεπιλεγμένης σελίδας;

Σελίδα.scss

. Σελίδα {background-color: silver; }

Home.js

εισαγωγή React από το "react"; εισαγωγή '../styles/Home.scss'; const Home = () => {return (div className = "Home"> Αυτό είναι το Home Component / div>); }; προεπιλεγμένη εξαγωγή Αρχική σελίδα;

Home.scss

. Σπίτι {background-color: silver; }

Σχετικά με το jj

εισαγωγή React από το "react"; εισαγωγή '../styles/About.scss'; const About = () => {return (div className = "About"> Αυτό είναι το About Component / div>); }; προεπιλογή εξαγωγής Πληροφορίες

Σχετικά.scss

. Σχετικά με το {background-color: silver; }

Λείπει. Js

εισαγωγή React από το "react"; εισαγωγή '../styles/Missing.scss'; const Λείπει = () => {return (div className = "Missing"> Δεν είναι δυνατή η εύρεση του ζητούμενου url. / div>); }; εξαγωγή προεπιλογή Λείπει;

Λείπει.scss

. Λείπει {background-color: silver; }

Μόλις όλα αυτά εφαρμοστούν, η δομή του αρχείου σας θα πρέπει να μοιάζει με αυτήν στην παρακάτω εικόνα.

Είμαστε ακόμη εκεί?

Ναί! Τώρα το μόνο που μένει είναι να εκτελέσετε την εφαρμογή σας στο Visual Studio (όχι κώδικα) και το index.html θα πρέπει να εμφανιστεί με τρεις συνδέσμους και κάποιο κείμενο, όλα με ασημί φόντο. Μπορείτε να κάνετε κλικ στους συνδέσμους για μετάβαση από την αρχική σελίδα στο About και στη συνέχεια σε έναν κακό σύνδεσμο που ονομάζεται Bad Link για να δείξετε το στοιχείο που λείπει.

Θα παρατηρήσετε τη διεύθυνση URL στη γραμμή διευθύνσεων για αυτά τα τέλη στο # / Home, # / About και # / BadLink. Έτσι λειτουργεί το MVC από την πλευρά του πελάτη του React-Router. Δημιουργεί μια εφαρμογή μιας σελίδας που εξακολουθεί να διαθέτει πλέξιμους συνδέσμους.

Ευχαριστώ για την ανάγνωση!

Σας ευχαριστώ όλους που διαβάσατε αυτό το σεμινάριο.Ελπίζω να σας βοηθήσει να ξεκινήσετε με το WebPack και το ReactJS χωρίς τόση εκφοβισμό. Μόλις το καταλάβετε, ανατρέξτε στις οδηγίες εγκατάστασης όλο και λιγότερο! Μπορείτε να μάθετε περισσότερα για το ReactJS

Αυτό το άρθρο είναι ακριβές και πιστό από ό, τι γνωρίζουν οι συγγραφείς. Το περιεχόμενο προορίζεται μόνο για ενημερωτικούς ή ψυχαγωγικούς σκοπούς και δεν υποκαθιστά προσωπικές συμβουλές ή επαγγελματικές συμβουλές σε επιχειρηματικά, οικονομικά, νομικά ή τεχνικά θέματα.