Intro to the React 
Tags: webdev, javascript, beginners, react
Published: 2018-04-28 13:22:28

---
title: Intro to the React 
published: true
description: I don't know react
tags: webdev,javascript,beginners,react
cover_image: https://cdn.pixabay.com/photo/2014/04/02/17/03/freedom-307791_960_720.png
---

Have you confused of learning react ,jsx,webpack,npm,babel?

If you know HTML, CSS and JavaScript then you are good to start why Because I’m showing reactjs in a low level using pure javascript no jsx or no need to install any packages.


First, let's grab libraries from react [cdn links](https://reactjs.org/docs/cdn-links.html) 

Now let's create an index.html file with below code.

{% gist https://gist.github.com/saigowthamr/c2d7bac5b192fef37982ea5699a5c266 %}


Now,  open the HTML file in your browser and open console.
type 'Re'.You can see React and ReactDOM are now global variables available to us.

![react](https://thepracticaldev.s3.amazonaws.com/i/gp1niicgmu7mmnngfckh.png)

Now let's see what does the React and ReactDOM offer for us.


![](https://thepracticaldev.s3.amazonaws.com/i/eigwr00zodo50z0xb4xl.png)
There are different types of methods available but we are using the createElement method. Have you seen there is createElement method is available in the React Object?

![](https://thepracticaldev.s3.amazonaws.com/i/7rbbw2j5ni9bl00bey7v.png)

**createElement** method shows that it needs three arguments

**type:** It means the type of HTML element.
  example: h1,h2,p,div..etc.

**props:** Any properties required for this element/not.

**children:** You can write plain text or child elements like what elements I need to place inside the div.
example:
```
<div>
<h1>Hi React</h1>
</div>
```

createElement Method in practice.

create a JavaScript file with the name of script2.js.

```
let p=React.createElement('p',null,'hello react');

```

What above code does is just created a **'p'** element with text hello react.

Now we are done with the creation of our p element without using HTML.

### Have you seen in your browser is there anything displayed?

I think there is nothing showed in your browser why because we are not connected to the browsers dom.

Now here comes the usage of our **ReactDOM**.Once again we need to check the

### What type of methods does ReactDOM offer to us?

![react-dom](https://thepracticaldev.s3.amazonaws.com/i/l9q7df1uf8dtjmto9lez.png)

there is render method available to us
![reactdom render](https://thepracticaldev.s3.amazonaws.com/i/lyuv8tasf4sb3ynflh4s.png)

It takes the first argument as **element** and second argument we need to tell the ReactDOM on which dom node it needs to connect the element.

Now, let's use the render method in practice.

```
 ReactDOM.render(p,document.querySelector('.connect'))
```

Now you have seen something in the browser.
![reactdom](https://thepracticaldev.s3.amazonaws.com/i/j8eti2bhsaub1hd10lfq.png)

## What is the Reusable thing in React?

Now let's reuse the same **p** element.

```
var p=React.createElement('p',null,'hello react');

var content = React.createElement('div',null,p,p,p,p,p,p);

ReactDOM.render(content,document.querySelector('.connect'))
```
Have you seen in your browser now **'hello react'** is displayed 6 times.

Now there are  6 **p** elements present inside the div element.


*Hope you guys love these.*

[Code Repository](https://github.com/saigowthamr/I-don-t-know-react)