Have you confused of learning react ,jsx,webpack,npm,babel?
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.
createElement method shows that it needs three arguments
type: It means the type of HTML element.
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.
<div> <h1>Hi React</h1> </div>
createElement Method in practice.
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.
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
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.
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.