ReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews

Cover Page
Title Page
Copyright Page
Dedication Page
About the Author
About the Reviewer
Acknowledgement
Preface
Errata
Table of Contents
1. Introduction to Web Development
Structure
Objectives
Frontend versus backend
Modern JavaScript for ReactJS
Creating variables using let and const
Templates strings
Arrow functions
Rest property
Spread property
Destructuring
New array function: map()
New array function: reduce()
New array function: filter()
New array functions: find() and findIndex()
Classes, properties, and methods
Inheritance
Conclusion
Questions
Multiple choice questions with answers
Answers
References
2. Up and Running with React Ecosystem
Structure
Objectives
Introducing ReactJS
Component-based design
Single-page versus multi-page Web apps
Creating our first React project
Introducing JSX
Inline and external styles
Rendering dynamic elements using objects and lists
Conclusion
Questions
Multiple choice questions
Answers
3. Understanding Components, State, and Props
Structure
Objectives
Introduction to components
Understanding props
Imports and exports
CSS modules
Responsive components
Stateful and stateless components
Class-based components
Passing props to components
Conclusion
Questions
Multiple choice questions with answers
Answers
4. Lifecycle of Components
Structure
Objectives
DOM versus virtual DOM
Component lifecycles
Mounting lifecycle methods
Updating lifecycle methods
Unmounting lifecycle method
Conclusion
Questions
Multiple choice questions with answers
Answers
5. Connecting to Backend
Structure
Objectives
The purpose of backend
What is HTTP?
API Endpoints
HTTP methods
HTTP response codes
Intro to Axios
Making our first API request
POST request using Axios
PUT request using Axios
DELETE requests using Axios
Global Axios setup
Intercept request and response
Scalable code architecture for network requests
Conclusion
Questions
Multiple choice questions with answers
Answers
6. React Hooks
Structure
Objectives
Introduction to Hooks
Converting a class-based component to functional with Hooks
Hooks provided by React
useState() Hook
useEffect() Hook
Creating custom hooks
Conclusion
Questions
Multiple choice questions with answers
Answers
7. Routing in React Apps
Structure
Objectives
What is routing?
Introduction to React-Router
React-Router setup in React app
Handling dynamic URLs
Hooks provided by React Router
Conditional redirect
Handling query params in URLs
Handling 401, 404, and 500 pages
Conclusion
Questions
Multiple choice questions with answers
Answers
8. Controlled and Uncontrolled Components
Structure
Objectives
Controlled versus uncontrolled components
Forms using uncontrolled components
Forms using controlled components
Keeping the users logged in
Callback functions and callback hell
Introduction to promises
Create a promise
Chaining multiple promises
Create asynchronous functions using async and await
Restructuring our existing code using async and await
Refactor the project structure
Conclusion
Questions
Multiple choice questions with answers
Answers
9. State Management Using Redux
Structure
Objectives
Introduction to Redux
Global store
Actions
Reducer
Redux installation
Configure Redux in a React app
Create a global store
Fetch state from the global store in components
Update global store from components
Handle multiple reducers
Implementing Redux using Hooks
Action creators
Async actions using middleware
Conclusion
Questions
Multiple choice questions with answers
Answers
10. Production Build and Hosting React Apps
Structure
Objectives
Production build
Host React applications
Introduction to Webpack
Conclusion
Questions
Multiple choice questions with answers
Answers
11. Performance Optimization
Introduction
Structure
Objectives
Why measure performance?
React Profiler
useMemo()
useCallback()
PureComponents
shouldComponentUpdate()
Code splitting
Conclusion
Questions
Multiple choice questions with answers
Answers
12. Starting with Tools and Concepts of UI/UX
Structure
Objectives
Introduction to UI/UX
UI/UX tools
Different stages involved in UI/UX projects
User research
Information architecture
Wireframe
Design
Prototype
Fundamental concepts
White space
Contrast
Scale
Alignment
Colors
Typography
Visual hierarchy
Conclusion
Questions
13. Trending UI Patterns
Structure
Objectives
Glassmorphism
Neomorphism
Trying out soft gradients
Work with geometric elements
Pastel backgrounds
Designing dark mode
Conclusion
Questions
14. Prepping for React Interviews
Structure
Objectives
React Interview Process
Resume Template
Preparation Material
Easy Questions
Intermediate Questions
Hard Questions
Easy Questions [Solutions]
Intermediate Questions [Solutions]
Hard Questions [Solutions]
Index

When you talk about front-end development, the first thing that comes to any tech evangelist’s mind is the latest front-end frameworks like ReactJS, VueJS, or even Angular. If you are in the tech industry or are interested in front-end development, then we are pretty sure you must have heard about at least one of these frameworks. Based on its popularity and industry acceptance, ReactJS is leading by miles.

This book will help you learn everything you need to know about ReactJS to start working as a front-end developer. The book begins by talking about the core concepts like components, state, props, lifecycle, and hooks, which will get you comfortable with the ReactJS ecosystem. The book also talks about additional topics like routing, connecting to the backend, and handling state using Redux to give you a more holistic understanding of building production-level applications using ReactJS.

By the end of the book, you will have a deep understanding of ReactJS.

What you will learn:

• Build simple React applications like business portfolios, marketing pages, product showcases.

• Build complex React applications like e-commerce webapp or video streaming webapp like simple Youtube replicas.

• Design simple web applications using Figma.

• Get familiar with the performance optimization techniques for React Apps.

• Explore the trending UI patterns in ReactJS.

Who this book is for

This book is for fresh graduates and beginners who want to get a full-time front-end developer job. It is also for backend developers who want to upskill to become full-stack developers. Experienced front-end developers can use this book as a reference guide.