How to add React to an existing website or web project
Use as little or as much React as you need in your web project as mentioned in react official docs.
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:
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:
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:
- Step 1: Run
npm init -y(if it fails, here’s a fix) - 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/prodnpx 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:
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
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
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.
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.
