React and Libraries: Your Complete Guide to the React Ecosystem

Description

Table of Contents About the Author About the Technical Reviewer Introduction Chapter 1: Learn React Basic Concepts Getting Started with React What Is React? Why React? Installing an IDE Why Do I Even Need an IDE? How to Install VS Code? Creating a Minimalistic Stand-Alone “Hello World” Program What Is JSX, and Why Do We Need It? DOM React Virtual DOM Under the Hood Babel and ES5/ES6 Getting Started with TypeScript Why Should You Integrate TypeScript into Your React Project? TypeScript vs. JavaScript: What’s the Big Deal? TypeScript Cheat Sheet React Template Starter Project Options Summary Chapter 2: Starter React Project and Friends Getting Started with the Create-React-App Starter Project React Developer Road Map How Can I Integrate These Tools into My ReactJS Project? Prerequisites Install Node and NPM on a Mac/PC Download the Libraries: Yarn or NPM Install Yarn on a Mac/PC Create-React-App MHL Template Project Vanilla-Flavor Create-React-App react-scripts Gitignore Public Folder Create-React-App with TypeScript CRA Template with TypeScript CSS Preprocessors: Sass/SCSS Redux Toolkit/Recoil Material-UI CSS Framework Styled Components React Router Jest and Enzyme + Sinon Sinon E2E Testing: Jest and Puppeteer Component Folder Structure Generate Templates Linting: ESLint and Prettier Other Useful Libraries Classnames Prop-types Additional Useful Utilities Summary Chapter 3: React Components What Are React Components? JavaScript Function and Class Components JavaScript Functional Components Javascript Class Component React Hooks TypeScript Components Pure Functions Pure Functions with Side Effects TypeScript Function Components TypeScript Class Components Exotic Components: Factory Components Complex TS Function Components Extending props for Router Extending props for Material-UI Styles Extending props Inheritance on Your Own Using Pure Components As Much As Possible Re-re-re-re-render Summary Chapter 4: React Router and Material-UI Integrate React Router Why Do We Need a Router? How Can We Integrate React Router into the ReactJS Project? Step 1: Scaffolding Step 2: Showing views, where we create the route logic and linking Integrate the Material-UI CSS Framework Why Do We Need a CSS Framework? How Can We Integrate Material-UI into Our ReactJS Project? Let’s Get Started HeaderTheme Component Header Subcomponent HeaderTopNav Subcomponent React Event Handlers HeaderDrawer Subcomponent Header.scss Footer.scss Pages scss AppRouter.tsx Summary Chapter 5: State Management State Management Architecture Why Do We Need a State Management Architecture? Facebook Solution: Flux What Is MVC and What Does It Solve? Vanilla Redux Why Redux How Can You Learn Redux? Step 1: Set Up the Project Step 2: Create a Redux Cycle Redux Actions Reducers Step 3: Redux Store Step 4: Invoke an Action Let’s Recap Redux Toolkit Redux Toolkit Under the Hood Implementing a Theme Using the Redux Toolkit Model Enumeration Object: preferencesObject Model Index File Set the Theme as a Global Style: index.scss Create a State Slice: preferencesSlice.ts Redux Toolkit Store Footer Architecture Footer Subcomponent Footer.styles.ts Styled Component FooterTheme Wrapper Parent Component HeaderTheme Parent Component Header Subcomponent HeaderTopNav Subcomponent HeaderDrawer Subcomponent AppRouter Refactoring Redux DevTools Extension Summary Chapter 6: MERN Stack: Part I Update Preferences with Recoil What Is the MERN Stack? What Is Recoil? Why Use Recoil? Share the User’s Preference State with Recoil Implementing Recoil Updating preferencesObject Preferences Atom Session Atom Refactoring the View Layer UserButton Subcomponent UserListButton Component HeaderTheme Component Changes Header Subcomponents Header Subcomponent HeaderTopNav Subcomponent HeaderDrawer Subcomponent Footer Component Refactoring FooterTheme Component Footer Subcomponent AppRouter Component What Is RecoilRoot? Suspense Tag Create a Members-Only Area with the MERN Stack How Do We Build a Members-Only Area with the MERN Stack? Front End Toast Message Component toastObject Model Recoil: Toast Atom Toast Component Toast.scss ToastNotification Subcomponent ToastNotification.scss AppRouter Component Refactoring Exclusive Members Area userObject Model Login Recoil Logic User Atom Recoil User Selector Login Components LoginForm.styles.ts LoginForm Login Page Center Content Component LoginPage Component LoginPageInner and Subcomponents SubmitUserForm Subcomponent onSuccessLogin Logic onFailLogin Logic Members Page MembersHome MembersPage Summary Chapter 7: MERN Stack: Part II What We’ll Be Building Why Node.js? Why Express? Why Should You Use MongoDB? Building the Back End Database Schema Validate Service API Express Framework Local MongoDB Setting Up MongoDB Authentication Full Login Register System Register Model Register Atom Register Selector Refactor Login Register View Layer Register Form Register Form Style Register Page Refactor AppRouter Register User Service API Summary Chapter 8: React Deployment: MERN Stack Setting Up a Git Repo for Your Projects Setting Up a Ubuntu Server as a Production Server Why Ubuntu Server? Ubuntu 16.04, 18.04, or 20.04? How to Install the MERN on Ubuntu 18.04/20.04? Setting Up the Ubuntu Server for MERN Step 1: Roll Out an Ubuntu Server Step 2: Set Up SSH and Install the Software and Upgrades Step 3: Install MongoDB MongoDB Client Step 4: Set Up Authentication Connecting to the Secure MongoDB Removing the User Changing the Storage Location Step 5: Set Up SSL Renewing the Certificate 443 Security Publishing with the Grunt Script Why Grunt? Grunt vs. Gulp vs. Webpack vs. NPM Scripts How to Publish Your Script with Grunt? Publishing Content with Grunt Step 1: Publishing the Front End Step 2: Publish Back-End Code to the Remote Server The Default Task The upload-app Task The node-restart Task Summary Chapter 9: Testing Part I: Unit Test Your React App Setting Up the Project What Is the Jest Library? What Is Jest-dom? What Is Enzyme? What Is Sinon? Why Should You Learn Jest and Enzyme? How Can You Learn Jest and Enzyme? Creating and Testing the Calculator Component Step 1: Setting Up and Configuring Our Project Step 2: Creating Our Custom Component Step 3: Testing the Code Setting Up an Adapter Setting Up a Snapshot with enzyme-to-json Testing App Component: App.test.tsx Testing the Router Component: AppRouter.test.tsx Creating Our Calculator Component Test File A Single Test for Noninteractive Components Snapshot Test Suite Test Component Props Testing an Interactive Button Testing a Suite to Test a Function Directly Testing an Interactive Button and Our State Testing Using a Spy Under the Hood Mounting Shallow Render enzyme-to-json Jest Matchers Sinon Library Testing Router Pages Summary Chapter 10: Testing Part II: Development and Deployment Cycle Performing End-to-End Testing Why Should you Care About E2E Testing? Why TypeScript? Why Puppeteer? Why Jest and Jest Puppeteer? How Can I Integrate E2E Testing into My CRA React App? Step 1: Setting Up and Configuring Our Project Configuring Our Project jest-puppeteer.config.js .env tsconfig.json .eslintignore e2e/jest.config.js e2e/global.d.ts package.json Step 2: Writing Code e2e/puppeteer_standalone.js e2e/app.test.tsx Step 3: Performing E2E Testing Automating Development and Using a Continuous Integration Cycle Motivation Structure Setting Up the Project Testing Coverage Setting Up Git Hooks with Husky Setting Up a Workflow with GitHub Actions Main Action: main.yml Build Action: build.yaml Test Action: test.yaml Lint Action: lint.yml Test Coverage with Codecov.io Why Codecov? CI with Travis Why Travis? Tracking Code Coverage with Coveralls Why Coveralls? Checking the Quality of Your Code with DeepScan Why DeepScan? Summary Chapter 11: Debug and Profile Your React App Debugging Your React App Breakpoints Debugging a React App with Visual Studio Code Debugging a React App on WebStorm Using the Console Using a Debugger Statement Debugging Jest Tests Debugging Jest Tests with Chrome DevTools Debugging Jest Tests with the VS Code IDE Debugging Jest Tests with WebStorm Using Chrome DevTools Viewing the DOM Elements Setting Breakpoints on DOM Changes Using Chrome DevTools Extensions What Are Chrome DevTools Extensions? Chrome DevTools Extension: React Developer Tools Chrome DevTools Extension: Realize for React Chrome DevTools Extension: Recoil Using a Web Proxy Using Charles Using a Network Protocol Analyzer Wireshark Profiling Your React App How to Profile My React App? Activity Monitor/Windows Task Manager Browser’s Profiling Tools Chrome DevTools’ Performance Tab Chrome DevTools Extension: Profiler in React Developer Tools React Profiler API Summary Chapter 12: Optimize Your React App Why Do We Need to Optimize? What Will You Learn? How Can I Optimize My App? Analyzer Bundle Use PureComponent as a Class Component As Much As Possible Re-re-re-re-render Lazy Loading Prerendering Static Pages How to Get react-helmet to Generate a Title for Each Page? Precache: Working Offline What Does It Mean? How Is Your App Working Offline? Code Splitting Dynamically Import Module Federation Tree Shaking Import Required Modules vs. Using an import Statement with No Specifiers Reducing Media Size Prefetching Cleaning Up Unused Event Handlers Setting Up Side Effects in the useEffect Hook Cleaning Up Side Effects My Final Notes Summary Index