React and Libraries : Your Complete Guide to the React Ecosystem

Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. xv About the Technical Reviewer Alexander Chinedu Nnakwue has a background in mechanical engineering from the University of Ibadan, Nigeria, and has been a front-end developer for more than three years working on both web and mobile technologies. He also has experience as a technical author, writer, and reviewer. He enjoys programming for the Web, and occasionally, you can also find him playing soccer. He was born in Benin City and is currently based in Lagos, Nigeria. xvii -ReactDOM version 17: This is used for web applications (there is React Native for mobile devices). That's why there is a split in the code between React and ReactDOM. ReactDOM is the glue between React and the DOM. It includes features that allow us to access the DOM, such as ReactDOM.findDOMNode() to find an element or ReactDOM.render() to mount our component.-Babel version 8: As we explained, Babel is the library that transpiles ES6 to ES5. Now that we have looked at the React "Hello World" code, we understand why we imported these libraries and what's happening under the hood. These key concepts are crucial to understanding React. Feel free to return to this chapter if you need a refresher.In this section, we created a minimalistic stand-alone React application called "Hello World" and reviewed how to works. We installed the VS Code IDE and learned about crucial concepts such as JSX, DOM, the React virtual DOM, Babel, and ES5/ES6. Getting Started with TypeScript When it comes to writing React code, there are two options. You can write your code using JavaScript (JS) or TypeScript (TS). TypeScript is a transpiler, meaning ES6 doesn't understand TS, but TS gets compiled down to standard JS, which can be done with Babel. We will configure our project to accept TS files as well as ES6 JS files in the next chapter. 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. 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 Harness the power of React and the related libraries that you need to know to deliver successful front-end implementations. Whether you are a beginner getting started or an existing React developer, this book will provide you with the must-have knowledge you need in your toolbox to build a complete app. Start by learning how to create and style your own components, add state management, and manage routing. You'll also learn how to work with the backend using the MERN stack (MongoDB, Express, React, and Node.js). Once you have completed building your app you will learn how to deliver quality software by conducting unit testing, integration testing, and end-to-end (E2E) testing, as well as learn techniques to debug, profile, and optimize your React app. Libraries and tools covered include TypeScript, Material-UI, Styled Components, SCSS, React Router, Redux Toolkit, Recoil, Jest, Enzyme, Sinon, MongoDB, NodeJS, Express, Serve, Grunt, Puppeteer, ESLint, Prettier and many others. And, you'll get access to bonus material and learn how to conduct and nail React interview questions. Each chapter in this book can be used independently so you can pick and choose the information you'd like to learn. Use it to get deep into your React development world and find out why React has been rated the most loved framework by front-end developers for three years in a row. What You'll Learn Review the basics of DOM, React Virtual DOM, JSX, Babel, ES5/ES6, CRA, package manager, Yarn, Webpack, and build tools Write your own custom React components and learn about hooks and props. Apply routing and state management with React Route, Recoil, and Redux Toolkit Deliver quality software and reduce QA load by learning unit testing integration testing and end-to-end testing with libraries such as Jest, Jest-dom, Enzyme, Sinon, and Puppeteer Set an ultimate React automated development and CI cycle with ESLint, Prettier, Husky, Jest, Puppeteer, GitHub Actions, Codecov.io, Coveralls, Travis, and DeepScan Publish your code on Ubuntu Server with the help of Grunt Optimize your React app with pure components, lazy loading, prerender, precache, code splitting, tree shaking, reduce media size, and prefetching Who This Book Is For? This book is for new developers looking to start working on React applications, and React developers looking to expand on their existing knowledge. It is also suitable for developers coming from other front-end frameworks such as Angular and Vue who would like to add React to their toolbox. Harness the power of React and the related libraries that you need to know to deliver successful front-end implementations. Whether you are a beginner getting started or an existing React developer, this book will provide you with the must-have knowledge you need in your toolbox to build a complete app. Start by learning how to create and style your own components, add state management, and manage routing. You'll also learn how to work with the backend using the MERN stack (MongoDB, Express, React, and Node.js). Once you have completed building your app you will learn how to deliver quality software by conducting unit testing, integration testing, and end-to-end (E2E) testing, as well as learn techniques to debug, profile, and optimize your React app. Libraries and tools covered include TypeScript, Material-UI, Styled Components, SCSS, React Router, Redux Toolkit, Recoil, Jest, Enzyme, Sinon, MongoDB, NodeJS, Express, Serve, Grunt, Puppeteer, ESLint, Prettier and many others. And, you'll get access to bonus material and learn how to conduct and nail React interview questions. Each chapter in this book can be used independently so you can pick and choose the information you'd like to learn. Use it to get deep into your React development world and find out why React has been rated the most loved framework by front-end developers for three years in a row. You will: Review the basics of DOM, React Virtual DOM, JSX, Babel, ES5/ES6, CRA, package manager, Yarn, Webpack, and build tools Write your own custom React components and learn about hooks and props. Apply routing and state management with React Route, Recoil, and Redux Toolkit Deliver quality software and reduce QA load by learning unit testing integration testing and end-to-end testing with libraries such as Jest, Jest-dom, Enzyme, Sinon, and Puppeteer Set an ultimate React automated development and CI cycle with ESLint, Prettier, Husky, Jest, Puppeteer, GitHub Actions, Codecov.io, Coveralls, Travis, and DeepScan Publish your code on Ubuntu Server with the help of Grunt Optimize your React app with pure components, lazy loading, prerender, precache, code splitting, tree shaking, reduce media size, and prefetching