This project was bootstrapped with Create React App, take a look at that README first.

React Fundamentals

A self guided React Introduction for new developers at Church Community Builder. There are many ways to follow this guide but one good way is to choose an “app” or “product” you would like to make and use that as the goal throughout this guide. Nothing too complicated, but for an example a todo app is a great idea to create while following this guide. Which ever idea you choose just make the most simple version of it starting with create-react-app and slowly add concepts as you work through this guide. Each step of this guide has a general goal, materials to help you learn and some practical examples. Use these steps to add features to your app with the goal of learning the skill.

Prerequisites

Before picking up React, you should have a good foundation in vanilla front end web development, and a couple generally development tools and concepts. Here are some specifics you’ll need to be comfortable with:

1. HTML
2. CSS
3. ES6 JavaScript.
4. Tools of the trade: npm, git (e.g. GitHub), and editors (e.g. VSCode)

Example Resources to get you there:

• CodeAcademy - Learn CSS
• Code Academy - Introduction to HTML
• Code Academy - Web Development
• Udemy - Learn Web Development Basics

Getting started with React

Goal

Grasp the fundamentals of React and create a simple react app (with no persistence or server side)

Initial Setup

To get you started we’ll give you a repo that we’ve created with create-react-app and github actions as the ci/cd system to give you an idea of how a react app gets built and deployed in production. You can use this repo through the rest of this plan.

Materials

• React official documentation
• Beginners guide to React by Kent C. Dodds
• Fundamentals of React by Samer Buna
• Code Academy - Web Development covers some React Basics
• React Official tutorial
• Fetching API with React.js by Ethan Jarrell

Examples

• Simple Todo App
• Calculator
• Attendance Counter
• Form With Validation
• Movie Database

React Router

Goal

Understand the concept of Single Page Apps and how to use React Router to create one.

Materials

• React Router tutorial by Paul Sherman
• React Router and intro to SPA by Learn Code Academy
• Routing React apps by Scotch.io
• React Router complete guide by React Training

Examples

• Seperate pages for editing/creating
• history view
• profile page
• detail page

Redux

Goal

Redux is a JavaScript library developed for maintaining application states. When you are building a complex application, it will add overhead to manage states across components. Redux helps you store all your states in a single source. And of course, React plays well with Redux :)

Materials

• Redux tutorial by Learn Code Academy
• Redux tutorial for beginners by Valentino Gagliardi
• React Redux by CSS Tricks
• Getting started with Redux by Dan Abramov
• reselect
• redux-thunk

Examples

• Move your react component state into a global redux store
• use selectors to optimize and reuse getting parts of state
• store and normalize api results to be used by multiple components
• move your api calls into thunks