/react-playground

Primary LanguageJavaScript

React Playground

This project was bootstrapped with Create React App.

Prerequisites

Install node and yarn then run the following commands:

git clone https://github.com/ecris87/react-playground.git
cd react-playground
yarn install
yarn start

After all that the project should be up and running at localhost:3000.

Day 1

Rendering

  • JSX (not HTML but a syntax extension to JavaScript)
  • Embedding expressions in JSX
  • Rendering an Element into the DOM
    • React element has to return only one element
  • Exploring React DOM updates

Components

  • Functional and Class components
  • Working with components (composition, extraction)
  • Managing data
    • props (read-only, can be considered parameter for components)
    • state (private and fully controlled by the component)

Day 2

State and Lifecycle

  • Components lifecycle hooks
  • Using state correctly
    • state shouldn't be modified directly (except in the constructor)
    • setState is asynchronous
    • state updates are merged

Handling Events

  • React events are named using camelCase
  • Class methods are not bound by default (best practice: bind them in the constructor)

Day 3

Data Fetching

  • Fetching data from the server and displaying it
  • Conditional Rendering
  • Lists and Keys

Day 4

More about Props

  • Props shorthand
  • Typechecking with PropTypes

Forms in React

  • Handling Multiple Inputs
  • Controlled Components
  • Select, Textarea, Checkbox

Day 5

Composition vs Inheritance

  • Props.children
  • Specialized Components

Day 6

Redux

  • Redux Principles:
    • Single source of truth: the state tree
    • State is read-only
    • Changes are made with pure functions (reducers)
  • The Redux store: createStore()
  • Store Methods: getState(), dispatch(), and subscribe()
  • Store middleware
  • Splitting reducers: combineReducers()

Day 7

React-Redux

  • Lifting state up
  • Introducing Redux (with react-redux)
  • Async Flow (with redux-thunk)