Hello folks! welcome back to a new edition of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will learn how to make use of content delivery network(CDN) to include React in a simple webpage.
Open a terminal and go to your workspace.
Open a terminal and go to your workspace.
cd /go/to/your/workspace
Next, create a folder, static_site and change directory to newly created folder.
mkdir static_site cd static_site
Next, create a new HTML file, hello.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Simple React app</title> </head> <body> </body> </html>
Next, include React library.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Simple React app</title> </head> <body> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> </body> </html>
READ: ReactJS | Architecture
Here,
- We are using unpkg CDN. unpkg is an open source, global content delivery network supporting npm packages.
- @17 represents the version of the React library.
- This is the development version of the React library with debugging option. In order to deploy the app in production environment, use the scripts below -
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
Now, we are ready to use React library in our webpage.
Next, introduce a div tag with id react-app.
Next, introduce a div tag with id react-app.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React based application</title> </head> <body> <div id="react-app"></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> </body> </html>
The react-app is placeholder container and React will work inside the container. We can use any name for the placeholder container relevant to our application.
Next, you have to create a script section at the end of the document and make use of React feature to create an element.
Next, you have to create a script section at the end of the document and make use of React feature to create an element.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React based application</title> </head> <body> <div id="react-app"></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script language="JavaScript"> element = React.createElement('h1', {}, 'Hello React!') ReactDOM.render(element, document.getElementById('react-app')); </script> </body> </html>
READ: ReactJS | Introduction
The application uses React.createElement and ReactDOM.render methods provided by React Library to dynamically create a HTML element and place it inside of the react-app section.
Next, serve the application using serve web server.
Next, serve the application using serve web server.
serve ./hello.html
Next, open the web browser and then enter http://localhost:5000 in the address bar and press enter. serve application will serve our webpage as shown below -
We can use the same steps to use React in an existing website as well. This method is very easy to use and consume React library. It can be used to create simple to moderate features in a website. It can be used in new as well as existing applications alongside with other libraries. This method is suitable for static website with few dynamic section like contact form, about us, simple payment option, etc. To create advanced single page application(SPA), then we need to make use of React tools.
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about how to create a React application via Create React App tool.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.