Creating Frontend with React.js

 Installing React Development Environment

Now let's build independent frontend for the wordpress website using React.js - JavaScript library for creating user unterfaces. 

To install React development we use popular npm (Node Package Manager) package  - create-react-app. 

I created folder "frontend" for the react application in root folder of the wordpress website. Then use command npx create-react-app . in that folder to scaffold starting react project.

Please don't forget to install Node.js which is required for React & NPM packages!!

After successful installation we can compile and run the react app in the browser using npm start command in the terminal.

Result in the browser, url address http://localhost:3000

Let's install additional NPM packages axios and react-router-dom. First is a promise based HTTP client for the browser and node.js, and second is a tool to handle routes in a single page application using dynamic routing.

List of all installed packages and all important information about project are in the package.json file located in the frontend directory. Screen below shows fragment of that file with added new packages. All dependencies are installed in node_modules folder.

File structure of the React client application

React's application are usually single page applications (SPA) which means there is no reloading and extra requests for other pages. Everything is compiled to JavaScript files and injected into one html element on the root page. Dynamic part of the page is re-rendered and only changed data is displayed without need of full reload of the page.

It is possible to mimic different routes and create "extra" pages by using react-router-dom plugin. It simply navigate between different react components, changing the browser's URL, changing history and keeping state of the user interface in sync.

Index.js file imports App component and renders it using React.RenderDom() method into the index.html file.

App.js imports all required components (files) and is responsible for the whole structure of the application. Route component creates URL browser's paths for different components. 

All files are grouped in separate folders for better organisation and easier code maintenance in the future. Separate page renders are stored in the screens folder and smaller components used as elements of the layout are located in the components directory.