JS-201-ReactFundamentals
  • Part 0: App Overview
  • Part 1: Intro to React
    • 1.0: Packages Setup
    • 1.1: Project Setup
    • 1.2: React Router Dom
  • Part 2: JavaScript Concepts
    • 2.0: ES6 Overview
    • 2.1: classes
    • 2.2: constructors
    • 2.3: extends
    • 2.4: super
    • 2.5: interpolation
    • 2.6: map
    • 2.7: filter
  • Part 3: Functional Components
    • 3.0: Functional Components Overview
    • 3.1: Calling Functional Components
    • 3.2: Single Element Rule
    • 3.3: Arrow Functions
    • 3.4: Challenge
    • 3.4: Solution
    • 3.5: Challenge 2
    • 3.5: Solution 2
  • Part 4: JSX Challenge
    • 4.1: JSX Overview
    • 4.1: Challenge Answer
    • 4.2: className
  • Part 5: Class Concepts
    • 5.1: State
    • 5.2: setState
    • 5.3: Class Components Challenge
    • 5.4: Class Components Challenge Answer
  • Part 6: Props Starter
    • 6.0: Props Overview
    • 6.1: Props Demo and Challenge 1
    • 6.2: Props Answer 2
    • 6.3: Props Passing Functions and Challenge 2
    • 6.4: Props Answer 2
    • 6.5: External Props and Mapping Components
    • 6.6: PropTypes
  • Part 7: Lifecycle Methods
    • 7.0: Lifecycle Overview
    • 7.1: Lifecycle Methods
    • 7.2: Mounting Methods
    • 7.3: Update Methods
    • 7.4: Unmount Methods
  • Part 8: Apps
    • 1.0 - Small Timer Apps
      • 1.1 - Simple Timer
      • 1.2 - Clock App
      • 1.3 - Stop Watch App
      • 1.4 - Challenge
    • 2.0 - Concept List
      • 2.1 - Concept Data
      • 2.2 - Concept App Component
      • 2.3 - Concept Component
      • 2.4 - Concept List Component
    • 3.0 - NYT
      • 3.1 - NytApp Component
      • 3.2 - Nyt Results
    • 4.0 - The Friend List App
      • 4.1 - Friend List App Component
      • 4.2 - Friend Component
    • 5.0 - Movie Search Application
      • 5.1 - Form Component
      • 5.2 - Form Results Component
      • 5.3 - Styled Components
    • 6.0 - YouTube Api
      • 6.1 - Video Component
      • 6.2 - Video Component
      • 6.3 - Video Component
    • 7.0 - Github Api Application
      • 7.1 - The Users
      • 7.2 - Github API Component
      • 7.3 - Github API Card
      • 7.4 - Github API Card Form
      • 7.5 - Github API Card List
      • 7.6 - Github API Search
      • 7.7 - Github API Challenge
    • 8.0 - Bitcoin Api Application
      • 8.1 - Bitcoin API Setup
      • 8.2 - Bitcoin API Fetch
      • 8.3 - Bitcoin API Line Chart
      • 8.4 - Bitcoin API Fetching Data
      • 8.5 - Bitcoin API Info Box
      • 8.6 - Bitcoin API Completed Code
    • 9.0 - Google Maps Api Challenge
    • 10.0 - Sound Cloud App Challenge
    • 11.0 - VR App Challenge
    • 12.0 - React Native Intro
  • Part 9: Project
  • Part 10: Notes
    • 10.1 - Resources
    • 10.2 - Troubleshooting
Powered by GitBook
On this page
  • React Fundamentals
  • Introduction
  • Overview of Phases
  • We are excited
  • Feedback:
  • Next section

Part 0: App Overview

NextPart 1: Intro to React

Last updated 6 years ago

React Fundamentals

Introduction

Think of this as your starting guidebook to React. In this book we have culled together some of the best online resources, added our own touches, and written some of our own applications and tutorials.

In the next few weeks we hope to see you have have the following:

  • A greater understanding of JavaScript in general, especially ES6.

  • A starter application for a tutorial site about React.js to show off to employers.

  • 5-10 small React apps.

  • A larger capstone app: a full stack React, Node, Postgres, & Express application with individual user accounts.

Overview of Phases

Here's where we'll be going:

  1. Setup & Orientation: In part 1, we'll set up our application so that we can dive further into React. Instead of just cloning an application, we're going to walk through setting up one together! We'll introduce some topics in this section that we'll go more in depth on later.

  2. Fundamentals: In Parts 2-7 we'll start with a solid once over of important concepts in ES6. Then we'll proceed by covering the basics of React. We'll write small chunks of code, and you'll make the beginnings of your own online tutorial application. The fundamentals project can be a nice portfolio project that you can eventually make your own.

  3. Mini Apps: In Part 8, we will move into making mini-applications to help you reinforce important topics, give you some challenges, finish up on your main project, and also include tons of helpful resources for you to continue learning.

  4. Big App: In Part 9 you will work on the big project application to be completed for the Blue Badge and beyond. We will talk more about the requirements for this project in the coming weeks.

We are excited

We are pumped!!!

We hope you have a lot of fun with the applications within this application that will help you build your bigger application. Inception anyone?

Feedback:

We are constantly improving our curriculum and materials, so there may be some material in this book that you are the first to use in the classroom. We have tested the code, read through it, vetted resources, and retested it. But we know there may still be typos and bugs.

Please use the following guidelines for feedback:

typos: If you see a typo, you don't have to scream it from the rooftop. Just slack one of your instructors, preferably Autumn. Give us the Part #, module number and approximate location, please.

bugs: If you think you've found a bug, let an instructor know.

suggestions: Send Tyler a note if you have good ideas or ways that this could be improved.

Next section

1.0: React Rationale
efa