How to add React to an existing website or web project

Photo by Ferenc Almasi on Unsplash

In this tutorial we also the react official way to add bare minimum react to our project. As an example, I'm going to add a simple Medium Blog Post Display Component on my website https://rajdeep-das.github.io. So it will be a real-world example and production website it will give you minimum knowledge about how to add React to an existing website.

The majority of websites aren’t, and don’t need to be single-page apps. With a few lines of code and no build tooling, try to React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic components.

Add React in Exiting Website

In this section, we will add a React component to an existing HTML page of my website. You can follow along with your own website, or create an empty HTML file to practice. There will be no complicated tools or install requirements to complete this section, you only need an internet connection.

Step 1: Add a DOM Container to the HTML

First, open the HTML page you want to edit. Add an empty <div> tag to mark the spot where you want to display something with React. For example:

Example Container

We gave this <div> a unique id HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.

You can place a “container” <div> like this anywhere inside the <body> tag. You may have as many independent DOM containers on one page as you need. They are usually empty — React will replace any existing content inside DOM containers.

Step 2: Add the Script Tags

Next, add three <script> tags to the HTML page right before the closing </body> tag:

React CDN

The first two tags load React. The third one will load your component code.

The React CDN Links or you can google it for the latest version if newly released when you reading the post.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>
</script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Step 3: Create a React Component

Create a file called medium_post_component.js next to your HTML page.

This code defines a React component called MediumPost. Don’t worry if you don’t understand it yet — You can check out the building blocks of React later in the hands-on tutorial and main concepts guide. For now, let’s just get it showing on the screen!

If you don’t want to build your own component but try out this tutorial you can use below code example in your project. React has two flavors with JSX and without JSX. The example below is without JSX, it can directly run on the browser.

const domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(e(MediumPost), domContainer);

These two lines of code find the <div> we added to our HTML in the first step, and then display our “Like” button React component inside of it.

That’s It!

There is no step four. You have just added the first React component to your website.

If you don’t want to use JSX you can Stop here. If you are interested you can follow along, in the real-world project almost every developer use JSX.

But I’m going to use JSX because UI code looks pretty well in JSX and easy to read and maintain.

Add JSX to a Project

Adding JSX to a project doesn’t require complicated tools like a bundler or a development server. Essentially, adding JSX is a lot like adding a CSS preprocessor. The only requirement is to have Node.js installed on your computer.

Go to your project folder in the terminal, and paste these two commands:

  1. Step 1: Run npm init -y (if it fails, here’s a fix)
  2. Step 2: Run npm install babel-cli@6 babel-preset-react-app@3

We’re using npm here only to install the JSX preprocessor; you won’t need it for anything else. Both React and the application code can stay as <script> tags with no changes.

Congratulations! You and I just added a production-ready JSX setup to your project.

Run JSX Preprocessor

Create a folder called src and medium_post_component.js put your JSX Component run this terminal command:

npx babel --watch src --out-dir . --presets react-app/prod

npx is not a typo — it’s a package runner tool that comes with npm 5.2+.

If you see an error message saying “You have mistakenly installed the babel package”, you might have missed the previous step. Perform it in the same folder, and then try again.

Don’t wait for it to finish — this command starts an automated watcher for JSX.

If you now create a file called src/medium_post_component.js with this JSX medium code, the watcher will create a preprocessed medium_post_component.js with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.

As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from its documentation.

The JSX Preprocessor also show error example:

JSX Preprocessor babel

AJAX and APIs Call-in React For Our Component

You can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX.

Where in the component lifecycle should I make an AJAX call?

You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState it to update your component when the data is retrieved.

Example: Using AJAX results to set local state

The component below demonstrates how to make an AJAX call in componentDidMount to populate the local component state.

The below code for MediumPost Component for my site https://rajdeep-das.github.io

https://rajdeep-das.github.io

Let’s look at how our component look and perform

React Medium Post Component

Above marked Red, Portion is the MediumPost Component that renders on my website. You can reuse this component for your site from the above code example published in my GitHub gits. https://gist.github.com/Rajdeep-Das/0a35bbb311991aecf7c5d1d731b1d311

Complete Output
The Complete Existing Website with new React Component Marked in red

Exploring The React-Component using React-Dev tools

React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more.

React-Dev Tools

Download the new dev tools from the Chrome Web Store, Firefox Add-ons for Firefox, and Microsoft Edge Addons for Edge. If you’re developing using React, I highly recommend installing these devtools.

Finishing Touch For Production Use

Minify JavaScript for Production

Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users.

If you already minify the application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in production.min.js:

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

Finally, Our Component is Ready For Production :).Int the next article we will build an email subscription component in react. If you have any questions or feedback feel free to contact me I would love to hear from you.Thank you.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep Das

Rajdeep Das

Passion about Computer Science,Software Engineering. I help brands and Startups with software development.