React is a brilliant framework from Facebook for frontend development. However the initial setup itself requires a lot of steps like creating a node project and setting up webpack or similar etc while the requirement is to simply create a simple widget to be embedded as part of a bigger HTML page.
In such a scenario, we wish if we could take advantage of React by creating a small component and simply show it in a small corner of the webpage without setting up the entire development and build system. Thankfully React and Babel makes it super easy to do that too. Let us checkout how we can do that.
The first step would be to add our React and React-Dom libraries. Add the following two javascript files in the head section of our webpage.
<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>
Since we would like to develop React components by writing jsx instead of javascript while a browser understands javascript only and not jsx, we need to add something that can convert our jsx to javascript when the page loads in the browser. It is here that babel comes to our rescue. Let us add that too in head section.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
The next step is to add our actual jsx and that would be through the script tag. Now the jsx could be kept inside script tag itself or in a separate file and be loaded by specifying the src but there definitely must be a way to mark so that our babel is able to identify that it is it’s duty to work upon the script and we make this mark by setting the type attribute to text/babel.
<script src="main.jsx" type="text/babel" crossorigin></script>
Well our main.jsx is nothing fancy here. It has two different React component and loads them at two different div on the webpage.
// main.jsx
// app1
class App1Component extends React.Component {
render() {
return (
<div>
Hello {"John" + " " + "Snow"}
</div>
)
}
}
const app1Element = document.getElementById('app1');
ReactDOM.render(<App1Component />, app1Element);
// app2
// Reusing the App1Component as well
class App2Component extends React.Component {
render() {
return (
<div>
<button style={{ backgroundColor: "aliceblue", padding: "5px" }}>Hello</button>
<App1Component />
</div>
)
}
}
const app2Element = document.getElementById('app2');
ReactDOM.render(<App2Component />, app2Element);
Our webpage HTML could look something like as shown in the snippet below.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>React on HTML page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css"> <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> <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script> </head> <body> <h3>This is react on a HTML page demo!</h3> <div class="react-comps" id="app1"></div> <div class="react-comps" id="app2"></div> <script src="main.jsx" type="text/babel" crossorigin></script> </body> </html>
For production, we can use the minified version of React and React-dom
<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>
The above method is no doubt simpler to use but it is not advisable to use in case of complex UI development. Not only is it tougher to code and manage but also it would be slower to load in the browser as Babel has to transpile the jsx script while loading.
0 Comments