React In Code Pen

Now we will see what is the flow of React. So to see the flow of React, I am going to use the site CodePen. We have seen that React is a single-page application. So the code we are going to write is HTML
And JavaScript tab of code pen

Before that, let me go to the JavaScript setting and link the two packages.

• React
• React-dome

And I create a div in the tab and give it id app.

<div id="app"></div>

I create a method using the react package that we had taken. The method is called createElement() and this method has 3 arguments.

1.Which html tag you want to create
2. Props We call attributes in html
3. Content is the content of the element that is being created

let a = React.createElement('div',null,'Namasakr Mandlai');

So this created an html element of our react.But if you want to show it, you have to show it using the ReactDom package.So one of its methods is called render () so what it does is which element you are going to show It takes the 1st arrgument and the second arrgument where you are going to show it.

ReactDOM.render(a,document.querySelector('#app');

so above is an output of our first react app.

Now suppose I want to change the color of Namaskar Mandali, what I have to send is a props called style to the element, so you can send it like this.

let a = React.createElement('div',{style:{color:'red'}},'Namasakr Mandali')

Now suppose I want to send multiple elements to a div, I will send it like this

function App(){
                return React.createReactElement('div',null,[
React.createElement('button',null,'click here'),React.createElement('h2',null,'hello')
                ])
}