Search

Home > Coder Catchup > Episode 055 - React 101, React Your World!
Podcast: Coder Catchup
Episode:

Episode 055 - React 101, React Your World!
Category: Technology
Duration: 00:15:19
Publish Date: 2016-02-08 14:45:00
Description:

This React thing, people are going nuts for, so what is it?
It is a javascript library for building UI
There are very few key principles, these being

  • Just the UI
  • Virtual DOM: it abstracts away the DOM, giving a simpler model and better performance. Write your code all in one place
  • Data Flow: Simple one -way data flow, it all flows down hill

All Data revolves around 2 things, state and props, boom! How simple is that!?

Framework or Library

  • Not a framework, it is a library, think of it like jQuery
  • A framework for example is Ember

So is Ember better than React?

  • 2 completely different things
  • Can accomplish the same things as each other

So what is so good about it?

  • Simple to learn
  • Use it in existing server side or static sites
  • Can incorporate pieces here and there
  • It promotes small compose-able components and modularity
  • Oh and there is React Native, but thats a whole other topic

What do I need to get started

  • a web browser
  • webpack, yes another task runner, but there are plenty of boilerplates out there to get you up and running quick
  • Or just use codepen!

Gotchas

  • Tutorials all differ thanks to ES6 syntax, so some articles/tutorials are shown in ES5, some in ES6 and even some parts in ES7!
  • Overall the ES5/ES6 thing can get confusion, plus another syntax when working in ES6 to auto-bind can be confusing.
  • If you want to have better use of state throughout the application, you will need to look at using Redux as a global store. Free tutorial on egghead.io - https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree
  • Chuck out a lot of the jQuery you know, as you want to rely on state more than adding things with jQuery as state will change the DOM and your jQuery changes wont persist as it does not update the state.

Learning Resources

  • The react docs! Seriously, really good docs to get you started. https://facebook.github.io/react/docs/getting-started.html
  • Big shout out to Wes Bos (developer, speaker and teacher from Canada) for creating React for Beginners, a short video course that covers everything you will need to start working in react and then some. https://reactforbeginners.com/ It has a cost but is worth every cent, plus you get access to the slack channel to talk with others, get help and more
Total Play: 0