Customers who sign-up prior to 30/06/2024 get unlimited access to free features, newer features (with some restrictions), but for free for at least 1 year.Sign up now! https://webveta.alightservices.com/
Categories
HTML Javascript React

Basic introduction to using React in-browser

React is a SPA library built by Facebook and has very wide usage. Angular and Vue offer similar functionality. The three frameworks have their own advantages and disadvantages which is out of scope.

For quick prototyping and for other reasons, there might sometimes be a need for using React in-browser i.e include some Javascript files from CDN, write some Javascript and see these in usage.

In this blog post, I won’t go into great lengths or details, but more of a getting started blog post.

I am assuming you would like to use JSX syntax and would like babel to transpile in-browser.

Include the following 3 javascript files:

<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Note: Assuming you are developing quick prototype, I have provided the development version links for React 17.0.2. But there are minimized production versions. The development scripts are useful for easier debugging because of detailed error messages.

Now include another .js file of your choice and include the js file in your HTML page – assuming the .js file has a name of RootComponent.js

<script src="~/js/RootComponent.js" type="text/babel"></script>

Note the type is “text/babel” because we would be using JSX for our markup.

Add a div with a id of “root” in your HTML page which would become the container for our React application. I have added Please wait… because the browser would display Please wait… while React framework initializes.

<div id="root">Please wait...</div>

Now add the following code snippet to your RootComponent.js

const rootElement = document.getElementById('root');

function App() {
    return (
        <div>Hello World!</div>
    )
}

ReactDOM.render(
    <App />,
    rootElement
)

In the above few lines of code, we have used plain javascript for getting the div with an id of “root”.

We have defined a minimal functional component by the name of App.

We are using React library and calling a method called Render and asking React library to render the App component in the place of the root element i.e the div with the id of “root”.

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.