/Learning-React

Outline and working files Learning React step-by-step

Primary LanguageJavaScriptMIT LicenseMIT

Why React?

  • All the kids are doing it

Overall Idea behind React

  • Project Page
  • Declarative
  • Component-Based
  • Learn Once, Write Anywhere (loaded term)
  • More Javascript than framework syntax

From react to other libraries

  • Learning React is useful, even when moving to other frameworks
    • Vue.js
    • Angular
    • Cycle.js
    • Ember

Intro and rundown

  • Course structure
  • Excersises and setup files
  • Building out a project, but please no more todo apps

Starting with Tour of Git Heros, based on Angular's Popular Tour of Heros

  • Tour of Heros
  • It hits on a lot of good points, things used in everyday web app building.
    1. Display an array of things
    2. Hide or show items based on conditions
    3. Edit fields/properties of item in a collection
    4. Dashboard -> Master list -> detail view. Used all the time
    5. Added network calls from Github's API for real world experience

Course Resources

Tooling and Setup

  • Create React App
  • ES2015 and lots of it
  • Babel, transpiling
  • Webpack & live reloading
  • Lots of hidden configs, which is fine for now
  • Eject app

React, all about components

Creating our first component

JSX, is what again?

Loading CSS into react

Application Layout

Types of components

Passing dynamic data into a component

Prototype what what now ?

What is State

Stateless functional component

Routing, getting around

Working with React Events

More Routing

React immutability helpers

*LINK

Loading state with onClick

Displaying state with JSX

How do we update state?

Issuses of state, it's complicated

Redux, as a possible solution

  • Defined

The whole state of your app is stored in an object tree inside a single store. The only way to change the state tree is to emit an action, an object describing what happened. To specify how the actions transform the state tree, you write pure reducers.