You're reading from React and React Native Build cross-platform JavaScript applications with native power for the web, desktop, and mobile

Product type Paperback

Published in May 2022

Publisher Packt

ISBN-13 9781803231280

Length 606 pages

Edition 4th Edition

Languages

JavaScript

Tools

React

Concepts

Front End Web Development

Authors (3):

Roy Derks

Mikhail Sakhniuk

Adam Boduch

View More author details

Table of Contents (36) Chapters

Preface

1. Part 1 – React

2. Chapter 1: Why React? FREE CHAPTER

3. Chapter 2: Rendering with JSX

4. Chapter 3: Component Properties, State, and Context

5. Chapter 4: Getting Started with Hooks

6. Chapter 5: Event Handling, the React Way

7. Chapter 6: Crafting Reusable Components

8. Chapter 7: The React Component Life Cycle

9. Chapter 8: Validating Component Properties

10. Chapter 9: Handling Navigation with Routes

11. Chapter 10: Code Splitting Using Lazy Components and Suspense

12. Chapter 11: Server-Side React Components

13. Chapter 12: User Interface Framework Components

14. Chapter 13: High-Performance State Updates

15. Part 2 – React Native

16. Chapter 14: Why React Native?

17. Chapter 15: React Native under the Hood

18. Chapter 16: Kick-Starting React Native Projects

19. Chapter 17: Building Responsive Layouts with Flexbox

20. Chapter 18: Navigating Between Screens

21. Chapter 19: Rendering Item Lists

22. Chapter 20: Showing Progress

23. Chapter 21: Geolocation and Maps

24. Chapter 22: Collecting User Input

25. Chapter 23: Displaying Modal Screens

26. Chapter 24: Responding to User Gestures

27. Chapter 25: Using Animations

28. Chapter 26: Controlling Image Display

29. Chapter 27: Going Offline

30. Chapter 28: Selecting Native UI Components Using NativeBase

31. Part 3 – React Architecture

32. Chapter 29: Handling Application State

33. Chapter 30: Why GraphQL?

34. Chapter 31: Building a GraphQL React App

35. Other Books You May Enjoy

Packt is searching for authors like you

What is isomorphic JavaScript?

Another term for server-side rendering is isomorphic JavaScript. This is a fancy way of saying JavaScript code that can run in the browser and in Node.js without modification. In this section, you'll learn the basic concepts of isomorphic JavaScript before diving into the code.

The server is a render target

The beauty of React is that it's a small abstraction layer that sits on top of a rendering target. So far, the target has been the browser, but it can also be the server. The render target can be anything, just as long as the correct translation calls are implemented behind the scenes.

In the case of rendering on the server, components are rendered to strings. The server can't actually display rendered HTML; all it can do is send the rendered markup to the browser. This idea is shown in the following diagram:

Figure 11.1 – A conceptual model of server-side rendering

It's possible to render...