React on the Server for Beginners: Build a Universal React and Node App

Build a Universal React and Node App with React for client and server rendering

I recently wrote a new article in collaboration with one of my favourite web development websites: the amazing Scotch.io.

The article talk about using React both on client and on the server (with Node.js) in an attempt to build a simple “Universal JavaScript” (a.k.a “Isomorphic”) application.

The application is called “Judo Heroes” (did you even noticed recently that I’m kind of fond of Judo?) and it showcases some of the best Judo athletes for their number of medals won during the Olympic Games and in other important international tournaments.

If you are curious you can check out the live demo or have a look at the source code on GitHub.

Then, if you want to follow the tutorial, you should definitely read the article on scotch:

React on the Server for Beginners: Build a Universal React and Node App

In this article we are going to learn how to build a simple “Universal JavaScript” application (a.k.a. “Isomorphic”) using React, React Router and Express. We will also use some Webpack and Babel to leverage the latest ES2015 Syntax.

Enjoy it and feel free to leave your comments here or on the original article.

Cheers!

Sharing is caring!

If you got value from this article, please consider sharing it with your friends and colleagues.

Found a typo or something that can be improved?

In the spirit of Open Source, you can contribute to this article by submitting a PR on GitHub.

You might also like

Cover picture for a blog post titled Fastify and Preact for quick web app prototyping

Fastify and Preact for quick web app prototyping

This article shows how to quickly build web app prototypes using Fastify for the backend API and Preact for the frontend UI. It also covers how to dockerize the app for easy sharing. Key points are the plugin architecture of Fastify, the lightweight nature of Preact, and the use of htm for defining UI without transpilation.

2019-02-18

Cover picture for a blog post titled Emerging JavaScript pattern: multiple return values

Emerging JavaScript pattern: multiple return values

This article explores how to simulate multiple return values in JavaScript using arrays and objects. It covers use cases like React Hooks and async/await error handling. The pattern enables elegant APIs but has performance implications.

2018-11-11

Cover picture for a blog post titled My Universal JavaScript Web Applications talk at Codemotion Rome 2017

My Universal JavaScript Web Applications talk at Codemotion Rome 2017

The author gave a talk on building universal JavaScript web apps at Codemotion Rome 2017. He updated his Judo Heroes demo to v2 with React 15.4, React Router 4, Webpack 2, and Express 5. The talk got positive feedback from the audience. Slides and video are linked.

2017-04-11

Cover picture for a blog post titled My Universal JavaScript Web Applications talk at Codemotion Milan 2016

My Universal JavaScript Web Applications talk at Codemotion Milan 2016

This blog post summarizes a talk about building a Universal JavaScript application with React given at Codemotion Milan 2016. It includes commentary for each slide, photos from Twitter, and a video recording. The post explains what Universal JavaScript is, its benefits, challenges, and walks through demo code to add server-side rendering and routing to a React app.

2016-11-26

Cover picture for a blog post titled How to crack a JWT token: two articles about distributed computing, ZeroMQ & Node.js

How to crack a JWT token: two articles about distributed computing, ZeroMQ & Node.js

This blog post explains how to build a distributed application using Node.js and ZeroMQ that cracks JWT tokens. It provides a step-by-step guide on implementing the application and links to two in-depth articles on RisingStack that cover the theory and coding details.

2016-10-24

Cover picture for a blog post titled Two Interviews about Node.js, JavaScript and being a book author

Two Interviews about Node.js, JavaScript and being a book author

Luciano Mammino recently participated in two interviews discussing his work with Node.js and JavaScript as well as his experience as an author writing books about Node.js design patterns.

2016-09-25