Fillimi me ReactJS dhe Web API 2 nga Scratch!

Përmbajtje

• Çfarë mjeti nevojiten?
• Vendosja e ECMA6, ReactJS dhe lavamanit të kuzhinës
• Pothuajse atje!
• Faqja.js
• Faqja.scss
• Home.js
• Shtëpi.scss
• Rreth.js
• Rreth.scss
• Mungon.js
• Mungon.scss
• A jemi akoma atje?
• Faleminderit per leximin!

Nick luan RPG të shumta tabletop dhe lojëra video, si dhe shkruan trillime fantastike.

Çfarë mjeti nevojiten?

Fillimi me ReactJS nuk është aq i shpejtë përpara sa puna me një kornizë si jQuery ose ExtJS. Ekzistojnë disa mjete dhe disa paketa softuerësh të nevojshme për të krijuar një faqe ReactJS me një backend Web API 2.

Së pari, IDE-të. Po, janë dy që i përdor për një projekt të vetëm! Unë përdor Visual Studio 2015 (mund të përdorni Visual Studio Community Edition) për krijimin e projektit bazë Web API 2. Pastaj unë përdor Kodin Visual Studio për të punuar me ReactJS. Ka disa karakteristika të integruara që e bëjnë punën me React më të lehtë sesa të punosh me të në Visual Studio 2015 (më duket e çuditshme edhe mua!). Ju mund t'i shkarkoni të dy këtu.

Pasi të keni konfiguruar dy IDE, shkoni përpara dhe krijoni një Aplikim të ri Web ASP.NET në Visual Studio. Për këtë shembull, unë po e quaj projektin 'MyProject' dhe po e ruaj në 'C: Projects '.

Vendosja e ECMA6, ReactJS dhe lavamanit të kuzhinës

Kjo është pjesa që më mori pak kohë për ta kuptuar plotësisht, dhe mund të mos kem akoma një kuptim të plotë të procesit! Sidoqoftë, unë mund të siguroj hapat për t'ju drejtuar në drejtimin e duhur. Së pari, duhet të dilni në https://nodejs.org dhe të shkarkoni NodeJS. Kam shkarkuar versionin aktual, por ju mund ta shkarkoni në mënyrë të sigurt versionin e rekomanduar.

var webpack = kërkoj ("webpack"); var ExtractTextPlugin = kërkoj ("extract-text-webpack-plugin"); module.exports = {hyrja: "./src/index.js", dalja: {shtegu: "MyProject / përmbajtja", emri i skedarit: "bundle.js", publicPath: "/ content /"}, moduli: {ngarkuesit: [{test: /.js$/, përjashto: / (modulet e nyjeve) /, ngarkuesin: 'babel-loader', pyetjen: {paravendosjet: ["më të fundit", "faza-2", "reagoni"]}}}, {test: /.css$/, ngarkues: ExtractTextPlugin.extract ({fallback: 'style-loader', use: 'css-loader! autoprefixer-loader'})}, {test: /.scss$/, ngarkuesi: ExtractTextPlugin.extract ({fallback: 'style-loader', use: 'css-loader! autoprefixer-loader! sass-loader'})}, test: /.(jpg]}, shtojcat: [new ExtractTextPlugin ( "bundle.css")]};

Pothuajse atje!

Whew! Tani që e gjithë kjo është bërë, ne tani duhet të krijojmë strukturën tonë të dosjeve në projektin tonë për të akomoduar skedarët tanë. Në dosjen e projektit 'C: Project MyProject MyProject ' krijoni një dosje 'përmbajtje'. Këtu do të shkojnë bundle.js dhe bundle.css.

Në të njëjtën dosje, krijoni një skedar index.html me sa vijon.

! DOCTYPE html> html> head> title> Sampe Site / title> link rel = "stylesheet" type = "text / css" href = "content / bundle.css"> / head> body> div id = "reagim-kontejner "> / div> skripti src =" content / bundle.js "> / shkrimi> / trupi> / html>

Në dosjen rrënjësore 'C: / Projects / MyProject' krijoni një dosje 'src'. Këtu do të shkojnë të gjithë përbërësit dhe stilet tuaja. Në dosjen 'src', krijoni një dosje 'përbërësit', një dosje 'images' dhe një dosje 'styles'. Në dosjen 'src', krijoni një skedar 'index.js'. Kjo do të jetë pika e hyrjes në aplikimin tuaj.
Në 'index.js' shkruani sa vijon, duke ndryshuar Rrugët tuaja sipas nevojës.

import Reagoni nga 'reagoni'; importoni ReactDOM nga 'reagoni-dom'; importo faqen nga './components/Page'; import Mungon nga './components/Missing'; importoni {Router, Route, hashHistory} nga 'reagoni-router'; dritarja. Reagoni = Reagoni; ReactDOM.render (Historia e routerit = {hashHistory}> Rruga e itinerarit = "/" përbërësi = {Page} /> Rruga e rrugës = "Shtëpia" përbërësi = {Page} /> Rruga e itinerarit = "Rreth" përbërësi = {Page} /> Rruga e itinerarit = " *" përbërësi = {Mungon} /> / Ruteri>, document.getElementById ('reagoni-kontejnerin'));

