April 2020
Intermediate to advanced
716 pages
18h 55m
English
Content preview from Full-Stack React Projects - Second Edition
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial
Frontend views with React
In order to start developing a frontend, first create a root template file called template.js in the project folder, which will render the HTML with React components:
mern-simplesetup/template.js:
export default () => { return `<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MERN Kickstart</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="/dist/bundle.js"> </script> </body> </html>` }
When the server receives a request to the root URL, this HTML template will be rendered in the browser, and the div element with ID "root" will contain our React component.
Next, create a client folder where we will add two React files, main.js, and HelloWorld.js.
The main.js ...