Book Image

ReactJS by Example - Building Modern Web Applications with React

By : Vipul A M
Book Image

ReactJS by Example - Building Modern Web Applications with React

By: Vipul A M

Overview of this book

ReactJS is an open-source JavaScript library that brings the power of reactive programming to web applications and sites. It aims to address the challenges encountered in developing single-page applications, and is intended to help developers build large, easily scalable and changing web apps. Starting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux. By the end of this book, you will not only have a good understanding of ReactJS but will also have built your very own responsive frontend applications from scratch.

Related Content you might be interested in

Current Title:

Small book image
ReactJS by Example - Building Modern Web Applications with React
Vipul A M
Apr, 2016 | 280 pages
No titles found
Table of Contents (20 chapters)
ReactJS by Example - Building Modern Web Applications with React
ReactJS by Example - Building Modern Web Applications with React
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with React
Getting Started with React
What is React?
When Shawn meets Mike and ReactJS
Requiring React library
Building our first component
Back to work
Displaying static data
Passing data to components
Summary
2
JSX in Depth
JSX in Depth
Why JSX?
Transforming JSX into JavaScript
HTML tags vs React components
Self closing tag
Multiple components
JavaScript expressions
Namespaced components
Spread attributes
Styles in JSX
JSX Gotchas
Conditionals in JSX
Non-DOM attributes
Summary
3
Data Flow and Life Cycle Events
Data Flow and Life Cycle Events
Data flow in React
Props validation
Specifying default props
Modifying this.props.children
State
Setting initial state
Setting state
Avoiding state
State versus props
Component life cycle overview
Component life cycle methods
Summary
4
Composite Dynamic Components and Forms
Composite Dynamic Components and Forms
Forms in React
Setting up the application
Getting started with forms
Interactive props
Controlled components
Uncontrolled components
Getting started with form wizard
Form events
Parent Child relationship
Form validation
Shipping details step
Delivery details step
Summary
5
Mixins and the DOM
Mixins and the DOM
Back at the office
Adding a modal
Refs
Summary
6
React on the Server
React on the Server
Getting React to render on server
On the server
Summary
7
React Addons
React Addons
Getting started with Addons
Cloning components
Summary
8
Performance of React Apps
Performance of React Apps
Performance of React apps
Virtual DOM
The PERF addon
DOM operations performed by React
PureRenderMixin
Immutable data
Summary
9
React Router and Data Models
React Router and Data Models
A new adventure
Creating Backbone models
Incorporating defined Backbone models
Data models and Backbone
Summary
10
Animation
Animation
Fun stuff at Adequate LLC!
Model updates
Animate
Summary
11
React Tools
React Tools
Development tools
React Dev Tools
Build tools
Summary
12
Flux
Flux
Flux architecture and unidirectional flow
Flux actions
Flux stores
Summary
13
Redux and React
Redux and React
Redux
Setting up Redux
Summary
Index
Index

About the Reviewers

Muhammad Arslan has been working in different roles: Senior IT-Developer, IT-Consultant, TechLead and Architect. He has vast experience of frontend and backend technologies and agile development. He has two master's degrees in Software Engineering and E-commerce. He has done his master's thesis in Usability and User Experience. He is also Oracle Certified Professional, Java Programmer (OCPJP).

He is currently working in biggest Nordic bank Nordea as Senior IT-Developer. He has previously worked in Digital River World Payments on bank gateway/iso connections and designed user interfaces. He worked in Accedo on SmartTV applications and application management products as well.

You can follow him on Twitter @arslan_mecom or you can check out his blog http://www.jhear.com/.

I would like to thank my mother, father (late), and my better half, for their continuous support for making me successful in my career.

Pawel Czekaj has a bachelor's degree in computer science. He is a web developer with strong backend (PHP, Java, MySQL, and Unix system) and frontend (AngularJS, Backbone, React.js, and jQuery) experience. He loves JavaScript, React.js, and Angular.js. Previously, he worked as a senior full stack web developer. Currently, he is working as a frontend developer for Cognifide and Toptal. You can contact him at http://yadue.eu.

Matt Goldspink is currently the lead engineer at Vlocity, Inc., based in San Francisco, working on their mobile and web platforms. Prior to this, he has held various roles at startups, banks, and also spent time as a technology trainer. Matt was the lead developer and architect for the award-winning mobile web platform for one of the world's leading investment banks.

Previous Section
Next Chapter