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

Chapter 2. JSX in Depth

In the first chapter, we built our first component using React. We saw how using JSX makes the development easy. In this chapter, we will dive deep into JSX.

JavaScript XML (JSX) is an XML syntax that constructs the markup in React components. React works without JSX, but using JSX makes it easy to read and write the React components as well as structure them just like any other HTML element.

In this chapter, we will cover following points:

  • Why JSX?

  • Transforming JSX into JavaScript

  • Specifying HTML tags and React components

  • Multiple components

  • Different types of JSX tags

  • Using JavaScript expressions inside JSX

  • Namespaced components

  • Spread attributes

  • CSS styles and JSX

  • JSX Gotchas

At the end of the chapter, we will get familiar with the JSX syntax, how it should be used with React, and best practices of using it. We will also study some of the corner cases that one can run into while using JSX.

Previous Section
End of Section 1
Next Section