Flavio Copes – React Handbook

Flavio Copes – React Handbook

Check it out: Flavio Copes – React Handbook

The React Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic.

I find this approach gives a well-rounded overview. This book does not try to cover everything under the sun related to React, but it should give you the basic building blocks to get out there and become a great React developer. If you think some specific topic should be included, tell me. You can reach me on Twitter @flaviocopes.

I hope the contents of this book will help you achieve what you want: learn the basics of React.

You can get this ebook in PDF, ePub and Mobi format at reacthandbook.com

Book Index

Table of Contents

An introduction to React
How to use create-react-app

SECTION 1: MODERN JAVASCRIPT CORE CONCEPTS YOU NEED TO KNOW TO USE REACT

• Variables
• Arrow functions
• Rest and spread
• Object and array destructuring
• Template literals
• Classes
• Callbacks
• Promises
• Async/Await
• ES Modules

SECTION 2: REACT CONCEPTS

• Single Page Applications
• Declarative
• Immutability
• Purity
• Composition
• The Virtual DOM
• Unidirectional Data Flow

SECTION 3: IN-DEPTH REACT

• JSX
• Components
• State
• Props
• Presentational vs container components
• State vs props
• PropTypes
• React Fragment
• Events
• Lifecycle Events
• Forms in React
• Reference a DOM element
• Server side rendering
• The Context API
• Higher order components
• Render Props
• Hooks
• Code splitting

SECTION 4: PRACTICAL EXAMPLES

• Build a simple counter
• Fetch and display GitHub users information via API

SECTION 5: STYLING

• CSS in React
• SASS in React
• Styled Components

SECTION 6: TOOLING

• Babel
• Webpack

SECTION 7: TESTING

• Jest
• Testing React components

SECTION 8: THE REACT ECOSYSTEM

• React Router
• Redux
• Next.js
• Gatsby

Wrapping up

An introduction to the React view library

What is React?

React is a JavaScript library that aims to simplify development of visual interfaces.

Developed at Facebook and released to the world in 2013, it drives some of the most widely used apps, powering Facebook and Instagram among countless other applications.

Its primary goal is to make it easy to reason about an interface and its state at any point in time, by dividing the UI into a collection of components.

Why is React so popular?

React has taken the frontend web development world by storm. Why?

Less complex than the other alternatives

At the time when React was announced, Ember.js and Angular 1.x were the predominant choices as a framework. Both these imposed so many conventions on the code that porting an existing app was not convenient at all.

React made a choice to be very easy to integrate into an existing project, because that’s how they had to do it at Facebook in order to introduce it to the existing codebase. Also, those 2 frameworks brought too much to the table, while React only chose to implement the View layer instead of the full MVC stack.

Perfect timing

At the time, Angular 2.x was announced by Google, along with the backwards incompatibility and major changes it was going to bring. Moving from Angular 1 to 2 was like moving to a different framework, so this, along with execution speed improvements that React promised, made it something developers were eager to try.

Backed by Facebook

Being backed by Facebook is, of course, going to benefit a project if it turns out to be successful.

Facebook currently has a strong interest in React, sees the value of it being Open Source, and this is a huge plus for all the developers using it in their own projects.

Is React simple to learn?

Even though I said that React is simpler than alternative frameworks, diving into React is still complicated, but mostly because of the corollary technologies that can be integrated with React, like Redux and GraphQL.

React in itself has a very small API, and you basically need to understand 4 concepts to get started:

• Components
• JSX
• State
• Props

All these (and more) are explained in this handbook.

How to install React on your development computer

How do you install React?

React is a library, so saying install might sound a bit weird. Maybe setup is a better word, but you get the concept.

There are various ways to setup React so that it can be used on your app or site.

Load React directly in the web page

The simplest one is to add the React JavaScript file into the page directly. This is best when your React app will interact with the elements present on a single page, and not actually controls the whole navigation aspect.

In this case, you add 2 script tags to the end of the body tag: