Getting Started with ReactJs

Harshit Bansal's photo
·

3 min read

Getting Started with ReactJs

React is the most popular javascript library to build large scale frontend applications.

Prerequisites -

  • HTML

  • CSS

  • Javascript

Importing React using CDN

CDNs are Content Delivery Networks, these are the sites where the react library has been hosted and we pull the react from there to use it in our projects. (Below there are development CDN links, there are different links for production purposes. )

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

What is crossorigin in the above code?

The crossorigin attribute, valid on the audio, image, link, script, and video elements, provides support for CORS ,defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data.

Just by importing CDN links in the body of the HTML document, react can be used in that project. These CDN links contains javascript code with is written by Meta developers.

Note : The App.js script file should be imported after the CDN links for react to work.
(Order of files matters)

Why are there two CDN links for React?

The first file contains the core React framework and it the main file and its algorithms and the second file contains React DOM which is useful for DOM operations.

(React DOM file has a separate link because React can be used in browsers, mobile apps and much more so React DOM is for browsers which can be used with core React files to make frontend apps.)

Writing Code in React

Code for React is written in javascript.

Create Element using React

Elements in react can be created using a function provided by React which is createElement. It expects three arguments, (tag name, attributes, content).

const heading = React.createElement("h1", {id:"heading" xyz:"abc"}, "Hello World from React!");

It creates a javascript object (shown below), which can be assigned to any javascript variable.

Nested elements can be created by passing the createElement function with respective arguments of child in the content argument of the parent element.

How can the elements be rendered in the DOM?

There should be a root element in the HTML document in which the Element has to be rendered

<div id="root"></div>

Then this element can be set as the root for the React by using a function provided by ReactDOM which is createRoot by passing the root object after fetching it in a javascript variable (shown below).

const root = ReactDOM.createRoot(document.getElementById("root"))

Then finally the React element can be rendered inside this root

root.render(heading);

This render() function replaces any content in the root element of HTML code by the content which is rendered using this function.

This way of coding is complex and it makes making HTML structure even more difficult. That’s why we use something known as JSX for programming in React which we’ll study in upcoming sessions.

ReactDOMCDN