Intro to the React

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

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

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.

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

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?

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?

there is render method available to us

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.

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

Comments

[Divyesh Parmar]

nah man! the last snippet only showed me, the following error suggesting that variable p has already been used.

VM94:1 Uncaught SyntaxError: Identifier 'p' has already been declared
    at <anonymous>:1:1
(anonymous) @ VM94:1

[Sai gowtham]

Recheck your code