What is React?

• Declarative
  • UI is rendered with your data/state change
• Component-based
• React Native
• ReasonReact (ReScript)
• Virtual DOM
  • Avoid manual DOM updating and event handling
  • Changes between real and virtual DOM
  • "key" attribute

Why  React?

• Easy learning curve
• Good official documentation
• Great community support
• Reusable components
• Unidirectional dataflow (better testability)
• React Native

MVC

• Model
• View
• Controller

Flux

• Actions
  • Action type and data
• Dispatcher
  • registers given actions to store
• Store
  • App's state and logic
• View
  • React!

MVC

Flux

JSX (JavaScript eXtension)

• HTML-like syntax
• small cased tags are reserved for native DOM elements
• Not required but helpful syntax
• Can evaluate JavaScript expressions
• className should be used as class attribute

with JSX

without JSX

ES6 in React

• Import / Export
   
  • 
     
• class
• arrow functions (=>)
• Array.map(), Array.filter() etc.

Main Concepts

• props
• state
• rendering to DOM
• event handling

props

• given outside of component
• similar to parameters of a function
• primitive types and objects
• string props can be used with quotes ""
• other data types be used with {...}

state

• Functional components don't have state
• initialized in constructor or as class property
• updating state should be done with setState method
• setState causes component rendering

state in constructor

state as class property

setState usage

Rendering to DOM

• needs an HTML element
• React application lives under the element
• ReactDOM is responsible from rendering

Event Handling

• Event handlers added as inline attributes in JSX
• events written in camel case
  • onclick -> onClick, onchange -> onChange
• handlers are called with Event object defined by DOM

Multiple Input Example

Component Lifecycle

Lifecycle methods

• constructor: initialization
• render:  required for all components
• componentDidMount: API calls, event listeners, timers
• componentWillUnmount: clean event listeners and timers
• shouldComponentUpdate: prevent unnecessary rendering

Advanced Concepts

• DOM manipulation with Refs
• Higher Order Components

Ref

• Provides accessing DOM node
• "Avoid using refs for anything that can be done declaratively."
• Use cases:​
  • Managing focus, text selection, or media playback.
  • Triggering imperative animations.
  • Integrating with third-party DOM libraries.

Higher-Order Component

a function that takes a component and returns a new component

Examples:

• react-redux's connect
• react-router's withRouter

Supplementary Libraries

• react-router
• prop-types
• redux
• Styled-Components UI Libraries
  • Material UI
  • Ant.Design

React-Router

• package: "react-router-dom"
• provides browser history
• Components: BrowserRouter, Route, Link
  •  <Route path="/" component={Main} />

  • <Link  to="/">Return Home</Link>

• HOC: withRouter
  • Provides history, matches, location as props

prop-types

• typechecking for props
• only for development environment
• alternatives:
  • Typescript (Microsoft)
  • Flow (Facebook)

Redux

Redux