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.