Introducció a ReactJS i Web API 2 Des de zero!

Content

• Quina eina es necessita?
• Configuració de ECMA6, ReactJS i el lavabo de cuina
• Casi allà!
• Pàgina.js
• Pàgina.scss
• Home.js
• Home.scss
• About.js
• About.scss
• Missing.js
• Missing.scss
• Ja hi som?
• Gràcies per llegir!

Nick juga diversos jocs de rol i videojocs de sobretaula, a més d’escriure ficció de fantasia.

Quina eina es necessita?

Com començar amb ReactJS no és tan senzill com treballar amb un framework com jQuery o ExtJS. Hi ha diverses eines i un parell de paquets de programari necessaris per crear un lloc ReactJS amb un backend de l'API web 2.

En primer lloc, els IDE. Sí, n’hi ha dos que faig servir per a un sol projecte. Utilitzo Visual Studio 2015 (podeu utilitzar Visual Studio Community Edition) per crear el projecte base API Web 2. Després faig servir Visual Studio Code per treballar amb ReactJS. Té algunes funcions integrades que fan que treballar amb React sigui més fàcil que treballar amb Visual Studio 2015 (a mi també em sembla estrany). Podeu descarregar-les totes dues aquí.

Un cop hàgiu configurat els dos IDE, seguiu endavant i creeu una nova aplicació web ASP.NET a Visual Studio. Per a aquest exemple, anomeno el projecte "El meu projecte" i el deso a "C: Projectes".

Configuració de ECMA6, ReactJS i el lavabo de cuina

Aquesta és la part que vaig trigar a comprendre completament i, potser, encara no en tinc una comprensió completa. Tanmateix, puc proporcionar els passos necessaris per orientar-vos en la direcció correcta. En primer lloc, heu de sortir a https://nodejs.org i descarregar NodeJS. He descarregat la versió actual, però podeu descarregar-la amb seguretat.

var webpack = require ("webpack"); var ExtractTextPlugin = require ("extract-text-webpack-plugin"); module.exports = {entrada: "./src/index.js", sortida: {ruta: "El meuProjecte / contingut", nom del fitxer: "bundle.js", publicPath: "/ content /"}, mòdul: {loaders: [{test: /.js$/, exclude: / (node_modules) /, loader: 'babel-loader', consulta: {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'})}, test: /.(jpg]}, connectors: [new ExtractTextPlugin ( "bundle.css")]};

Casi allà!

Vaja! Ara que tot això està fet, ara hem de configurar la nostra estructura de carpetes al nostre projecte per acomodar els nostres fitxers. A la carpeta del projecte "C: Project MyProject MyProject " creeu una carpeta "contingut". Aquí és on aniran bundle.js i bundle.css.

A la mateixa carpeta, creeu un fitxer index.html amb el següent.

! 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>

A la carpeta arrel "C: / Projects / MyProject" creeu una carpeta "src". Aquí és on aniran tots els vostres components i estils. A la carpeta "src", creeu una carpeta "components", una carpeta "imatges" i una carpeta "estils". A la carpeta "src", creeu un fitxer "index.js". Aquest serà el punt d’entrada a la vostra sol·licitud.
A 'index.js' escriviu el següent, canviant les rutes segons calgui.

importa Reacciona des de 'reacciona'; importar ReactDOM des de 'react-dom'; importa la pàgina des de './components/Page'; importació Falta de "./components/Missing"; importar {Router, Route, hashHistory} de 'react-router'; window.React = Reacciona; ReactDOM.render (Historial del router = {hashHistory}> Ruta de la ruta = "/" component = {Pàgina} /> Ruta de la ruta = component "Inici" = {Pàgina} /> Ruta de la ruta = "Quant a" component = {Pàgina} /> Ruta de la ruta = " *" component = {Falta> /> / Router>, document.getElementById ('react-container'));

Quan creeu components, afegiu el fitxer *. Js a la carpeta "components" i afegiu el fitxer *. Scss a la carpeta "estils". Crearem quatre components: Pàgina, Inici, Quant a i Falta.

Pàgina.js

importa Reacciona des de 'reacciona'; importar {Link} des de "react-router"; importa la pàgina d'inici des de './Home'; importació de "./ About"; importació Falta de './Missing'; importa "../styles/Page.scss"; classe Page amplia React.Component {constructor (props) {super (props); this.getNavActions = this.getNavActions.bind (això); this.getNavAction = this.getNavAction.bind (això); } state = {sectionName: 'Home', activeAction: 0, activeComponent: Home />}; handleNavAction (acció) {provar {var act = this.getNavAction (acció); if (! act) {act = {activeAction: -1, sectionName: 'Falta', activeComponent: Falta />}; } 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 (valor, useAction = true) {var action = nul; if (useAction) {action = this.getNavActions (). find (x => x.activeAction == valor); } else {action = this.getNavActions (). find (x => x.sectionName === valor); } if (! action) {action = {activeAction: -1, sectionName: value, activeComponent: Missing />}; } acció de retorn; }; componentWillMount () {var section = this.props.location.pathname.replace ('/', ''); if (section == '') {section = 'Inici'; } this.setState (this.getNavAction (secció, fals)); }; render () {return (div className = "Page"> div> Link to = "/ Home" onClick = {this.handleNavAction.bind (this, 0)}> Home / Link> | Link to = "/ About" onClick = {this.handleNavAction.bind (this, 1)}> Quant a / Enllaç> | Enllaç a = "/ BadLink" onClick = {this.handleNavAction.bind (this, -1)}> Enllaç / Enllaç incorrecte> / div> {this.state.activeComponent} / div>); }; }; exporta la pàgina predeterminada;

Pàgina.scss

.Pàgina {color de fons: plata; }

Home.js

importa Reacciona des de 'reacciona'; importa "../styles/Home.scss"; const Home = () => {return (div className = "Inici"> Aquest és el component d'inici / div>); }; exporta la pàgina d'inici per defecte;

Home.scss

.Home {color de fons: plata; }

About.js

importa Reacciona des de 'reacciona'; importa "../styles/About.scss"; const About = () => {return (div className = "About"> Aquest és el component About / div>); }; exporta per defecte Quant a;

About.scss

.A prop de {background-color: silver; }

Missing.js

importa Reacciona des de 'reacciona'; importa "../styles/Missing.scss"; const Missing = () => {return (div className = "Missing"> No es pot trobar l'URL sol·licitat. / div>); }; exportació per defecte Falta;

Missing.scss

. Falta {color de fons: plata; }

Un cop tot això al seu lloc, l'estructura del fitxer hauria de ser semblant a la de la imatge següent.

Ja hi som?

Sí! Ara només queda executar l’aplicació a Visual Studio (no Code) i el vostre index.html hauria de presentar tres enllaços i una mica de text, tot amb un fons platejat. Podeu fer clic als enllaços per anar des de Inici fins a Quant a i després a un enllaç incorrecte anomenat Enllaç incorrecte per demostrar el component Falta.

Notareu l'URL a la barra d'adreces que finalitza a # / Home, # / About i # / BadLink. Així funciona el MVC del client de React-Router. Crea una aplicació d'una sola pàgina que encara té enllaços navegables.

Gràcies per llegir!

Gràcies a tots per llegir aquest tutorial.Espero que us ajudi a començar amb WebPack i ReactJS sense tanta intimidació. Un cop ho comprengueu, us referirem a les instruccions de configuració cada vegada menys. Podeu obtenir més informació sobre ReactJS

Aquest article és precís i fidel al millor coneixement de l'autor. El contingut només té finalitats informatives o d’entreteniment i no substitueix l’assessorament personal ni l’assessorament professional en qüestions empresarials, financeres, legals o tècniques.