expressjsHow can I use Express.js and React together to create a web application?

The Express.js and React frameworks can be used together to create a web application. Express.js is a back-end framework that can be used to create a server and route requests, while React is a front-end library for creating user interfaces.

For example, the following code can be used to create a server with Express and render a React component:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const component = React.createElement('h1', null, 'Hello World!');
  const html = ReactDOMServer.renderToString(component);
  res.send(html);
});

app.listen(3000);

This code will create a server on port 3000 and render an h1 element with the text "Hello World!" when a request is made to the root route.

Code explanation

const express = require('express'): This line imports the Express.js framework.
const React = require('react'): This line imports the React library.
const ReactDOMServer = require('react-dom/server'): This line imports the ReactDOMServer library for server-side rendering of React components.
const app = express(): This line creates an Express application.
app.get('/', (req, res) => { ... }): This line creates a route handler for the root route.
const component = React.createElement('h1', null, 'Hello World!'): This line creates a React component with an h1 element and the text "Hello World!".
const html = ReactDOMServer.renderToString(component): This line renders the React component to a string.
res.send(html): This line sends the rendered HTML to the client.
app.listen(3000): This line starts the Express server on port 3000.

For more information on using Express and React together, see the following resources:

Edit this code on GitHub

More of Expressjs

See more codes...