Practical Enterprise React : Become an Effective React Developer in Your Team

Learn to write a real-world enterprise app using the fundamentals of React and the most popular React libraries. Knowing the basics of React is important, but what is more important is knowing the common third-party libraries and how to use them. The book is perfect for intermediate to experienced React developers or busy React developers who would like to get things done and have maintainable React code. Practical Enterprise React features popular libraries such as React Router v6 for route navigation, Redux with Saga and Thunk for state management, and Formik with Yup for form and input validations. You'll also work with Material UI 5 (the next major version of the most popular UI component library in React), Axios as the HTTP client library, JWT auth for client app authentication, and TypeScript. Finally, you'll learn to deploy the app to Netlify, and containerize the React app to ship it as a standalone container instance or in a Kubernetes cluster. Become a more effective React developer by using what is available out there instead of trying to reinvent the wheel. This book reveals how to save time and money, and build better apps for your clients. Get practical with React enterprise app development and enhance your career. What You'll Learn Use TypeScript in React and React Hooks Work with Redux Toolkit, and TypeScript Build an inventory dashboard, charts, and calendar Write forms with Formik Validate inputs with Yup Use Material UI for fast user interface building Secure your React app by building a login form and protecting the routes Who This Book Is For Those interested in writing React enterprise apps. Knowledge of HTML, CSS and JavaScript/TypeScript is required, and experience with JavaScript libraries/frameworks would be useful. Table of Contents About the Authors About the Technical Reviewer Introduction Chapter 1: Getting Ahead in React React Primer Component-Based Architecture Document Object Model (DOM) Client-Side Rendering and Server-Side Rendering Unidirectional Flow/One-Way Data Binding Why React? Career Opportunities in React Summary Chapter 2: Getting Started with the Node Package Manager Node Package Manager Overview Node Version Manager Installing Packages Node Packaged Modules Package.json and Package-lock.json Semantic Versioning or Semver Yarn Summary Chapter 3: Getting Started with React Function Components and TypeScript Creating a create-react-app App Declaration Files for TypeScript with React The Typings in TypeScript Understanding React Function Components with Props The Added IntelliSense in the Code Editor React Hooks React Hooks: useState React Hooks: useEffect Summary Chapter 4: Setting Up an Enterprise-Level App How to Select a Good Boilerplate Pros of Using a Boilerplate Cons of Using a Boilerplate Cloning a Boilerplate React Boilerplate Meets CRA Husky Dependencies A Closer Look at Some Dependencies Types Dependencies Setting Up Your Visual Studio Code (Hybrid Text Editor) Summary Chapter 5: Navigating React Router Why React Router? Why Material-UI? Getting Started Basics Recap Creating routes.tsx Building a Dashboard Navigation Bar Adding Navigation Links Navigating React Router: Adding the Container-Style Class Component Creating the Dashboard Layout Navigating Path: React Hook: useRouteMatch Dashboard Component Render Props Going into React.lazy() React Suspense Eager Loading vs. Lazy Loading Summary Chapter 6: Writing Local States, Sending HTTP Requests, and ApexCharts Strict Type-Checking Options in TypeScript Adding Fake Data Using json-server Sending HTTP Requests Using Axios Shaping the Object Making Requests with Axios Installing ApexCharts Creating the Main Layout Using React Feather Icons Summary Chapter 7: Writing Data Tables, Formik Forms, and Yup Validations Component Overview Form Handling Formik Yup Data Tables Product Create View Product Create Form Product List View Updating the Routes Updating the Sidebar Dashboard Creating a Collapsible Sidebar Menu Cleaning Up a Bit... Defining Type Alias of ProductType Creating the Products Endpoint Creating the Products Service Updating the db.json Data Sending an HTTP Request Refactoring the ProductListView Creating Additional UI Styling Summary Chapter 8: Writing Data Tables, Formik Forms, and Yup Validations: Part 2 Updating the ProductCreateView Updating the ProductCreateForm Installing React Quill Installing React Dropzone Installing a Notification Library Updating Product Create Form For Your Activity Summary Chapter 9: Managing State Using Redux with Redux Toolkit Redux Overview Why Use Redux? Redux Toolkit The Flow of Redux State Management Using RTK in CodeSandbox Summary Chapter 10: Setting Up Redux Toolkit and Dispatching an Asynchronous Action Creating the Calendar View Component Updating the Routes Updating the Dashboard Sidebar Nav Reducers Cleanup Time Updating Axios Implementing Redux Toolkit Non-asynchronous Actions/Synchronous Actions Asynchronous Actions Updating the Root Reducer Updating the CalendarView Summary Chapter 11: Creating, Deleting, and Updating Events on FullCalendar Using RTK Installing Moment and FullCalendar Updating the Root Component Updating the calendarSlice Creating the Event Actions Adding the Non-async Actions Updating the CalendarView Creating the Header Component Creating an Add Edit Event Form Using Formik Updating the CalendarView Updating the Header Updating the CalendarView Checking the UI of CalendarView Checking the Chrome DevTools Checking the Redux DevTools Creating the Toolbar Styling the CalendarView Checking the FullCalendar in the UI Checking the Chrome DevTools and Redux DevTools Summary Chapter 12: Protecting Routes and Authentication in React Setting Up the Fake Server db.json API: Login and Register authService Setting Up the Login Form Creating a Register Form Adding the Login Page Updating the Routes JSON Web Token (JWT) Creating a ProtectedRoute Component Updating the Routes.tsx Updating the Dashboard Sidebar Navigation Time to Test Summary Chapter 13: Writing a Profile Form and Syncing It to Components Creating the Claims Type Creating the User Type Adding APIs: Users and UsersDb Creating the userDbService Updating the authService Another Way of Using Redux Creating the profileActionTypes Creating the profileAsyncActions Creating the profileSlice Adding profileReducer to the Reducers Creating the authSlice Adding the authSlice to the Reducers Installing JWT-decode Updating the ProtectedRoute Updating the Login Form Updating the Register Form Creating the Header Profile Updating the Navigation Bar Creating the AccountView Adding Images Creating the Pricing Page Updating the Routes Summary Chapter 14: Updating the Dashboard Sidebar Navigation Updating the db.json Updating the Dashboard Sidebar Navigation Creating the Yup Profile Validation Creating the AccountView Page Creating the Profile Details Creating General Settings Creating the Header Summary Chapter 15: Creating the Notifications, Security, and Subscription Pages Creating the Notifications Page Creating the Security Page Creating the Subscription Page Updating the AccountView Refresh Summary Chapter 16: Making the App Mobile-Friendly Getting Started Updating a Package Library Safely Updating the HomePage Updating the About Page Updating the Not Found Page Making the Navbar Mobile-Friendly Making the Dashboard Sidebar Navigation Mobile-Friendly Making the Dashboard Layout Mobile-Friendly Summary Chapter 17: Styling Methods for React Components Inline Styling Plain CSS Global CSS CSS Modules CSS-in-JS Styled-Components Library Emotion in React Summary Chapter 18: Deploying React in Netlify and in Docker GitHub Netlify Docker Docker Ignore NGINX Config Dockerfile RUN npm install Copy . ./ Docker Hub Docker Commands Summary Index Learn to write a real-world enterprise app using the fundamentals of React and the most popular React libraries. Knowing the basics of React is important, but what is more important is knowing the common third-party libraries and how to use them. The book is perfect for intermediate to experienced React developers or busy React developers who would like to get things done and have maintainable React code. Practical Enterprise React features popular libraries such as React Router v6 for route navigation, Redux with Saga and Thunk for state management, and Formik with Yup for form and input validations. You'll also work with Material UI 5 (the next major version of the most popular UI component library in React), Axios as the HTTP client library, JWT auth for client app authentication, and TypeScript. Finally, you'll learn to deploy the app to Netlify, and containerize the React app to ship it as a standalone container instance or in a Kubernetes cluster. Become a more effective React developer by using what is available out there instead of trying to reinvent the wheel. This book reveals how to save time and money, and build better apps for your clients. Get practical with React enterprise app development and enhance your career. You will: Use TypeScript in React and React Hooks Work with Redux Toolkit, and TypeScript Build an inventory dashboard, charts, and calendar Write forms with Formik Validate inputs with Yup Use Material UI for fast user interface building Secure your React app by building a login form and protecting the routes