How to add React to your existing application?

This article will be explaining how you can add react to an existing application. Working as a Software Engineer at SimbaQuartz, I have used to React in an existing application having a different framework. Integrating React to an existing application is surprisingly simple. In many cases, it is actually simpler than starting from scratch like seriously!!

Basic Steps

While you’d be forgiven for thinking that React can only be used along with npm, Webpack, and an assortment of other tooling, the truth is that React doesn’t need any of this. React works great by itself.

You can actually import React into any page on your application with two simple <script /> tags. Just as you’d import jQuery.

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

Designing Components

In a typical React app, your entire page’s content will be rendered by a single top-level component. For example, apps generated by create-react-app will have a top-level <App /> component. But when using React within an existing application, you’ll probably only want to React to handle specific parts of each page.

In fact, both can be implemented using exactly the same function: ReactDOM.render()

Starting React

The ReactDOM.render() function is how you start React. More specifically, it lets you add a React Component to an existing DOM node.

In a typical React app with a top-level <App /> element, the application will be started by rendering <App /> to an HTML element that is styled to take up the entire viewport.

This example is taken from create-react-app. See the original source on GitHub.

ReactDOM.render(<App />,document.getElementById(‘root’));

Of course, React doesn’t limit you to rendering a single component that takes up the entire screen. It lets you render as many components as you like, to whichever nodes you like.

For example, you could render a <SignUpForm pitch=’Join the party!’ />element to the #sidebar div, and a <Chart data={data} /> element to #chart1:

Make sure that you don’t run this script until the elements with ids sidebar and chart1 exist! If it helps, you can call ReactDOM.render() from a window.onload handler.

ReactDOM.render(<SignUpForm title=’Join the party!’ />,document.getElementById(‘sidebar’));const data = [[1, 0.1], [2, 0.5], [3, 0.3]];ReactDOM.render(<Chart data={data} />,document.getElementById(‘chart1’));

Did you notice how the data prop in the above example is just defined as a normal variable? Keep in mind that React code is Just JavaScript, and ReactDOM.render() is just a JavaScript function.

Once you’ve rendered a React Element to a DOM node, React will be in charge of managing that node’s children. If the component’s state changes due to an event, a network call, a Redux action, or any other reason, React will automatically update the DOM.

But what if you want to make some changes to the rendered element from the outside?

React without JSX

Your browser doesn’t understand JSX. It only understands vanilla JavaScript. And if you’re not using Babel or Webpack to compile your existing JavaScript code, you won’t be able to use JSX. you don’t need to use JSX.

The thing about JSX is it is just a shorthand way of writing React.createElement(). If your application doesn’t use Babel, you can still manually write out React.createElement().

For example, here is the above code example, but with JSX elements converted into React.createElement() calls:

ReactDOM.render(
React.createElement(SignUpForm, { title: ‘Join the party!’ }),
document.getElementById(‘sidebar’)
);const data = [[1, 0.1], [2, 0.5], [3, 0.3]]
ReactDOM.render(
React.createElement(Chart, { data: data }),
document.getElementById(‘chart1’)
);

React with JSX

You can use a bundler like a webpack or Browserify, so you can write modular code and bundle it together into small packages to optimize load time.

The smallest React example looks like this:

import React from ‘react’;
import ReactDOM from ‘react-dom’;

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘root’)
);

This code renders into a DOM element with the id of root, so you need <div id=”root”></div> somewhere in your HTML file.

Similarly, you can render a React component inside a DOM element somewhere inside your existing app is written with any other JavaScript UI library.

SimbaQuartz  
Empowering Businesses With Technology

Mandeep Kaur Sidhu

Chief Executive Officer

Mandeep Kaur Sidhu is the founder and CEO of SimbaQuartz - an IT Consulting & Web Development Service Platform located in Tangra, a rural location in Punjab. Mandeep is an active contributor to the development of society with several initiatives taken to enhance employment in rural India with her other ventures namely SimbaCart, MTrophies, & SimbaCourse.  For her high social spirit and greatly rewarding entrepreneurship, she has appeared as a speaker, twice at TEDx, corporates, the United States, IITs/IIMs and many other elite institutes, delivered topics on Entrepreneurship, Digital Marketing & Philanthropy.She has successfully organized 500+ social campaigns under the mission of 50000 Shoe To Give, Food Sharing, etc. Her venture has been awarded as “The Upcoming Start-up of The Year 2016” by ASSOCHAM India and received an Alumni Award for Social Entrepreneurship in 2019.

Leadership

Mandeep Singh Sidhu

Acting CTO & IT
Advisor

Lorem ipsum dolor sit amet, consectetur adipiscing elit Dcibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Mandeep Kaur Sidhu

Chief Executive Officer

Mandeep Kaur Sidhu is the founder and CEO of SimbaQuartz - an IT Consulting & Web Development Service Platform located in Tangra, a rural location in Punjab. Mandeep is an active contributor to the development of society with several initiatives taken to enhance employment in rural India with her other ventures namely SimbaCart, MTrophies, & SimbaCourse.  For her high social spirit and greatly rewarding entrepreneurship, she has appeared as a speaker, twice at TEDx, corporates, the United States, IITs/IIMs and many other elite institutes, delivered topics on Entrepreneurship, Digital Marketing & Philanthropy.She has successfully organized 500+ social campaigns under the mission of 50000 Shoe To Give, Food Sharing, etc. Her venture has been awarded as “The Upcoming Start-up of The Year 2016” by ASSOCHAM India and received an Alumni Award for Social Entrepreneurship in 2019.

Key Personnel

Dilsher Singh

Sr. Manager Creatives

Pramod Sai Naik
     Megavath

Asst. Project Manager

Jobanjit Singh

Sr. Software Engineer

Vishal Pandey

AGM- Operations & General Management

Manjot Singh

Sr. Software Engineer

From blog

Contact

Web Design
Ecommerce
Development
Others
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.