Kur krijoni përbërës, shtoni skedarin *. Js në dosjen 'komponentët' dhe shtoni skedarin *. Scss në dosjen 'styles'. Ne do të krijojmë katër komponentë: Faqja, Faqja kryesore, Rreth dhe Mungon.

Faqja.js

import Reagoni nga 'reagoni'; importoni {Link} nga 'reagoni-router'; importo Shtëpinë nga './Home'; import Rreth nga './Rreth'; import Mungon nga './Missing'; importo '../styles/Page.scss'; klasa Faqja shtrihet React.Component {konstruktor (props) {super (props); this.getNavActions = this.getNavActions.bind (kjo); this.getNavAction = this.getNavAction.bind (kjo); } state = {sectionName: 'Home', activeAction: 0, activeComponent: Home />}; handleNavAction (veprim) {try {var act = this.getNavAction (veprim); nëse (! vepro) {akt = {aktivAksion: -1, emri i seksionit: 'Mungon', aktiv Komponenti: Mungon />}; } if (this.state.sectionName === act.sectionName) {return; } this.setState (vepro); } kap (ish) {}}; getNavActions () {return [{activeAction: 0, sectionName: 'Home', activeComponent: Home />}, {activeAction: 1, sectionName: 'About', activeComponent: About />},]; }; getNavAction (vlera, useAction = e vërtetë) {var veprim = null; nëse (useAction) {action = this.getNavActions (). find (x => x.activeAction == vlera); } other {action = this.getNavActions (). find (x => x.sectionName === vlera); } nëse (! veprim) {veprim = {aktivAksion: -1, emri i seksionit: vlera, aktiveKomponenti: Mungon />}; } veprim kthyes; }; componentWillMount () {var seksion = this.props.location.pathname.replace ('/', ''); nëse (seksioni == '') {seksioni = 'Shtëpia'; } this.setState (this.getNavAction (seksioni, false)); }; render () {return (div className = "Page"> div> Link to = "/ Home" onClick = {this.handleNavAction.bind (kjo, 0)}> Home / Link> | Lidhje me = "/ Rreth" onClick = {this.handleNavAction.bind (kjo, 1)}> Rreth / Link> | Lidhje me = "/ BadLink" onClick = {this.handleNavAction.bind (kjo, -1)}> Lidhje / Lidhje e keqe> / div> {this.state.activeComponent} / div>); }; }; eksporto faqen e paracaktuar;

Faqja.scss

. Faqe {ngjyra-sfond: argjend; }

Home.js

import Reagoni nga 'reagoni'; importo '../styles/Home.scss'; const Shtëpi = () => {kthim (div className = "Shtëpi"> Ky është Komponenti i Shtëpisë / div>); }; eksporti i paracaktuar Home;

Shtëpi.scss

.Shtëpia {ngjyra-sfond: argjend; }

Rreth.js

import Reagoni nga 'reagoni'; importo '../styles/About.scss'; const Rreth = () => {return (div className = "Rreth"> Kjo është Rreth Komponentit / div>); }; eksporti i parazgjedhur Rreth;

Rreth.scss

Rreth {background-color: argjendi; }

Mungon.js

import Reagoni nga 'reagoni'; importo '../styles/Missing.scss'; const Mungon = () => {return (div className = "Mungon"> Nuk mund të gjej url të kërkuar. / div>); }; eksporti i parazgjedhur Mungon;

Mungon.scss

{Mungon {sfondi-ngjyra: argjendi; }

Pasi të jetë vendosur e gjithë kjo, struktura juaj e skedarit duhet të duket si ajo në imazhin më poshtë.

A jemi akoma atje?

Po! Tani mbetet vetëm të ekzekutoni aplikacionin tuaj në Visual Studio (jo Kodin) dhe indeksin tuaj.html duhet të dalë me tre lidhje dhe disa tekste, të gjitha me një sfond argjendi. Ju mund të klikoni në lidhjet për të shkuar nga Home tek About dhe më pas në një lidhje të keqe të quajtur Bad Link për të demonstruar përbërësin që Mungon.

Ju do të vini re url në shiritin e adresave për këto përfundime në # / Home, # / About, dhe # / BadLink. Kështu funksionon MVC nga ana e klientit e React-Router. Krijon një aplikacion me një faqe të vetme që ka ende lidhje të lundrueshme.

Faleminderit per leximin!

Faleminderit të gjithëve për leximin e këtij tutoriali.Shpresoj të të ndihmojë të fillosh me WebPack dhe ReactJS pa kaq shumë frikësime. Sapo ta zbrisni, do t'i referoheni udhëzimeve të konfigurimit gjithnjë e më pak! Mund të mësoni më shumë rreth ReactJS

Ky artikull është i saktë dhe i vërtetë për sa i përket njohurive të autorit. Përmbajtja është vetëm për qëllime informuese ose argëtuese dhe nuk zëvendëson këshillën personale ose këshillën profesionale në çështje biznesi, financiare, ligjore ose teknike.