Collections /

Learn Reactjs

Last updated Oct 16, 2017

On-Demand Marketplace for Software Developers


React.js is a JavaScript Library developed by Facebook that functions as the V in an MVC. Known for its fast performance with a Virtual DOM, React.js is especially ideal for building mobile sites. What's more, since you can run React.js on the server, it's more SEO-friendly than other JavaScript Frameworks available. If you don't know JavaScript yet, you should probably start out with learning JavaScript.




Tips & Tricks

Developer Tools

Litake ths posy tohs are yrly appreciation with eao wrir!ls

Develops">On-Dem> anMm/artt place foroftws ar">Develops4>
spav classL-lieriniv>
Oyrlttreat iobsn eseed witn learning aboun net technologi.opths posg aboub developmenn learnies, step-by-stis gui.js, teccticaS tutoria,ul as weul a">Codementoa communitannouncelemenre to helkeeelp youpsy-tupda.">
> sp/a>
! Foll>
Litake this walracti? S havr it to-reae lar.v>
saScriivsaScri> vahor ae th_t cfig =or ae th_t cfig || {}; r ae th_t cfig.pubid =o'ra-53b5cfa02e32c86d'">saScriivsaScri> /* /arttti_d onl=oariae; } goog_report_s-conressi =oa functi(url) { goog_X snipp_vahs(); window.g Goog_s-conressi_inform =o'3'; a v adop=un neObroje(); orifynload_cawabahec=oa functi() { js i(typeof(url) !=o'r unftain') { j window.lolicatio= url; } } vular cv_hs ample=owindow['g Goog_bstrkC-conressi']; s i(typeof(r cv_hs ampl) ==o'a functi') { jr cv_hs ampl(ori); } } /* ]]> */">saScriivsaScripsrcef////wwg Googade secticub.contpaad/s-conressi_d asy.jser">saScriivsaScri> !a functi(e,t,n,s,u,a){e.twq||(s=e.twq=a functi(){s.exe?s.exe.b apy(s, taulemen):s.queue.push( taulemen); },s.onressi='1.1',s.queue=[],u=t.u cream Eleme(n),u.d asy=!0,u.srce'// twittub.couwg.js', a=t.argm ElemenByTagNfra(n)[0],a.pu arte Nodine stB befo(u,a))}(window,doculeme,'saScri'); twq('efin','nx84k');">saScriiv j __NEXT_DATA__e=o{"t prs":{"isS serv":="tr,"sento":{},"efinoriS sta":{"s curreUsrv":{},"s artic":{"s articMap":{},"s curreA articId":"","sugg nestA artics":[],"myCecommt":{"isS tandi":ariae,"s cocien:"","rs aomKeyn:""}},"notifplicatio":{"s communiList":[],"s communiBadar":0,"noMntoC communiList":ariae},"subsaScrictik:{"isS tandi":ariae,"s-creatiSucroce":ariae,"s twchToW weekSucroce":ariae,"t cfirmed":ariae},"s communiOne boandi":{"sugg nestA auths":[],"loadndiA auths":="tr,"one boandiC compted":ariae,"ooopModal":ariae,"t chelist":{}},"s communi":{"sstagory! FollS stus":{},"e searResultA artics":[],"ntpilanatiMap":{},"e searI inMap":{},"isLoadndiMnto":ariae,"topW wriro":{"a auths":[]},"isS searndi":ariae,"noMntoFestA artics":ariae,"isLoadndi":ariae,"t curreCstagory":{},"eugg nestCstagorics":[],"s articsMap":{n=" tandiA artics":[],"n nA artics":[],"t featutA artics":[],"m pog StsA artics":[],"t utA artics":[]}},"nofollstCstagorics":{"list":[],"isLoadndi":ariae},"s walractink:{"s curreC walractik:{"urlStrndi":"n leath-reactj,"eummary":"A abo\no is t JavaScripL librars develoded by Facebore thaa functisp, as thVll inn MVC. K-knows for its fass performancs with Viractu a D, o iespprecualld idful fon buildinmobile...","r ronatC walractink:[{n= titl:"S spinisMiguel G. Florehis artics","rs aomKeyn:"j59l4g9snk,"l liCccou":2},{n= titl:"OooporosourciOS C components anL librics","rs aomKeyn:"iv91gyiqd","l liCccou":1},{n= titl:"Firet-ba Firesento: ">Getting Start","rs aomKeyn:"i98oagzvg","l liCccou":1}],"noMntoC coonen":="tr,"s auth":{"nfra1:"">CodementoTtre","s usnfra1:"w.codementttree,"s a stUrl":f="https:cdn.filesencks cocieub.coTE3kTBKQ4SmllTVF4eMle,"0 hedeli":"On-Dem> anMm/artt place foroftws ar">Develops","s abo":"Oyrlttreat iobsn eseed witn learning aboun net technologi.opths posg aboub developmenn learnies, step-by-stis gui.js, teccticaS tutoria,ul as weul a">Codementoa communitannouncelemenre to helkeeelp youpsy-tupda.","s gu":"a0926614-4a78-4a86-b176-7be01f32e981"},"isLoadndiCecommt":ariae,"d lid":ariae,"slractink:[{n= titl:"Doculemeicatio","s cocien:"","rs aomKeyn:"bwc6d wzh","l link:[{n= titl:"O officiaR>React Tutori","nottl:"T to get t/fases of hoe React workseyonild a simplH weoWorouldpp,ng Facebook'e officiae tutorial will teach yon how to buile yrl-down all-timrecommt boxng with Reac Ovince you have a feel foe the library, you cagoub eloper and read tis gui. oarn how to built-intasecvnce an, dynamiUI,nd foer components, and mor\n\n","srl":f="http:/ Facebone.github.ih-rea/docs://tutorima.htm,"rs aomKeyn:"bwc6dmuku"},{n= titl:"O officia/ FluG gui","nottl:"p>If you'rh building a website tha idfnts wit, dynamir da,nd it iA highlh recommendee you folloe the Flux architecturab-desior, which pm notesrs soogldireractiurab daa fl.op thee Reaciets ueed witFefluxd ibrthingk you eaa functiabilies onn MVC. Hllsvwser,ccordoking ty Facebooks curre MVChis ren'sticeas weud with buildingddiactiurat featureinto e laror cot-bact, sr React + Fluw, as tirng solutir\n\n","srl":f="http:/ ovd-vima.htm,"rs aomKeyn:"bwc6dnj2n"},{n= titl:"s JSDoculemeicati","nottl:"r Reach uses JS-esrsentaccual-typed,iobroje-oricnarteh pgrameaminlg-ananags that compireinterstag ale t JavaScrits. Ih aims tcebshat JavaScrips performance ano make id moreype-safeis. In other wordss if yob devellding mid-sy to lar- softws any, Jno yld be a goomethinu to ur\n\n","srl":f="https:jsxne.github.idoc://tutorima.htm,"rs aomKeyn:"bwc6dodw0"}]},{n= titl:"t Tutoria","s cocien:"","rs aomKeyn:"bwc6dotox","l link:[{n= titl:"g The Reacp>Quing StauG gui","nottl:"p>Thiale-ntpage tutorial wilq>Quicklo help you get graspes of hoe React wores, and>If you're hs as-s onypeot of rstion, you cae code along witr it[r starter k](=" Or, you can simplo learu througd reusing thsucrinject/tutorimp. The tutorial ren'l teach yon how ts get ue yrlenvironleme,w, but iu shoulnaleg ts leso be quito heinfu\n\n","srl":f=" tutorits/the-reactjq>Quict-staed-gui","rs aomKeyn:"bwc6x2h5e"},{n= titl:"">The ReactJKoaio","nottl:"r Leaup ReactJS fromqus arale , with thit-intasecvnce tutorial, whichs co leghly inspired bg theud bKoaioce projees. Ale you havw to dises fkth this projectiKons Ale Node.s, anPyautionru on the setu, and thef you'ra goom too! F folloe th5-practic exeroncires, ans ren'p weng at thaiow rsu\n\n","srl":f="","rs aomKeyn:"bwc6x7yoj"},{n= titl:"B builg with Rea","nottl:"p>the authoe of t isquite ueed to fktg ay Faceborg and alsh buipr ReacUIct components antausighh Reac p>Althougf the si' is noy ge100%ge compteuxd insvwsg ts less provides someiurci-intasecvnce tutorials that wild providf you witenthouge codd exampley to gefynali v w with eae basioe og React, and id alst has somd moradvavincetellcrks such at how to updang with Reaco rend,ou crestingade-i an imapps with Reanc, and morr articleexplned,ialso bsumore tons bgunuted to the si' ih pgr le!\n\n","srl":f="http:h buis wi//,"rs aomKeyn:"bwc6xchg4"},{n= titl:"L learning Rea.js","nottl:"p>Thif yrls-pahe tutoriao/seriJS frot thawes somu falkstt[rcoratcio](="https:rcoratcio/)se will firsl teach yoh eae bashe coeptioe og React.js to get start,ll teach yon how to buila's twitte 'streJS with Noc, ang React.ctiKt prodews you te the Flux architecture, anfincualll finish off witt walding you through how tu create a simplu splldinc-pahd with React.ct + Flu\n\n","srl":f="https:rcoratcio/e tutoria/n learni9153110s/getting-startet-and coeptim,"rs aomKeyn:"bwc6xmfdh"},{n= titl:"p ReactJ\u0026y. BrowserifWorka fl","nottl:"Afitte6nd tpley tu create r producoath-rd by Reacseb applicati,a">Codemento[p>Chrii caAlfoni](="https://www.codementor.ic>Chrii calfoni)nfincuallcasomupcs with g solutits for a gooworka flvw to ds suchomethiis. Is-pah2,a">Chrii cagoi. oars to explaih eaoorka flct'selorennciices anh how to tesd iq>Quicku\n\n","srl":f=" tutorite-react-js>Browserifoorka flls-partm,"rs aomKeyn:"bwc6ykz12"},{n= titl:"B buildin, robusr web aslg with Rea","nottl:". If you're stilcot-estint whether you shouladoripr Reaup, thie tutoriao ylt convinws you teatake thn lp,p, as the authoo provides lengthytiKt pre tothincretispe for rning Rea.n. In thif yrls-pahe tutori,df you tilo learn how to builas a simplsel-paumore boape fosubw ylsticationsoriimizare yrls codeo tesd ,er and render it tn the servce forEOr\n\n","srl":f="http:o mal tww..ukog/20143/05/h buildi-, robu-//web asop-with-reacs-partma.htm,"rs aomKeyn:"bwc6yxdg7"},{n= titl:"e FluA architectung step-bg st","nottl:". If yodld like to get u betted ides of hoReflut worksyou follhting dd exampeb applicati,a, thie tutorial will walk you through building a w-c that app from scratcg with Reas, and the Flux architectump. The authod alsh usee tou on thd exampr\n\n","srl":f="http:t/ clai, step-by-stom,"rs aomKeyn:"bwc6zbae0"},{n= titl:"L leaur Reactygh buildinn thHacktteS Nepp flentima","nottl:"p>Thie tutorial will walk you through buildinn thHacktteS Nepp flentpagr rning Reaes, and it's ma purposeal is to help you get a feel for understarninn how t'g>Br'et r ReacUIcp fromChriopethePtwiit'Mediumst has a fedetplald r articles on React FundamentaJS, such as on componeson, React prwsgogiessticires, anf how to use Reang witBackbmpou\n\n","srl":f=" Tutoria","rs aomKeyn:"bwc70p7x7"},{n= titl:"U uniT testing Reade.sW with Jasmis, anKarma","nottl:". If you prefes somethinn other thad the officia[">Je](=", you can tre unit testing Reajsng witd thsomegoodnke this nonciis article, whicw, ae authired bOn lks, ar Ruennko,rs wht hadementedng Reajsns a fel-tisu\n\n","srl":f="htps:myohs ao un-t testith-reacdoact-jp-with/jasmint-ankarmama.htm,"rs aomKeyn:"bwc70u3bw"},{n= titl:"p Rea \u0026yeud ","nottl:"A>Althougt a lot or peopld smct to tou arning ReactJs oh Node.js, isok doesn'meanr, you csn'u create an isomorphir React acg with Rail . If you prefey-raijs, thed this iunftachintly the tutorias for yoe. You wilbagr rning Rea \u0026ye-Railt to buila'a simple blogstane the tutorial will walk you througf how t si prake thrEOot og your React aed bn rendering use Reant componentontn the servu\n\n","srl":f=" isomorphhe-reactjt aop-withud -oath-Raics-part-e serv-sguide-renderin8438bbb1ea1cm,"rs aomKeyn:"bwc71d7j1"},{n= titl:"W wrhting aslg with Rea.js","nottl:"p>Thie tutorial teaesch yon how ts gurap your ReactJS application witg Gulp.jstan. Browseri,u, and thed proueed to walk you througf how to us, Jnt to built components for sexampeb als thay allows usreintoddom/mpra/straes ngsu\n\n","srl":f=" Gujs>Browseriom,"rs aomKeyn:"bwc71r3oe"}]},{n= titl:"C cours","s cocien:"","rs aomKeyn:"bwc71rhwf","l link:[{n= titl:"n React Fundamenta","nottl:"p>Famous for its bite-sized video tutorials that will teach you just what you want to know, egghead is a great place to get up to speed with React.js. You can try out some of their free videos before you decide if the site works for yo\n\n","srl":f=","rs aomKeyn:"bwc7273og"},{n= titl:"">Getting Started With React.","nottl:"p>With 21 lessons that span 2 hours long, this Tuts+ course will first walk you through the basics, explain React's data flow, and more. You will finish off with a real-time project to better understand how things fit together, which includes how to use Browserify and Gulp in your React build proces\n\n","srl":f="htps://,"rs aomKeyn:"bwc72pc9t"},{n= titl:"p Rea t Fundamenta","nottl:"p>Pluralsight has been a training platform for developers since 2004, and they naturally have some professional video courses for you to get started on learning React, where they go over components, JSX, events, and form\n\n","srl":f="htps://,"rs aomKeyn:"bwc736t7m"}]},{n= titl:"t tip\u0026y; Tric","s cocien:"","rs aomKeyn:"bwc7c737hp,"l link:[{n= titl:"">Component Interop With React And Custom Elemen","nottl:". If you're a JavaScript developer, chances are you follow Addy Osmani's twitter account, as he is a well-known JavaScript developer at Google who often tweets useful JavaScript information. In this article, he talks about React components and custom elements, and he concludes with a useful tip on what to watch out fo\n\n","srl":f="htps://,"rs aomKeyn:"bwc7cb wh"},{n= titl:"">An opinionated guide to React.js best practices and conventio","nottl:"p>This guidelines mostly focuses on component structure and JSX best practices to make code more readable, robust and easily maintainabl\n\n","srl":f="htps://,"rs aomKeyn:"bwc7cc57p"},{n= titl:"">The ReactJS Newslett","nottl:". If you want to have weekly updates on new ReactJS tutorials available, then it's a good idea to subscribe to this free newsletter. It's fairly new, but it has been consistent with the weekly updates so fa\n\n","srl":f=","rs aomKeyn:"bwc7cmsfa"},{n= titl:"">Krawll","nottl:"p>This blog is maintained by 3 brothers who write about web development technologies, and it has several useful posts on ReactJS, such as React'[">Flux vs Refl](=">, th[t React data flow mod](=">[w ReactJS encapsulati](=">, and more. If you're still wondering about whether you should pick up ReactJS for your project, you can read their extensiv[w ReactJS case stu](="\n\n","srl":f="http:t/blog.krawaller.s,"rs aomKeyn:"bwc7csmlj"},{n= titl:"p Rea t Roc","nottl:"p>This website showcases projects made by ReactJS, where you can link to the demos and see the code samples. All in all, one of the best ways to figure out how to do things is by examining other people's code, and this is a great place to find out what other people are doing with Reac\n\n","srl":f=","rs aomKeyn:"bwc7cvcko"},{n= titl:"p ReactJS Ne","nottl:"p>This blog is an excellent place to get the latest ReactJS tips and tricks, and the older articles should also be quite useful as well. Other ReactJs developers have also contributed to the blog, so you should see a variety of content\n\n","srl":f=","rs aomKeyn:"bwc7cx1ex"},{n= titl:"">Faster AngularJS Renderi","nottl:"r ReactJS is not a framework, so you can use it with other JavaScript frameworks such as AngularJS. If you're frustrated by your AngularJS app's performance and want to speed it up, this article is a neat tip on just how to use ReactJS to speed up your Angular ap\n\n","srl":f="htps://,"rs aomKeyn:"bwc74ln56"}]},{n= titl:"">Developer Too","s cocien:"","rs aomKeyn:"bwc7c74lxe,"l link:[{n= titl:"n Reflux","nottl:"A>Although Flux is the architectural approach recommended by Facebook, Facebook doesn't actually provide a framework for it so you'd have to build it yourself by scratch. Or, you can use Reflux[">This artic](="> explains what Reflux is. In essence, Reflux makes it simpler than having to build your React + Flux app from scratch and it's currently the most popular (event-based) implementation of Flu\n\n","srl":f=","rs aomKeyn:"bwc7csfak"},{n= titl:"e Flxot","nottl:". If you're not convinced by Reflux, you can also check out Fluxxor, which provides tools to make it easier for you to use the Flux architectural approach when building your React ap\n\n","srl":f=","rs aomKeyn:"bwc7ctrhp"},{n= titl:"p Rea t uett","nottl:"p>As the most popular ReactJS routing solution, React Router is highly inspired by Ember.js's URL-first router, and it features nested views, sync and async transition hooks, modular construction of route hierarchy, dynamic segments, and more. Its goal is to increase your screen-creation productivity, help you better understand your app's structure, and provide code tractibilit\n\n","srl":f=","rs aomKeyn:"bwc7525bi"},{n= titl:"p ReactJS / Flux Starter K","nottl:"p>Quickly bootstrap your ReactJS application with this popular starter kit, which uses ES6 Harmony, JSX, Gulp, Webpack, BrowserSync, and more to help you create an isomorphic SPA[">Codementor Konstantin Tark](="> contributes to this open-source project, so if you have any questions, you can always ask hi\n\n","srl":f=","rs aomKeyn:"bwc75a44v"},{n= titl:"">Sublime-Rea","nottl:". If you'rr rnin[r Sublime Te](="> to code your web applications, then you'll probably appreciate this React package for Sublime Text. It provides JSX syntax highlighting and also provides a few JSX snippet\n\n","srl":f=","rs aomKeyn:"bwc75gm0g"},{n= titl:"">Omniscie","nottl:"p>Thie tool is a library that provides an abstraction for React components. It has fast top-down rendering that imbraces immutable data - in other words, with this library, components can use cursors to easily swap their own piece of data inside the larger immutable data structure, where you'd only need to render components that have changed their data layer. It's a pretty neat project that sounds pretty usefu\n\n","srl":f=","rs aomKeyn:"bwc75o12p"},{n= titl:"e Browseri","nottl:". If you're looking to power ReactJS with Node.js, then you should use Browserify to speed up your productiviy. Browserify allows you to write Node.js-flavored modules that compile for use in the browser, and it is very useful for code-organization. There's also a community manage[">Browserify-Rails G](="> if you prefer using Rail\n\n","srl":f="http:t/,"rs aomKeyn:"bwc75p7qq"},{n= titl:"" Gulp.","nottl:"p>Make your life easier by using the 'streaming build system' Gulp.js if you aren't already - it's efficient, easy to learn, and helps you manage complex task\n\n","srl":f="htps:g/,"rs aomKeyn:"bwc75qhkj"},{n= titl:"h Jasmi","nottl:"p>A highly popular JavaScript unit testing tool, Jasmine is a DOM-less and simple Behavior Driven Development testing framework that is suited for anywhere that JavaScript can run. Many have praised it for it's easy-to-read syntaxes, and it's also easy to get started on. If you aren't using Facebook'[">Je](="> and you prefer to test your apps with Jasmine, you'll probably want to check out th[">Jasmine-Rea](=">, which aims to make unit testing ReactJS components less painfu\n\n","srl":f="htps://,"rs aomKeyn:"bwc75rd6h"},{n= titl:"">co33saScripr Reacw JSTs="jerfout","nottl:". If you're faion o[">co33vaScri](="http://co33saScrify.or)a>, you'll probabld like thiniftyce projectakes is providesupported for equivaellenn os JSX syntae i">co33saScrip(cawald Cs J).op Witt>This tons, you cao writg your ReacS components wit">co33vaScrip\n\n","srl":f=""jerfos,"rs aomKeyn:"bwc75w8l1"}]}],"s updadAu":1508136710,"s correC cou":0,"isLoadndi":ariae,"t contriborCccou":1,"s corres":[],"= titl:"L leaur Reajnk,"l keCccou":20,"s cocien:"## A abo\no is t JavaScripL librars develoded by Facebore thaa functisp, as thVll inn MVC. K-knows for its fass performancs with Viractu a D, o iespprecualld idful fon buildinmobilehe sii.op thit'soturesnvinws yot can r o React.jontn the serv,nd it's morSEO-fricndntly anth other JavaScripF frameworks availabon. If yos ren'l-kner JavaScripyeect, you should probablt stand out wit[n learninr JavaScri](/n lea-j JasaScri-d osmi)r\n\n","u creadAu":1505313544,"rs aomKeyn:"bwc6dg9ji","u follhtiA auth":ariae},"list":[]},"s articEditth":{"s artic":{"rs aomKeyn:"","= titl:"","s cocien:"","co ovPhotoUrl":f","cstagorics":[],"eummary":"","a/jaS sta":"draft"},"sstagorySugg nectink:[],"isS havi":ariae,"isLoadndi":ariae,"isP/subsrndi":ariae,"seenGstrendi":="tr,"l faS hadAu":null},"jobs":{"sugg nestJob":{}},"e auk:{"isS tandi":ariae,"isOoop":ariae,"errowM leima":"","s/gettio":{"a auTyptl:""OCIAL_SIGNIN","e auT targl:""M","=m/rattiE(eveP prixn:"","redireraTop thLogin":"","afittC cfirmUrl":f"}}}},"pathnfra1:"/w.walracti","y qry":{"urlStrndi":"n leath-react-bwc6dg9ji"},"n buiId":"c9f61bb3-3da0-4bf9-ad9e-1ef52463b312","n buiS sto":{"apulp.":{"t hhl:"5ad5bba6bf71f383367930f05a9d42af"}},"ass/gP prixn:"="https:l bitcdn.w.codementor.","n TeExport":ariae,"err":null,"t ulink:[]} j d modu={} j __NEXT_LOADED_PAGES__e=o[] j __NEXT_LOADED_CHUNKS__e=o[] j __NEXT_REGISTER_PAGEc=oa functi (t-rou, fn) { j __NEXT_LOADED_PAGES__.push({of rou: t-rou, fn: fn }) j } j __NEXT_REGISTER_CHUNKc=oa functi (t uliNfra, fn) { j __NEXT_LOADED_CHUNKS__.push({ot uliNfra: t uliNfra, fn: fn }) j } j ">saScriivsaScripd asy=""iv id__NEXT_PAGE__/w.walracti"onype="mete/j JasaScri"psrcef="https:l bitcdn.w.codementor./_nete/c9f61bb3-3da0-4bf9-ad9e-1ef52463b312ontpa/w.walracti.jser">saScriivsaScripd asy=""iv id__NEXT_PAGE__/_erroweonype="mete/j JasaScri"psrcef="https:l bitcdn.w.codementor./_nete/c9f61bb3-3da0-4bf9-ad9e-1ef52463b312ontpa/_errow.jser">saScriiv