Book Image

Isomorphic JavaScript Web Development

By : Tomas Alabes, Konstantin Tarkus
Book Image

Isomorphic JavaScript Web Development

By: Tomas Alabes, Konstantin Tarkus

Overview of this book

<p>The latest trend in web development, Isomorphic JavaScript, allows developers to overcome some of the shortcomings of single-page applications by running the same code on the server as well as on the client. Leading this trend is React, which, when coupled with Node, allows developers to build JavaScript apps that are much faster and more SEO-friendly than single-page applications.</p> <p>This book begins by showing you how to develop frontend components in React. It will then show you how to bind these components to back-end web services that leverage the power of Node. You'll see how web services can be used with React code to offload and maintain the application logic. By the end of this book, you will be able to save a significant amount of development time by learning to combine React and Node to code fast, scalable apps in pure JavaScript.</p>

Related Content you might be interested in

Current Title:

Small book image
Isomorphic JavaScript Web Development
Tomas Alabes | Konstantin Tarkus
Oct, 2017 | 226 pages
Small book image
React Cookbook
Carlos Santana Roldaacuten
Aug, 2018 | 580 pages
Small book image
React Router Quick Start Guide
Sagar Ganatra
Sep, 2018 | 156 pages
Small book image
React 18 Design Patterns and Best Practices, 4e
Carlos Santana Roldaacuten
Jul, 2023 | 524 pages
Table of Contents (16 chapters)
Title Page
Title Page
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Getting Started with Isomorphic Web Apps
Getting Started with Isomorphic Web Apps
What are isomorphic apps?
How to write isomorphic JavaScript code?
Introduction to React.js
Sample app description
What we need to get started
Installing project dependencies
The basic project structure
Creating the first react component
Rendering a React app on both client and server
How to run and test our app locally
Summary
2
Creating a Web UI with React
Creating a Web UI with React
Component-based UI development
Stateful versus stateless React components
Grouping UI components in a project
Breaking the UI into a component hierarchy
Building a static version in React
Implementing a basic isomorphic router
Summary
3
Working with CSS and Media Assets
Working with CSS and Media Assets
Inline styles in React components
Getting started with CSS modules
Getting started with PostCSS
Getting started with Webpack loaders
Configuring Webpack for images and CSS
Sharing common settings across multiple CSS files
Summary
4
Working with Browsersync and Hot Module Replacement
Working with Browsersync and Hot Module Replacement
Getting started with Browsersync
Getting started with Hot Module Replacement
Summary
5
Rendering React Components on the Server
Rendering React Components on the Server
The core concepts of server-side rendering
Troubleshooting
Passing the component's state from server to client
Working with the React context
How to set the page title and meta tags
Working with third-party libraries
Fetching data from the server
Summary
6
Creating Data API with GraphQL
Creating Data API with GraphQL
The Basics of GraphQL
GraphQL query language
The GraphQL type system
Implementing a GraphQL server with Node.js
Backing GraphQL server by a SQL data store
Batching and caching
Summary
7
Implementing Routing and Navigation
Implementing Routing and Navigation
Pure server routing
Pure client routing
React server rendering
Summary
8
Authentication and Authorization
Authentication and Authorization
Token-based authentication and cookies
JSON Web Token (JWT)
Server authentication
Summary
9
Testing and Deploying Your App
Testing and Deploying Your App
Tests and deployment
Tests
Deployment
Summary

Chapter 2. Creating a Web UI with React

Now that we got our feet wet with the isomorphism of JavaScript and node, Webpack as our building tool, testing and we have the base for our project; we need to start creating the user interface (UI) for it!

In this chapter, you will learn how to split UI into components, how to style those components, avoid shared CSS in favor of sharing and reusing components, and how to render different screens (or pages) of our app given a certain URL or path.

The following is on overview of what will be covered in this chapter:

  • Component-based UI development
  • Stateful versus stateless React components
  • Grouping UI components in a project
  • Breaking the UI into a component hierarchy
  • Building a static version with React
  • Implementing a basic isomorphic router
Previous Section
End of Section 1
Next Section