React for Real

Front-End Code, Untangled

by Ludovico Fischer

When traditional web development techniques don’t cut it, try React. Use React to create highly interactive web pages faster and with fewer errors. With a little JavaScript experience under your belt, you’ll be up and running in no time creating dynamic web applications. Craft isolated components that make your apps easier to develop and maintain, with plenty of guidance on best practices. Set up automated tests, and make pages render fast for your users. See how to use your React skills to integrate with other front-end technologies when needed.

Dive right into React by defining components, the basic building blocks of a React application. Integrate modern JavaScript language features such as classes and arrow functions in your app. Analyze the relationships in your data to isolate state, and sync the data model with what your users see.

Once you’re familiar with how a React application works, organize your code base with modules. Configure a production build and deliver your app as efficiently as possible with Webpack. Master testing with React-specific advice and tools to catch the most bugs with the least amount of code. Learn the basics of the Redux library. Define actions and manage an immutable central state with reducers, then connect Redux to your React components to build even larger and more complex interfaces. Package your React code as a standalone widget so anyone can use it in their own applications. Reuse existing JavaScript code in your React components, and build a new React view on top of an existing data model shared with a legacy application.

When you finish this book, you’ll be well on your way to solving your front-end problems with React.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P1.0 2017/08/30

• Acknowledgments
• Preface
  • Who Should Read This Book
  • What’s in This Book
  • What You Need
  • Conventions
  • Where to Go for Help
• An Introduction to Components
  • Set Up Your First Project
  • Create a Component
  • Describe Elements with JSX
  • Match Components and Data
  • Design Presentational Components
  • Assemble the Word Counter
  • What You Learned
• Work with State and Events
  • Get to Know State
  • Define the Application State
  • Update the State with Events
  • Handle Asynchronous Events
  • What You Learned
• Create a Production Build
  • Set Up the Development Environment
  • Configure webpack
  • Configure Babel
  • Run Your Build
  • Speed Up Feedback
  • Organize Your Code with Modules
  • What You Learned
• Test Your React Components
  • Set Up the Test Framework
  • Test a Single Function
  • Test Component Boundaries
  • Prevent Visual Regressions
  • What You Learned
• Using Redux as a Central Data Store
  • Redux Fundamentals
  • Design the Data Flow
  • Connect the User Interface
  • What You Learned
• Work Well with Others
  • Share Your Code with Others
  • Integrate Legacy Widgets
  • Combine React Views with External Models
  • What You Learned