React – A JavaScript library for building user interfaces: Design simple views for each state in your application by Bundle Pageletter Publications -- Read -- Imperial Library of Trantor

Index

Preface Introduction

How It Works What Makes It Fast Benefit Concept of Virtual DOM Component-Based UI Babel and Javascript React and JSX What's the purpose of using React.js One-way Data Binding in React

Setting Up Your Environment

Installing visual studio code User versus system setup 32-bit versions Recent Windows build New Windows Terminal

Hello React

Setting Up a Babel Project Step 1: Install the Sample Application Step 2: Set Up Babel Step 3: Build and Run JSX in React JS What is the difference between JS and JSX Embedding Expressions In JSX Creating A Components Folder Expressions In JSX React.Fragment Adding State To The Component Embedding A Function Embedding Expressions In JSX Summary What does the term "render" mean in ReactJS What is ES6 ES (ECMA Script) : Standard governing JavaScript What is the Purpose of using arrow function in React How do we use arrow functions in React?

React Components

React Js Components React Js Props React class components vs function components What are the best component frameworks for React Rendering an Element into the DOM Updating the Rendered Element React Only Updates What’s Necessary

Adding State to Counter App: Part I Adding State to Counter App: Part II Alternative setState Syntax Build It: Adding State to VisibilityToggle Indecision State: Part I Indecision State: Part II Summary: Props vs., State

Stateless Functional Components

Elimination of class No ‘this’ Keyword Enforced Best Practices High Signal-to-Noise Ratio Code Completion/Intellisense Bloated Components and Poor Data Structures Are Easily Spotted Easy to Understand Easy to Test Performance Create class-based React components inside stateless functional Stateless functional components vs class based components, in React Writing functional React components versus writing components with ES6 classes

Webpack

What is Webpack Webpack Relies on Modules Webpack's Execution Process Webpack's execution process Configure Webpack 4 from scratch for a basic website

Using a Third-Party Component

Creating a Modal component structure Make the content dynamic Close the modal

Styling React

How do I add CSS classes to components? What is CSS-in-JS?

Setting up Webpack with SCSS Architecture and Header Styles Big Button & Options List Mobile Considerations Reset That $#!* Styling Option Item Styling React-Modal Styling the Options List Theming with Variables

React Router

Step 1 - Install a React Router Step 2 - Create Components Step 3 - Add a Router

Testing React Components

Firebase Authentication

What is Firebase authentication Can you use Google's Firebase only for authentication