Introducere în cadrul React

/ ** @jsx React.DOM * / var Simplu = React.createClass (getInitialState: function () return count: 0; handleMouseDown: function () alert (' proset.message); this.setState (count: this.state.count + 1);, render: function () return 
 
 Dă-mi mesajul! 
 
Mesaj transmis This.state.count timp (s)
 
 ; ); React.renderComponent (, document.body);

jsx -watch src / build /

/ ** @jsx React.DOM * / var Simplu = React.createClass (displayName: 'Simple', getInitialState: function () return count: 0; handleMouseDown: (count: this.state.count + 1);, render: function () return React.DOM.div (null, React.DOM.div) (className: "clicker", onMouseDown: this.handleMouseDown, "Dă-mi mesajul!"), React.DOM.div ( className: "numără", acest număr de stat), "timp (e)"));); React.renderComponent (simplu (message: "Keep it Simple"), document.body);

și tag-uri hartă la instanțe de React.DOM.div și React.DOM.span.

• Acum, să ne întoarcem la exemplul nostru de cod. Interior handleMouseDown, noi facem uz de this.props pentru a citi mesaj proprietate care a fost trecută. Am stabilit mesaj pe ultima linie a fragmentului, la apelul către React.renderComponent () unde creăm componentă. Scopul de this.props este de a stoca datele care au fost transmise componentei. Este considerată imuabilă și numai o componentă de nivel superior este permisă să facă schimbări și să o trimită pe arborele component.
• Interior handleMouseDown am stabilit, de asemenea, unele state de utilizator cu this.setState () pentru a urmări numărul de afișări ale mesajului. Veți observa că vom folosi this.state în face() metodă. Oriunde suni setState (), Reacția declanșează de asemenea face() pentru a menține DOM în sincronizare. in afara de asta React.renderComponent (), setState () este un alt mod de a forța o reîmprospătare vizuală.

Evenimente sintetice

Evenimentele expuse pe DOM-intermediare, cum ar fi onmousedown, de asemenea, acționează ca un strat de indirecție înainte ca acestea să fie stabilite pe real-DOM. Aceste evenimente sunt denumite astfel Evenimente sintetice. React adoptă delegarea evenimentelor, o tehnică bine cunoscută și atașează evenimente doar la nivelul rădăcinilor real-DOM. Astfel, există un singur adevărat manipulator de evenimente pe DOM-ul real. În plus, aceste evenimente sintetice oferă și un nivel de consistență prin ascunderea diferențelor de browser și elemente.

Combinația evenimentelor intermediare-DOM și sintetice vă oferă o modalitate standard și coerentă de a defini UI-urile pe diferite browsere și chiar pe dispozitive.

Componenta ciclului de viață

Componentele din cadrul React au un ciclu de viață specific și incorporează o mașină de stat care are trei stări distincte.

Componenta vine la viață după ce a fost Montat. Rezultatele de asamblare duc la trecerea printr-o render-pass care generează arborele component (intermediar-DOM). Acest arbore este transformat și plasat într-un nod de containere al DOM real. Acesta este un rezultat direct al apelului către React.renderComponent ().

Odată montat, componenta rămâne în Actualizați stat. O componentă se actualizează atunci când schimbați statul folosind setState () sau schimbarea elementelor de recuzită folosind setProps (). Aceasta, la rândul său, are ca rezultat chemarea face(), care aduce DOM în sincronizare cu datele (recuzită + stat). Între actualizările ulterioare, React va calcula delta dintre arborele componente anterior și arborele nou generat. Acesta este un pas foarte optimizat (și o caracteristică emblematică) care minimizează manipularea pe DOM real.

Starea finală este nemontat. Acest lucru se întâmplă când apelați în mod explicit React.unmountAndReleaseReactRootNode () sau automat dacă o componentă era un copil care nu mai era generat într-un face() apel. Cel mai adesea nu trebuie să vă ocupați de acest lucru și lăsați-l pe React să facă ceea ce trebuie.

Acum ar fi fost un mare remiss, dacă React nu ți-a spus când sa mutat între Montat-update-nemontat state. Din fericire, nu este cazul și există cârlige pe care le puteți suprascrie pentru a obține notificări despre modificările ciclului de viață. Numele vorbesc de la sine:

• getInitialState (): pregătiți starea inițială a Componentei
• componentWillMount ()
• componentDidMount ()
• componentWillReceiveProps ()
• shouldComponentUpdate (): util dacă doriți să controlați când o răsunet ar trebui să fie omisă.
• componentWillUpdate ()
• face()
• componentDidUpdate ()
• componentWillUnmount ()

componentWill * metodele sunt numite înainte de schimbarea de stat și de componentDid * metode sunt numite după.

Unele dintre denumirile metodelor par să fi luat un indiciu din cadrele de cacao din Mac și iOS

Diverse caracteristici

Într-un arbore component, datele trebuie să scadă întotdeauna. O componentă părinte trebuie să stabilească recuzită a unei componente copil pentru a transmite orice date de la părinte copilului. Acesta este denumit Owned-proprietar pereche. Pe de altă parte, evenimentele utilizatorilor (mouse-ul, tastatura, atingetele) vor fi întotdeauna bulate de la copil până la componenta rădăcină, dacă nu sunt manipulate între.

Când creați DOM intermediar în face(), puteți de asemenea să atribuiți ref proprietate asupra unei componente a copilului. Apoi puteți să vă referiți la acesta de la părinte folosind ref proprietate. Acesta este descris în fragmentul de mai jos.

 render: function () // Setați returul ref 
 This.state.count 
;  handleMouseDown: function () // Utilizați ref console.log (this.refs.counter.innerHTML); ,

Ca parte a metadatelor componente, puteți seta starea inițială (getInitialState ()), pe care am văzut-o mai devreme în cadrul metodelor ciclului de viață. De asemenea, puteți seta valorile implicite ale recuzităilor cu getDefaultProps () și, de asemenea, să stabilească anumite reguli de validare a acestor elemente de recuzită propTypes. Documentele oferă o imagine de ansamblu frumoasă a diferitelor tipuri de validări (verificări de tip, necesare, etc.) pe care le puteți efectua.

React sprijină, de asemenea, conceptul de a mixin pentru a extrage bucăți reutilizabile de comportament care pot fi injectate în Componente disparate. Puteți trece amestecurile folosind mixins proprietatea unei Componente.

Acum, permiteți-vă să deveniți real și construiți o Componentă mai cuprinzătoare care utilizează aceste funcții.

Un editor de formate construit folosind React

În acest exemplu, vom construi un editor care acceptă un simplu DSL (Domain Specific Language) pentru crearea de forme. Pe măsură ce tastați, veți vedea ieșirea corespunzătoare din lateral, oferindu-vă feedback în timp real.

DSL vă permite să creați trei tipuri de forme: Ellipse, Rectangle și Text. Fiecare formă este specificată pe o linie separată împreună cu o grămadă de proprietăți de styling. Sintaxa este simplă și împrumută puțin de la CSS. Pentru a analiza o linie, folosim un Regex care arată ca:

 var formaRegex = / (rect | ellipse | text) (\ s [a-z] +: \ s [a-z0-9] +;) * / i;

De exemplu, următorul set de linii descrie două dreptunghiuri și o etichetă de text ...

// Reacționează valoarea textului etichetei: React; culoare: # 00D8FF; font-size: 48px; text-shadow: 1px 1px 3px # 555; padding: 10px; stânga: 100px; top: 100px; // left logo rect fundal: url (react.png) no-repeat; frontieră: nici una; lățime: 38; înălțime: 38; stânga: 60px; top: 120px; // dreapta logo-ul rect logo: url (react.png) no-repeat; frontieră: nici una; lățime: 38; înălțime: 38; stânga: 250px; top: 120px;

... generând rezultatul indicat mai jos:

Configurare

Bine, dă-i drumul și construiește acest editor. Vom începe cu fișierul HTML (index.html), unde am introdus marcajul de nivel superior și includem bibliotecile și scripturile de aplicație. Am prezentat doar părțile relevante aici:

  -- Selectați o mostră -- Reacţiona Robot  
              

În fragmentul de mai sus, recipient div păstrează DOM-ul nostru generat de React. Scripturile noastre de aplicație sunt incluse în /construi director. Folosim JSX în cadrul componentelor noastre și observatorul liniei de comandă (jsx), pune fișierele JS convertite /construi. Rețineți că această comandă de observator face parte din reacționează-unelte Modulul NPM.

jsx -watch src / build /

Editorul este defalcat într-un set de componente, care sunt enumerate mai jos:

• ShapeEditor: componenta rădăcină din arborele component
• ShapeCanvas: responsabil pentru generarea componentelor de formă (elipsă, dreptunghi, text). Acesta este conținut în ShapeEditor.
• ShapeParser: responsabil pentru parsarea textului și extragerea listei cu definițiile de formă. Se analizează linia cu linia Regex pe care am văzut-o mai devreme. Liniile nevalide sunt ignorate. Aceasta nu este într-adevăr o componentă, ci un obiect JS helper, folosit de ShapeEditor.
• Elipsă, dreptunghi, text: forma Componente. Acestea devin copii ai ShapeCanvas.
• ShapePropertyMixin: oferă funcții de ajutor pentru extragerea stilurilor găsite în definițiile formelor. Aceasta este amestecată în cele trei componente cu forma folosind mixins proprietate.
• aplicaţia: punctul de intrare al editorului. Acesta generează componenta rădăcină (ShapeEditor) și vă permite să alegeți o mostră de formă din meniul derulant.

Relația dintre aceste entități este afișată în arborele componente adnotat:

Componentă ShapeEditor

Să examinăm punerea în aplicare a unora dintre aceste componente, începând cu ShapeEditor.

/ ** @jsx React.DOM * / var ShapeEditor = React.createClass (componentWillMount: function () this._parser = noua ShapeParser ();, getInitialState: render: function () var shapes = this._parser.parse (acest.state.text); var tree = ( 
  <ShapeCanvas shapes=shapes /> </div>); retur copac; , handleTextChange: funcție (eveniment) this.setState (text: event.target.value);</pre> <p>După cum sugerează și numele, ShapeEditor oferă experiența de editare generând <code><textarea/></code> și feedback-ul live pe <code><ShapeCanvas/<</code>. Ascultă <code>cu privire la schimbările</code> eveniment (evenimentele din React sunt denumite întotdeauna cu caz de cămilă) pe <code><textarea/></code> și la fiecare schimbare, stabilește <code>text</code> proprietatea componentei <code>stat</code>. Așa cum am menționat mai devreme, de fiecare dată când setați statul folosind <code>setState ()</code>, render se numește automat. În acest caz, <code>face()</code> din ShapeEditor este numit unde analizăm textul din stat și reconstruim formele. Rețineți că începem cu o stare inițială de text gol, care este setat în <code>getInitialState ()</code> cârlig.</p> <p>Pentru parsarea textului într - un set de forme, utilizăm o instanță a <code>ShapeParser</code>. Am lăsat detaliile parserului pentru a menține discuția pe React. Exemplu parser este creat în <code>componentWillMount ()</code> cârlig. Aceasta se numește chiar înainte ca componenta să se monteze și este un loc bun pentru a face orice inițializări înainte ca prima renderare să se întâmple.</p> <p>În general, este recomandat să vă plictisiți toată procesarea complexă prin <code>face()</code> metodă. Operatorii de evenimente au setat starea în timp <code>face()</code> este centrul pentru toate logica dvs. de bază.</p> <p> <code>ShapeEditor</code> folosește această idee pentru a face parsarea în interiorul ei <code>face()</code> și înaintează formele detectate prin setarea <code>forme</code> proprietate a <code>ShapeCanvas</code>. Acesta este modul în care datele se strecoară în copacul component, de la proprietar (<code>ShapeEditor</code>) către proprietarul (<code>ShapeCanvas</code>).</p> <p>Un ultim lucru de observat aici este că avem primul comentariu pentru a indica traducerea JSX → JS.</p> <h3>ShapeCanvas pentru a genera forme</h3> <p>Apoi, vom trece la componentele ShapeCanvas și Ellipse, Rectangle și Text.</p> <p>p> <code>ShapeCanvas</code> este destul de simplă, cu responsabilitatea sa principală de a genera respectivul <code><Ellipse/></code>, <code><Rectangle/></code> și <code><Text/></code> componente din definițiile adoptate (<code>this.props.shapes</code>). Pentru fiecare formă, trecem în proprietățile parsate cu expresia atributului: <code>Proprietăți = shape.properties</code>.</p> <pre>/ ** @jsx React.DOM * / var ShapeCanvas = React.createClass (getDefaultProps: function () return forme: []; <div> this.props.shapes.map (funcția (s) return self._createShape (s); </div>; var noTree = <div>Nu au fost găsite forme</div>; returnați acest.props.shapes.length> 0? shapeTree: noTree; , _createShape: funcția (forma) return this._shapeMap [shape.type] (shape); , _shapeMap: elipsă: funcție (formă) retur <Ellipse properties=shape.properties />; , rect: funcție (formă) retur <Rectangle properties=shape.properties />; , text: funcție (formă) retur <Text properties=shape.properties />; );</pre> <p>Un lucru diferit aici este faptul că arborele nostru component nu este static, așa cum îl avem în ShapeEditor. În schimb, este generat în mod dinamic prin looping peste formele transmise. Mai arătăm și <code>"Nicio formă nu a fost găsită"</code> dacă nu există nimic de arătat.</p> <h3>Formele: elipsă, dreptunghi, text</h3> <p>Toate formele au o structură similară și diferă doar în stil. Ei folosesc de asemenea <code>ShapePropertyMixin</code> pentru a gestiona generarea stilului.</p> <p>Iată Ellipse:</p> <pre>/ ** @jsx React.DOM * / var Ellipse = React.createClass (mixins: [ShapePropertyMixin], render: function () var style = this.extractStyle (true) 50% 50% "; <div style=style />; );</pre> <p>Implementarea pentru <code>extractStyle ()</code> este furnizat de către <code>ShapePropertyMixin</code>.</p> <p>Componenta dreptunghiulară urmează exemplul, desigur fără <em>border-radius</em> stil. Componenta Text are o proprietate suplimentară numită <code>valoare</code> care stabilește textul interior pentru <code><div/></code>. </p> <p>Iată textul, pentru a clarifica acest lucru:</p> <pre>/ ** @jsx React.DOM * / var Text = React.createClass (mixins: [ShapePropertyMixin], render: function () var style = this.extractStyle (false); <div style=style>This.props.properties.value</div>; );</pre> <h3>Legarea tuturor cu App.js</h3> <p><code>app.js</code> este locul în care îl aducem împreună. Aici facem componenta rădăcină, <code>ShapeEditor</code> și oferă, de asemenea, suport pentru a comuta între câteva forme de eșantion. Atunci când alegeți o altă mostră din drop - down, încărcați un text predefinit în <code>ShapeEditor</code> și provocați <code>ShapeCanvas</code> a updata. Acest lucru se întâmplă în <code>readShapes ()</code> metodă.</p> <pre>/ ** @jsx React.DOM * / var formaEditor = <ShapeEditor />; React.renderComponent (shapeEditor, document.getElementsByClassName ('container') [0]); (*) editorul valului (text); formEditor.setState (filename = $ (' text: text); // forțați o render $ ('.formes-picker') schimbare (readShapes); readShapes (); // timpul de încărcare</pre> <p>Pentru a exersa partea creativă, aici este un robot construit folosind editorul Shape:</p>  <img src="//accentsconagua.com/img/images_16/intro-to-the-react-framework_7.png"><br> <h2>Și asta este pentru tine!</h2> <p>Pfiu! Acesta a fost un articol destul de lung și după ce ați ajuns la acest punct, ar trebui să aveți un sentiment de realizare! </p> <p>Am explorat o mulțime de concepte aici: rolul integral al componentelor în cadrul, utilizarea lui JSX pentru a descrie cu ușurință un arbore component (aka intermediar-DOM), diverse cârlige pentru conectarea la componenta de viață a componentelor, utilizarea <code>stat</code> și <code>recuzită</code> pentru a conduce procesul de redare, folosirea Mixins pentru a determina comportamentul refolosibil și, în final, trageți toate acestea împreună cu exemplul Editor Shape.</p> <p>Sper că acest articol vă oferă suficienți stimulenți pentru a crea câteva aplicații React pentru dvs. Pentru a continua explorarea, iată câteva linkuri utile:</p> <ul> <li>Documente</li> <li>Sursă pe Github</li> <li>Blog</li> </ul>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/code">Cod</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/code/intro-to-tmux.html">Intrăm la Tmux</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_17/intro-to-tmux.jpg');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/code/intro-to-tgm-plugin-activation-class-for-wordpress-a-video.html">Intro la clasa de activare TGM Plugin pentru WordPress, un video</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26/intro-to-tgm-plugin-activation-class-for-wordpress-a-video.jpg');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Căutare...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>