Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying React 16 Essentials
  • Table Of Contents Toc
React 16 Essentials

React 16 Essentials - Second Edition

By : Christopher Pitt, Artemij Fedosejev, Adam Boduch
3 (2)
Buy this Book
close
close
React 16 Essentials

React 16 Essentials

3 (2)
By: Christopher Pitt, Artemij Fedosejev, Adam Boduch
Buy this Book

Overview of this book

React 16 Essentials, Second Edition, fully updated for React 16, takes you on a fast-paced journey through building your own maintainable React 16 applications. React experts Artemij Fedosejev and Adam Boduch give you all the essentials you need to know and start working with React 16, in this new edition of the best-selling React.js Essentials title. You'll find the latest React 16 code updates, assessment of React Fiber, new coverage of Redux, and how to work as a modern React developer. The authors offer you their current assessment of React Fiber, and you'll soon be exploring React 16 hands on, creating your own single and multiple user interface elements with React 16. You'll then see how to create stateless and stateful components and make them reactive. You'll also learn to interact between your components and lifecycle methods, and gauge how to effectively integrate your user interface components with other JavaScript libraries. Delve deep into the core elements of the Redux architecture and learn how to manage your application and data persistence. Then go the extra mile with the Jest test framework, and run multiple tests on your applications and find solutions to scale without complexity. Today React is used by Facebook, Instagram, Khan Academy, and Imperial College London, to name a few. Many new users recognize the benefits of React and adopt it in their own projects, forming a fast-growing community. The speed at which React has evolved promises a bright future for anyone who invests in learning it today. Let Artemij and Adam bring you a brand new look at React 16 and React Fiber, and move your web development into the future.
Table of Contents (14 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. What's New in React 16
Icon
1. What's New in React 16
Icon
Rethinking rendering
Icon
Summary
2
2. Installing Powerful Tools for Your Project
Icon
2. Installing Powerful Tools for Your Project
Icon
Approaching our project
Icon
Installing Node.js and npm
Icon
Installing Git
Icon
Getting data from the Twitter Streaming API
Icon
Filtering data with Snapkite Engine
Icon
Creating the project structure
Icon
Creating package.json
Icon
Reusing Node.js modules
Icon
Building with Webpack
Icon
Creating a web page
Icon
Summary
3
3. Creating Your First React Element
Icon
3. Creating Your First React Element
Icon
Understanding the virtual DOM
Icon
Installing React
Icon
Creating React elements with JavaScript
Icon
Rendering React elements
Icon
Creating React elements with JSX
Icon
Summary
4
4. Creating Your First React Component
Icon
4. Creating Your First React Component
Icon
Stateless versus stateful
Icon
Creating your first stateless React component
Icon
Creating your first stateful React component
Icon
Summary
5
5. Making Your React Components Reactive
Icon
5. Making Your React Components Reactive
Icon
Solving a problem using React
Icon
Planning your React application
Icon
Creating a container React component
Icon
Summary
6
6. Using Your React Components with Another Library
Icon
6. Using Your React Components with Another Library
Icon
Using another library in your React component
Icon
Understanding React component's lifecycle methods
Icon
Summary
7
7. Updating Your React Components
Icon
7. Updating Your React Components
Icon
Understanding component lifecycle updating methods
Icon
Setting default React component properties
Icon
Validating React component properties
Icon
Creating a Collection component
Icon
Summary
8
8. Building Complex React Components
chevron up
Icon
8. Building Complex React Components
Icon
Creating the TweetList component
Icon
Creating the CollectionControls component
Icon
Creating the CollectionRenameForm component
Icon
Creating the Button component
Icon
Creating the CollectionExportForm component
Icon
Summary
9
9. Testing Your React Application with Jest
Icon
9. Testing Your React Application with Jest
Icon
Why write unit tests?
Icon
Creating test suites, specs, and expectations
Icon
Installing and running Jest
Icon
Creating multiple tests and expectations
Icon
Testing React components
Icon
Summary
10
10. Supercharging Your React Architecture with Flux
Icon
10. Supercharging Your React Architecture with Flux
Icon
Analyzing your web application's architecture
Icon
Understanding Flux
Icon
Creating a dispatcher
Icon
Creating an action creator
Icon
Creating a store
Icon
Summary
11
11. Preparing Your React Application for Painless Maintenance with Flux
Icon
11. Preparing Your React Application for Painless Maintenance with Flux
Icon
Decoupling concerns with Flux
Icon
Refactoring the Stream component
Icon
Creating CollectionStore
Icon
Creating CollectionActionCreators
Icon
Refactoring the Application component
Icon
Refactoring the Collection component
Icon
Refactoring the CollectionControls component
Icon
Refactoring the CollectionRenameForm component
Icon
Refactoring the TweetList component
Icon
Refactoring the StreamTweet component
Icon
Building and going beyond
Icon
Summary
12
12. Refining Your Flux Apps with Redux
Icon
12. Refining Your Flux Apps with Redux
Icon
Why Redux?
Icon
Controlling state with reducers
Icon
Connecting components to an application state
Icon
Summary
13
Index
Icon
Index

Creating the Button component

Create the following ~/snapterest/source/components/Button.js file:

import React from 'react';

const buttonStyle = {
  margin: '10px 0'
};

const Button = ({ label, handleClick }) => (
  <button
    className="btn btn-default"
    style={buttonStyle}
    onClick={handleClick}
  >
    {label}
  </button>
);

export default Button;

The Button component renders a button.

Notice that we didn't declare a class, but rather defined a simple function called Button. This is the functional way of creating React components. In fact, when the purpose of your component is purely to render some user interface elements with or without any props, then it's recommended that you use this approach.

You can think of this simple React component as a "pure" function which takes an input in the form of the props object and returns JSX as output—consistently, no matter how many times you call this function.

Ideally, most of your components should be created that way—as ...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
React 16 Essentials
End of Section 8
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon