# Introduction to React

# What is React

React is a Library. What is Library, Library is a part of the framework which gives some additional features to build upon.

So under the framework, we can download and use React library along with many more libraries.

React is a JS library for building User Interfaces. It is developed in the year 2013 by Jordan Walke from Facebook.

# Why use React

It is a component-based approach. Can build reusable code, and DOM updates can be handled gracefully. It uses a declarative approach for building components.

# What is Babel

Babel is a library used as JS compiler. Shortly it's a Transpilar, it converts the JSX to the old version of JS which every browser can understand i.e. ES6.

What is JSX, It is a combination of HTML and JS

ex: const name = <h1>About React</h1>

Tip Point: Whenever we create a new react project only HTML file that is available under the folder is index.html, all the other files are JSX files only.

# React Fragment

If we want to enclose multiple html lines of code in the jsx page, we can write as below using div, section, and header etc..,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676894135484/b7684f28-c530-4cd6-9a61-cab19b4c4e9f.png align="center")

But under the latest version of React18, the fragment element is introduced, using this we can rewrite the above code as

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676894204733/8bcba775-23ff-4a46-840a-bfbb0ae5b1fd.png align="center")

# About Index.html

As said above to convert the JSX to pure old JS we need to have a reference for Babel cdn in the index.html

Also when the index.html is loaded in the browser babel will automatically Transpile and execute all the scripts with the tag <script type="text/babel"/>

To work with the DOM elements we have to use react and react dom cdn links

```css
<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>
```

The index.html contains the main root element.

```html
 <div class="root">Not Rendering</div>
```

To render the above element we have to use ReactDOM.Render()

The ReactDOM.Render requires two parameters what to render and where to render.

What to render: Here in the below example I want to render "Hello React" when the user opens the page

```html
const element = <>Hello React</>
```

Where to render: The above message is rendered at the root element, in the above screenshot the default value "Not Rendering" will be replaced by the message "Hello React".

```html
const rootElement = document.querySelector(".root")
```

How to render :

```html
 ReactDOM.render(element,rootElement);
```

ReatDOM.render is the method used to render the content in the UI.

# How to render multiple elements

To include one JSX element inside another JSX element we should use curly braces {}

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676915419363/7520251d-3703-4230-9400-b0763c834f22.png align="center")

Output:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676916221258/521ed32e-b1a7-488d-a59f-f48ba34ea68d.png align="center")

How to insert style in the React component :

If we want to inject any object inside the JSX component we have to use double curly braces

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676916691770/278403c8-9ca9-43ad-b085-acf6c4036648.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676916711555/af5868a0-fad6-40f9-81cc-010c5e7f2f3d.png align="center")

Tip : We cannot use the JS/CSS reserved keywords in the JSX pages.

for ex: the CSS reserved keyword "class" cannot be used in the JSX elements we have to use the className instead.

Please refer to this git link for the above code :

[saiarchana/IntroductionToReact (](https://github.com/saiarchana/IntroductionToReact)[github.com](http://github.com)[)](https://github.com/saiarchana/IntroductionToReact)

That's it for now, let's meet in another blog to learn more about React.