Book Image

React.js Essentials

By : Artemij Fedosejev
Book Image

React.js Essentials

By: Artemij Fedosejev

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
React.js Essentials
Artemij Fedosejev
Aug, 2015 | 208 pages
No titles found
Table of Contents (18 chapters)
React.js Essentials
React.js Essentials
Credits
Credits
Foreword
Foreword
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Installing Powerful Tools for Your Project
Installing Powerful Tools for Your Project
Approaching our project
Installing Node.js and npm
Installing Git
Getting data from the Twitter Streaming API
Filtering data with Snapkite Engine
Creating the project structure
Creating package.json
Reusing Node.js modules
Building with Gulp.js
Creating a web page
Summary
2
Create Your First React Element
Create Your First React Element
Understanding the virtual DOM
Installing React
Creating React Elements with JavaScript
Rendering React Elements
Creating React Elements with JSX
Summary
3
Create Your First React Component
Create Your First React Component
Stateless versus stateful
Creating your first stateless React component
Creating your first stateful React component
Summary
4
Make Your React Components Reactive
Make Your React Components Reactive
Solving a problem using React
Planning your React application
Creating a container React component
Summary
5
Use Your React Components with Another Library
Use Your React Components with Another Library
Using another library in your React component
Understanding React component's lifecycle methods
Summary
6
Update Your React Components
Update Your React Components
Understanding component lifecycle's updating methods
Setting default React component properties
Validating React component properties
Creating a Collection component
Summary
7
Build Complex React Components
Build Complex React Components
Creating the TweetList component
Creating the CollectionControls component
Creating the CollectionRenameForm component
Creating the Button component
Creating the CollectionExportForm component
Summary
8
Test Your React Application with Jest
Test Your React Application with Jest
Why write unit tests?
Creating test suits, specs, and expectations
Installing and running Jest
Creating multiple specs and expectations
Testing React components
Summary
9
Supercharge Your React Architecture with Flux
Supercharge Your React Architecture with Flux
Analyzing your web application's architecture
Understanding Flux
Creating a dispatcher
Creating an action creator
Creating a store
Summary
10
Prepare Your React Application for Painless Maintenance with Flux
Prepare Your React Application for Painless Maintenance with Flux
Decoupling concerns with Flux
Refactoring the Stream component
Creating CollectionStore
Creating CollectionActionCreators
Refactoring the Application component
Refactoring the Collection component
Refactoring the CollectionControls component
Refactoring the CollectionRenameForm component
Refactoring the TweetList component
Refactoring the StreamTweet component
Build and go beyond
Index
Index

Analyzing your web application's architecture

To answer these questions, let's zoom away from the implementation details and explore our application's architecture:

  • The app.js file renders our Application component

  • The Application component manages a collection of tweets and renders our Stream and Collection components

  • The Stream component receives the new tweets from the SnapkiteStreamClient library and renders the StreamTweet and Header components

  • The Collection component renders the CollectionControls and TweetList components

Stop right there. Can you tell how data flows inside our application? Do you know where it enters our application? How does a new tweet end up in our collection? Let's examine our data flow more closely:

  1. We use the SnapkiteStreamClient library to receive a new tweet inside a Stream component.

  2. This new tweet is then passed from Stream to the StreamTweet component.

  3. The StreamTweet component passes it to the Tweet component, which renders the tweet image.

  4. A user clicks on that...

Previous Section
End of Section 2
Next Section