> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-1-intro-and-setup.md).

# 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.