Module 3 | React & Full-Stack Applications

Day 1 | Monday

Retrospective

React | Hello React

PP | Axios & Functional Programming

React | JSX and elements

• Doc | Hello World
• Doc | Introducing JSX
• Doc | Rendering Elements

React | Components and Props

• Doc | Components and Props

DE | Bulma Components

Day 2 | Tuesday

React | State and Lifecycle

• Doc | State and Lifecycle

React | Handling Events & Conditional Rendering

• Doc | Handling Events
• Doc | Conditional Rendering

React | Lists and Keys

• Doc | Lists and Keys

PP | lab-react-ironcontacts

React | Forms

• Doc | Forms

DE | lab-react-data-binding

Day 3 | Wednesday

React | Lifting State Up

• Doc | Lifting State Up

React | Organize your code

• Doc | Composition vs Inheritance
• Doc | Thinking In React

PP | Reproduce Thinking in React

React Router | Introduction to Routing

• A Simple React Router v4 Tutorial
• Doc | Basic Components

React Router | Advanced Routing

• Doc | BrowserRouter
• Doc | Route
• Doc | Switch
• Doc | Link
• Doc | NavLink
• Doc | history
• Doc | location
• Doc | match

DE | lab-react-wikicountries

Day 4 | Thursday

React | Calling APIs with Axios

• Axios documentation
• Using Axios with React

React | Summary

Exercise | Try to reproduce Pokedex.org with pokeapi.co and axios

Day 5 | Friday

Express | Build a REST API

React & Express | Frontend Backend Integration

DE | MyRecipeBook

React & Express | Authentication

MERN Boilerplate

DE | IronForum (in the instructions, replace Angular by React)

Day 6 | Monday

React & Express | File Upload (Optional)

React & Express | Route Guards (Optional)

React & Express | Deployment

Day 7 | Tuesday

Project #3: MERN Application

Extra courses

React Bootstrap and SCSS

google-map-react examples

react-small-exercises

ironspace-reactstrap

Complementary resources

Articles

• Why Not To Modify React State Directly

Code examples

• React Data Binding (with components A, B, C, D)
• React IronTodos