Mastering React: A Beginner’s Guide
- Length: 260 pages
- Edition: 1
- Language: English
- Publisher: CRC Press
- Publication Date: 2022-11-29
- ISBN-10: 1032313552
- ISBN-13: 9781032313559
- Sales Rank: #0 (See Top 100 Books)
Mastering React helps the reader master the React JavaScript framework for faster and more robust front-end development.
React is a JavaScript framework for creating interface design that is coherent, cheap, and customizable. It makes it possible to create complicated user interfaces out of “modules,” which are small, independent pieces of code. The primary goal of using React is the easier creation of visual interfaces.
React was developed by Facebook and released to the public in 2013. It powers some of the most popular apps, including Facebook and Instagram.
It uses virtual DOM (JavaScript Document Object Model), which increases the application’s performance. The virtualized DOM in JavaScript is faster than the conventional DOM. React can be used as both a standalone framework and in conjunction with other platforms. It employs component and data patterns to improve clarity while also assisting in maintaining larger applications.
React saves you time and money during development because it is component-based. The design can be segmented into reusable modules that could be used to adjust interfaces dynamically. The front-end development industry has a reputation for moving at a breakneck speed. Organizations cannot be expected to modify their apps annually to catch pace with technological innovations. This is why businesses prefer React.
React simplifies many things, and its ecosystem is full of valuable subframeworks and tools. React is among the most powerful front-end frameworks out there. As such, learning React development can future-proof anyone’s career in the long run, and even yield immediate benefits. This book explains the concepts of React in an easy-to-grasp language.
With Mastering React, learning React becomes a charm, and readers will undoubtedly advance their careers with the help of this book.
The Mastering Computer Science series is edited by Sufyan bin Uzayr, a writer and educator with more than a decade of experience in the computing field.
Cover Half Title Series Page Title Page Copyright Page Table of Contents Mastering Computer Science Series Preface About the Editor Chapter 1 Introduction to React What Is React? Let Us Comprehend This with a Practical Example Why We Should Learn ReactJS? DOM Updating DOM What Are the Foremost Features of React? History of React: From 2010–2017 2010: The First Cyphers of React 2011: An Initial Standard of React 2012: Something New Had on Track at Facebook 2013: The Year of the Big Inauguration 2014: The Year of Expansion 2015: React Is Stable 2016: React Gets Mainstream 2017: The Year of Further Enhancements Advantages and Disadvantages Advantages Disadvantages Benefits over Other JS Frameworks Chapter 2 Basics of React: JSX (JavaScript XML) In This Chapter What Is JSX? Characteristics of JSX Why Use JSX in React? Creating React Nodes Using JSX Rendering JSX to DOM Notes Using JavaScript Expressions in JSX JSX for Loop JSX vs. HTML Use of className in Its Place of the Class Attribute JSX HTML Self-closing tags JSX HTML Event Listeners Installation or Setup ReactJS | Setting up the Development Environment Using react-dom.js and react.js in an HTML Page Using JSX via Babel Converting JSX via Babel in the Browser With the use of browser.js (Babel 5.8.23) to Convert JSX in the Browser By Using JSX Using ES6 and ES* with React Writing React with JSFiddle What Is a React Component? Creating React Components Notes What Are Component Props? Notes Sending Component Props Notes What Is Component State? Working with Component State State vs. Props Props State Creating Stateless Function Components Chapter 3 React Components React.Component The Component Lifecycle Mounting Updating Unmounting React Elements Arrays and Fragments Rarely Used Lifecycle Methods Error Boundaries Legacy Lifecycle Methods Other APIs Class Properties defaultProps Instance Properties Props State Conditional Rendering Element Variables Inline If with Logical && Operator What Are Styled Components Advantages of Using Styled Components Creating and Styling: A Common Web Page Using Styled Components Installing Styled Components Starting the Development Server Creating Our Component Routing a Component into the Main App Onto Some Styling Now Styling the Container Styling the Content Area Styling the Background Image Styling the Call to Action (CTA) Area Styling LogoOne Styling the Sign Up Button Styling the Description Styling LogoTwo Styling the nav Function Summary Return the Falsy Expression Preventing Component from Rendering Styling Components in React What Does “Styling” in React Apps Even Mean? Major Styling Strategies in React Chapter 4 Handling Images Importing Images Inside Public Folder Notes Using the Public Folder index.html App.js Inside the Folder “src” Notes How to Use App.js Example Code Conclusion Chapter 5 React Routers Need for React Router React Router Installation Components in React Router Routers History Routes Component Prop Render Prop Children Prop Switch Link Nested Routing Protected Routes Custom Routes Router and Query Parameters How to Get Query String Values in the JavaScript JS with URLSearchParams Getting Parameters from URL in the React Application How Do You Pass the Parameter in a Query? Dealing with the Router and Query Params Chapter 6 Programmatic Navigation What Is Programmatic Navigation? How Do You Route Programmatically in the React? Using Redirect Component Using history.push() Method Using withRouter Method Using the useHistory Hook Conclusion Build-in Progress Lazy Loading Why Is Lazy Loading (and Suspense) Important Advantages of Lazy Loading Disadvantages of Lazy Loading How to Install Lazy Loading Components in the React Strategies or Approaches to Split Your JavaScript JS Codes React.lazy react-loadable react-loadable-visibility Prerequisites npm install -g create-react-app npm create-react-app my-app npm start Without React Suspense Chapter 7 Advanced Tools Context API What Is React’s Context API (Application Programming Interface)? React Context API: How Does It Work? Context API Will Replace Redux? How to Use Context API? Example using React Hooks Example using React Hooks Building/Designing an App Using Provider Pattern and Context API API (Application Programming Interface) The syntax to create “React.createContext”const UserContext = React.createContext(default Value);Creating a Context Object Context.Provider Class.contextType Context.displayName Introduction to Hooks State Hook Declaring Multiple State Variables Effect Hook Rules of Hooks Building Your Own(custom) Hooks React.js Render Props Creating a React App and Downloading a Module For cross-cutting issues, use Render Props. Other Than Rendering Props Caveats Chapter 8 Testing Your Code Trade-offs Recommended Tools A Brief Introduction to Testing Why Test? Unit Test Component Test Snapshot Test Advantages and Disadvantages of Testing Advantages Disadvantages Introduction to Jest Process of Running a Test with Jest Creating a Test File Run the Code Skipping or Isolating a Test Mocking Function Testing React Components Snapshot Testing What Is Nock? Adding Nock Using “Nock” Using 'nock.back' Final Thoughts How to Use React Testing Library Installing React Testing Library and Jest Create a New React App with CRA Default CRA Test Code Debug the Element Rendered by React Testing Libraries React Testing Library Methods for the Finding Elements How to Test User Designed Events with React Testing Library Chapter 9 Redux Explicitly Passing the Store State Actions Action Type Naming Conventions Action Payload Data Reducers The Sort Reducer The Store Subscribing to Stores Adding Redux to React Explicitly Passing the Store Passing the Store via Context Sagas, Side-Effects Making Asynchronous Calls Time for the Explanations Create Another File Sagas.spec.js Chapter 10 Forms Referencing Forms Submitting the Form Login Form SignUp Form Event Bubbling and Capturing in JavaScript Example of Event Bubbling The Output of the above Code Explanation of the above Code Stopping Bubbling Event Capturing Example of Event Capturing Explanation of Code State Actions Action Payload Data Changing HTML Style Using Events Automatic HTML Form Authentication Data Validation HTML Constraint Validation Attribute Description Constraint Validation CSS Pseudo Selectors Learn to Create HTML Animations Using JavaScript A Basic Web Page Create an Animation Container Style the Elements Animation Code Create the Full Animation Using JavaScript JS Form Validation Style the Elements Animation Code Design the Full Animation Using JavaScript Syntax Add the Event Handler to an Element DOM Nodes DOM HTML Tree Node Relationships Node Tree Navigating between Nodes Child Nodes and Node Values DOM Root Nodes The nodeName Property Property of nodeValue The nodeType Property Add Several Event Handlers to the Same Element Add the Event Handler to the Window Object Passing Parameters Event Bubbling or Event Capturing? Different Approach to Place Form the Validation Logic Server-Side Form Validation Logic Client-Side Form Validation Form Validation Using HTML Client-Side Form Validation using HTML for Java Web Apps Client-Side Form Validation in Marriage App input.html Form Page Using JavaScript The Simple JavaScript JS Codes (validation.js) for the Form Validation JavaScript with getElementById - Form Validation in Java Web Application JavaScript with getElementById Solution - Form Authentication in Java Web Application From Validation Logic in the Client and Server Side Form Validation Logic in Client and Server Side but Validate at the Server Side Only if Client-Side Authentication Not Done JavaScript Form Validation Example JavaScript Retype Password Authentication Test It Now Test It Now Code Explanation Bibliography Index
Donate to keep this site alive
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.