React.js? Why and What?

by Alyona Pysarenko

Karma and Jasmine

React.js? Why and What? Basic knowledge

by Alyona Pysarenko

Agenda

  1. Why React.js
  2. React.js concepts
  3. JSX and Lifecycles

3 the most popular frameworks (libs)
on the market:

  1. Angular2 (Angular1)
  2. React.JS
  3. Ember.JS

Who Wins?

comparison

Framework?

  1. What is Framework?
    1. Makes app more structured
    2. Provides with instruments you need (and you don’t need)
    3. Follows some Architecture Pattern (MVC, MVVM, MVP…)
  2. What is Library?
    1. Gives one instrument to solve specific problem
    2. Solves specific problem =)
    3. Nothing else =)
  3. React.js is Framework or Library?

JSX vs Html

How UI looks like?

  1. HTML
  2. CSS
  3. JS
JSX vs Html

JSX vs Html

How React.js looks like?

  1. JS + JSX
  2. CSS
  3. JS
JSX vs Html

What is react.js?

  1. It's a JavaScript library for building UI created and maintained by Facebook
  2. ReactJS can be used to:
    1. Build a widget
    2. Add a reusable component (header, footer, etc.)
    3. Build the entire front-end experience (like Facebook)
  3. Around it people built whole universe with Redux (the most popular flux implementation)
  4. There’re dozens of libs like: React-boostrap, react material design, react sliders, scrollers, grids, react animations and so on

React Component

  1. Everything is/can be a component
  2. A React component merges view and logic
  3. UI is state machine, Components are State Processors
React Component

React Component

React Component

React Component

React Component

Virtual dom

virtual dom

Diff Algorithm

React diff algorithm is used to compute minimum sets of mutation:

Diff Algorithm

Diff Algorithm

Data flow

  1. ReactJS implements a one-way data flow. This means that data is passed from the top-down, through props, from the top component to its children, so on and so forth. ... // A simple component flowing down the props <Component property1="value" property2=”anotherValue"/> ...
  2. Instead of React components talking to each other, React components cooperate through the parent
Data flow

Data flow

  1. Lets say we want to develop something like this:
  2. First of all let separate it to the components:
    1. Whole widget
    2. Grid
    3. Grid Record
    4. Grid Action cell
    5. Filter
  3. Components hierarchy: Whole widget -> Grid -> Grid Record ->
    Grid Record Action -> Filter

JSX

  1. JSX is a JavaScript syntax extension that looks similar to XML
  2. XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls or object literals.
  3. After all JSX just makes code more readable and lets define virtualDOM in more convenient way
  4. You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.

JSX can be used:

To render HTML Tags

render HTML

To render React Component

render React Component

JSX to JS

  1. Browser can't interpret JSX it needs to be transformed to JS
  2. Popular tools: babelify with react preset, webpack with react preloader

JSX expressions

JSX expressions

Component Lifecycles

Render method in a React component needs to be a pure function

Whole bunch of methods:

Lifecycles

Lifecycles

Lifecycles

React: Events

Two options:

Add listeners to do something in the dom, which is not under react.js control:

Events ouside React Component

Event handler in react elements. It works quite close to pure JavaScript, but with JSX.

Events in React Component

List of available events:

  1. onCopy onCut onPaste
  2. onCompositionEnd onCompositionStart onCompositionUpdate
  3. onKeyDown onKeyPress onKeyUp
  4. onFocus onBlur
  5. onChange onInput onSubmit
  6. onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
  1. onSelect
  2. onTouchCancel onTouchEnd onTouchMove onTouchStart
  3. onScroll
  4. onWheel
  5. onLoad onError
  6. onAnimationStart onAnimationEnd onAnimationIteration
  7. onTransitionEnd
  8. onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata

to be continued ...