Intro to ES6 and ReactJS

rahulgaba.com

State Management

  •  
  • Bullet Two
  • Bullet Three

What is ES6?

New Additions

  • Arrow Functions
  • let and const
  • Modules*

Syntaxes

  • enhanced object literals.
  • Template strings
  • default + rest + spread
  • Classes

ES6 vs ES5

Transpilation of ES6 to ES5

  • Babel?
  • Webpack?
  • ES6 Modules?

BabelJS

https://babeljs.io/

React.JS

A JavaScript library for building user interfaces

Benefits

  • Easy to learn
  • Modular
  • Very easy to test
  • Declarative
  • Encourage Reusability
  • Fast(Thanks to Virtual DOM)

Cons

  • Boilerplate code.
  • State/props can be confusing to understand at first.
  • Idea of HTML in JS can be difficult to digest.

Example

rahulgaba.com/tic-tac-toe/

Virtual DOM

  • DOM manipulation is slow, JS is fast
  • Change only the required HTML node
  • Foundation of Front end libs

JSX

Still not impressed?

The render method

Life cycle methods

Components

Forget MVC, think components

Back to Tic-tac-toe

Step1: Break the UI into components

Data flow

State vs Props

State --> Store/change data using setState()

Props --> Pass data from parent to child

Step2: Decide where the logic should lie.

Props

Step3: Get Set Code!

https://github.com/rgabs/tic-tac-toe

NPM

Node Package Manager

Front end tools

  • Babel
  • Webpack
  • Yarn
  • NPM
  • Jest
  • Enzyme

Testing 🙇

  • What's the use of testing UI code?
  • Snapshots
  • Testing stateful components using Enzyme

References

  • https://medium.freecodecamp.org/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81
  • https://www.slideshare.net/ftorre104/understanding-facebooks-reactjs
  • https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle
  • https://www.reactnative.guide
  • https://www.javascriptstuff.com/react-seo
  • https://www.javascriptstuff.com/server-side-render
  • https://medium.com/@raulk/if-youre-a-startup-you-should-not-use-react-reflecting-on-the-bsd-patents-license-b049d4a67dd2
Made with Slides.com