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.
react-domdefines the target platform for our application. The UI created using React can be rendered on a different platform and, in this case,
react-domrender the UI on the browser.
We can create a basic HTML page and drop these URLs inside script tags as follows.
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 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
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
We can put above code inside the
script tags defined just before the closing body tag.
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!