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”.
–
Mr. Kanti Kalyan Arumilli
B.Tech, M.B.A
Founder & CEO, Lead Full-Stack .Net developer
ALight Technology And Services Limited
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.
