Practical Enterprise React: Become an Effective React Developer in Your Team [1 ed.] 1484269748, 9781484269749

Table of contents :
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

Polecaj historie

Become an Effective React Developer in Your Team 9781484269756, 9781484269749

602 70 8MB Read more

Master React in 5 Days: Become a React Expert in Under a Week 9781484298541, 9781484298558

Do you dream of learning React without spending months in endless tutorials? Then this book is for you! In just five day

213 50 6MB Read more

State Management with React Query: Improve developer and user experience by mastering server state in React 9781803231341, 1803231343

Beat common challenges in data fetching and data mutations while learning one of the most popular libraries for managing

219 102 10MB Read more

State Management with React Query: Improve developer and user experience by mastering server state in React 9781803231341, 1803231343

Beat common challenges in data fetching and data mutations while learning one of the most popular libraries for managing

1,391 51 2MB Read more

React Projects: Build 12 real-world applications from scratch using React, React Native, and React 360 9781789954937, 1789954932

Build cross-platform applications of varying complexity for the web, mobile, and VR devices using React tooling Key Feat

3,006 487 23MB Read more

React In-depth

1,223 139 321KB Read more

React Enlightenment

913 99 443KB Read more

Learning React: Functional Web Development with React and Flux 9781491954621

Table of contents : Cover......Page 1 Copyright......Page 4 Table of Contents......Page 5 Conventions Used in This Book.

3,996 789 7MB Read more

The Road to React: Your journey to master plain yet pragmatic React [2020 ed.]

Robin Wieruch, "The Road to React: Your journey to master plain yet pragmatic React.js (2020 Update)" LAST UP

3,892 846 392KB Read more

The Road to React with Firebase: Your journey to master advanced React for business web applications

The Road to React with Firebase is your personal journey to master advanced React for business web applications in JavaS

1,687 285 1MB Read more