Getting started with ReactJS is simple. Without getting into complicated toolchain, we can use ReactJS directly in our projects using the CDN URLs inside the HTML page script tags. This approach is fine for learning and creating simple demos.
The two URLs that we would require are:
https://unpkg.com/react@16/umd/react.production.min.js
- It contains the core functionality of React and helps us describe the UI of our application. However, it has no idea how to render the UI.https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
- react-dom
defines the target platform for our application. The UI created using React can be rendered on a different platform and, in this case, react-dom
render the UI on the browser.We can create a basic HTML page and drop these URLs inside script tags as follows.
<html> <head> <title>Introduction to React</title> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> </head> <body> <!-- container to render React --> <div id="root"></div> <script> // REST OF CODE GOES HERE </script> </body> </html>
Once, we have above setup ready we would require two more things
A simple React element could be a single HTML element with some content inside it. To create a React element we have to use the React.createElement()
method.
const reactElement = React.createElement('h1', null, 'Hello World')
React.createElement()
method takes following arguments
Next, we need a DOM node to render element. In the basic structure defined above we have already created a DOM node with id
of root
. We will be using this node to render the React element created in previous step. We call this a “root” DOM node because everything inside it will be managed by React DOM.
To render an element in root
container we need to use ReactDOM.render()
method.
const reactElement = React.createElement('h1', null, 'Hello World') ReactDOM.render(reactElement, document.getElementById('root'))
We can put above code inside the script
tags defined just before the closing body tag.
<html> <head> <title>Introduction to React</title> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> </head> <body> <!-- container to render React --> <div id="root"></div> <script> const reactElement = React.createElement('h1', null, 'Hello World') ReactDOM.render(reactElement, document.getElementById('root')) </script> </body> </html>
If you save above code inside a HTML file and load in browser you should see text Hello World that is rendered by React.
This basic tutorial shows us how to get started with React. We learned how to use CDN URLs and integrate React in a simple HTML file. We covered the basic building blocks of React known as elements.
In future tutorials, we will deep dive into other concepts of React like components, JSX, dynamic data to, name a few. So, stay tuned!