Using React with Node.js

• June 17, 2022
• By Richard Whitney
• Comments
• Last edited: <%= last; %>

React, developed by Facebook in 2013, is ideal for Single Page Applications (SPA's) among other things.

Let's create our first React App:

                            
npx create-react-app myapp

cd myapp
                            
                        

Now, I needed to change the port from the default (3000), and run with HTTPS, so I created a .env file at the root of the app and added

                            
PORT=3008
HTTPS=true
                            
                        

and ran npm start

Since I am running NGINX as a proxy, and I have a certificate installed there, I can go to https://reactapp.domain.com

Here is my first code in React (after editing index.js in the src/ dir):

                            
import React from 'react';
import ReactDom from 'react-dom';
import './index.css';

function Hi(){
    let date = new Date();
    return <h1>Hello {getAge('October 1, 1962') + 1} in {date.getFullYear()}!</h1>
}

function getAge(birth){
    let today = new Date(),
    birthDate = new Date(birth),
    age = today.getFullYear() - birthDate.getFullYear(),
    m = today.getMonth() - birthDate.getMonth();
    if(m < 0 || (m === 0 && today.getDate < birthDate.getDate())){
        age--;
    }
    return  age;
}

ReactDom.render(<Hi/>, document.querySelector('#root'));
                        
                    

Ok, so I have been through the process of setting up a website using React.

To make things simple, I have the css files in src/css and any background images in src/css/images and fonts in src/fonts - this way, in your css files, you can point to any background images or fonts by saying

                            
background-image: url(images/...); or
@font-face {
    font-family: font-name;
    src:url(../fonts/...);
}