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>
Table of Contents (16 chapters)
Title Page
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Troubleshooting


There is a common issue during development when the markup generated on the server differs from what React should render on the client. As an example, consider the following React component:

import React from 'react'; 
 
functionCurrentTime() { 
return<p>Current time (timestamp in ms): {Date.now()}</p>; 
} 
 
export default CurrentTime; 

If you put this component on your React web page and reload the page in a browser, you should see a warning in the browser's console similar to this one:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) 1.0.1.0.1">1450010451418</span></p>&lt...