Build modular React web apps that are scalable, maintainable and powerful using design patterns and insightful practices
Key Features
Get familiar with design patterns in React like Render props and Controlled/uncontrolled inputs
Learn about class/ functional, style and high order components with React
Work through examples that can be used to create reusable code and extensible designs
Book Description
React is an adaptable JavaScript library for building complex UIs from small, detached bits called components. This book is designed to take you through the most valuable design patterns in React, helping you learn how to apply design patterns and best practices in real-life situations.
You’ll get started by understanding the internals of React, in addition to covering Babel 7 and Create React App 2.0, which will help you write clean and maintainable code. To build on your skills, you will focus on concepts such as class components, stateless components, and pure components. You'll learn about new React features, such as the context API and React Hooks that will enable you to build components, which will be reusable across your applications. The book will then provide insights into the techniques of styling React components and optimizing them to make applications faster and more responsive. In the concluding chapters, you’ll discover ways to write tests more effectively and learn how to contribute to React and its ecosystem.
By the end of this book, you will be equipped with the skills you need to tackle any developmental setbacks when working with React. You’ll be able to make your applications more flexible, efficient, and easy to maintain, thereby giving your workflow a boost when it comes to speed, without reducing quality.
What you will learn
Get familiar with the new React features,like context API and React Hooks
Learn the techniques of styling and optimizing React components
Make components communicate with each other by applying consolidate patterns
Use server-side rendering to make applications load faster
Write a comprehensive set of tests to create robust and maintainable code
Build high-performing applications by optimizing components
Who this book is for
This book is for web developers who want to increase their understanding of React and apply it to real-life application development. Prior experience with React and JavaScript is assumed.
Author(s): Carlos Santana Roldán
Publisher: Packt
Year: 2019
Language: English
Pages: 350
Cover
Title Page
About Packt
Copyright and Credits
Contributors
Table of Contents
Preface
Section 1: Hello React!
Chapter 1: Taking Your First Steps with React
Declarative programming
React elements
Unlearning everything
Common misconceptions
Summary
Chapter 2: Clean Up Your Code
JSX
Babel 7
Hello, World!
DOM elements and React components
Props
Children
Differences with HTML
Attributes
Style
Root
Spaces
Boolean attributes
Spread attributes
JavaScript templating
Common patterns
Multi-line
Multi-properties
Conditionals
Loops
Control statements
Sub-rendering
Code style
EditorConfig
Configuring EditorConfig
ESLint
Installation
Configuration
Git hooks
React plugin
Airbnb React/JSX style guide
The basics of functional programming
First-class objects
Purity
Immutability
Currying
Composition
FP and user interfaces
Summary
Section 2: How React works
Chapter 3: Creating Truly Reusable Components
Creating classes
The createClass factory
Extending React.Component
The main differences
Props
State
Autobinding
Stateless components
Props and context
The this keyword
State
Life cycle
Refs and event handlers
Optimization
Layout components
The state
External libraries
How it works
Asynchronous
Using the state
Derivables
The render method
React hooks
Prop types
React Docgen
Reusable components
Fragments
Summary
Chapter 4: Compose All the Things
Communication between components
Children
The container and presentational pattern
Mixins
Higher order components
Recompose
Context
FunctionAsChild
Summary
Chapter 5: Proper Data Fetching
Data flow
Child-parent communication (callbacks)
Common parent
Data fetching
React-refetch
Context API
Summary
Chapter 6: Write Code for the Browser
Forms
Uncontrolled components
Controlled components
JSON schema
Handling events
Refs
Animations
React motion
Scalable Vector Graphics
Summary
Section 3: Performance, Improvements and Production!
Chapter 7: Make Your Components Look Beautiful
CSS in JavaScript
Inline styles
Radium
CSS modules
Webpack 4
Setting up a project
Locally scoped CSS
Atomic CSS modules
React CSS modules
Styled components
Summary
Chapter 8: Server-Side Rendering for Fun and Profit
Universal applications
Reasons to implement SSR
SEO
A common code base
Better performance
Don't underestimate the complexity
A basic example
A data fetching example
Next.js
Summary
Chapter 9: Improve the Performance of Your Applications
Reconciliation
Keys
Optimization techniques
shouldComponentUpdate
Stateless functional components
Common solutions
Why did you update?
Creating functions inside the render method
Constants props
Refactoring and good design
Tools and libraries
Immutability
Babel plugins
Summary
Chapter 10: About Testing and Debugging
The benefits of testing
Painless JavaScript testing with Jest
Testing events
React DevTools
Redux DevTools
Summary
Chapter 11: React Router
Installation and configuration
Creating our sections
Adding parameters to the routes
Summary
Chapter 12: Anti-Patterns to be Avoided
Initializing the state using properties
Mutating the state
Using indexes as a key
Spreading properties on DOM elements
Summary
Chapter 13: Deploying to Production
Creating our first Digital Ocean Droplet
Signing up to Digital Ocean
Creating our first Droplet
Installing Node.js
Configuring Git and GitHub
Turning off our droplet
Configuring nginx, PM2, and a domain
Installing and configuring nginx
Setting up a reverse proxy server
Adding a domain to our droplet
Implementing CircleCI for continuous integration
Adding an SSH key to CircleCI
Configuring CircleCI
Creating ENV variables in CircleCI
Summary
Chapter 14: Next Steps
Contributing to React
Distributing your code
Publishing an npm package
Summary
Other Books You May Enjoy
Index
