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
  • Part 1: Intro
  • 1.0: Rationale & Overview
  • Project Overview: Fundamental React Concepts

Part 1: Intro to React

Part 1: Intro

1.0: Rationale & Overview

What is React?

React is a JavaScript library. It is a single file, created and maintained by Facebook. It is Component-based, which means that you can use Components to describe your desired outcome for very specific areas on the webpage. For instance, we might have a Component for nav, footer, main, counter, etc.

Why React?

As of today React is one of the top 3 tools for using JavaScript on the front end. Because of its speed, quick learning curve, reusability of components, and performance, React is enormously popular.

Here are a few pros and cons of using React:

Pros

  • Uses JSX - JS that looks like HTML.

  • Works in tandem with vanilla JS.

  • Reusable Components.

  • Has its own Dev Tools.

  • React Native - native mobile development.

  • Facebook supported.

  • Fast rendering, includes a virtual DOM.

  • Awesome SEO performance.

  • Great debugging.

  • Functional development friendly.

Cons

  • It only deals with the view (can be a pro).

  • Have to use things like webpack, etc. for easy development.

  • Can be difficult to get your brain initially into React mode.

  • Lots of third party packages to make your life easier are needed.

  • Facebook supported. More on this in class.

Project Overview: Fundamental React Concepts

Some of the great things we'll study in this part include the following:

  • Components: This is one of the best parts about React. Everything is broken up into separate reusable Components. This makes app flow and debugging a whole lot easier!

  • JavaScript: One of the great things about React is that you can use it in tandem with vanilla JavaScript. So be ready to sharpen your skills with plain old-fashioned JavaScript here.

  • JSX: JSX is a syntax used in React components that looks very similar to HTML. If you know HTML, you can write a React Component in a relatively short amount of time.

  • Props: Props are a nice way of passing data around the app and down through Components.

  • State: You'll learn a lot about how the state of an application changes and how we can see state changes without having to rerender the entire DOM.

  • Lifecycle Methods: There are lifecycle methods for Components that allows you to run functions at certain times. For instance, if I need to fetch all my data before a page loads, I can run a method that fetches that data.

PreviousPart 0: App OverviewNext1.0: Packages Setup

Last updated 7 years ago