What are the prerequisites for this tutorial?
You must have basic knowledge of HTML and JavaScript.
Note: In this tutorial, I am also using some features of ES6.
What is ES6?
ES6 is a recent version of JavaScript which introduces some new features to JavaScript.
What is React?
React is a JavaScript library for building user interfaces.
Who is the creator of React?
React is created by Jordan Walke, a software engineer at Facebook.
Set up for the tutorial
Create an index.html file and then open it into a Text Editor and then open index.html file into the web browser.
Add these two scripts at the end of the body
tag.
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
html
Create a div
element with an id root in the body
tag.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
</body>
Open the index.html file in the web browser.
Syntax for creating React element:
React.createElement(type, [props], [...children]);
- type: It could be a tag name String or a React Component type or a React Fragment type.
- props: It could be a null or a Object. In Object, you can define the attributes of the tag name String or React Component type or React Fragment type.
- children: It could be a String or a React element or it could be an array of Strings or React elements.
Note: The third parameter of the
createElement
method can be optional.
The createElement
method create and return a new React element of the given type. The createElement
method takes 3 parameters. The first parameter takes type and the second parameter takes the props and the third parameter takes the children.
Syntax for rending React element into the DOM in the supplied container:
React.render(element, container[, callback]);
The render
method renders the React element into DOM in the supplied container. render
method takes 3 parameters. The first parameter takes the React element and the second parameter takes the reference of the container. The third parameter takes a callback function which will be executed after the React element is rendered into the DOM in the supplied container.
Note: The third parameter of the
render
method is optional.
You can see that the String This will be replaced by React is replaced by the h1
element.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", null, "Hello, World");
ReactDOM.render(element, rootElement);
</script>
</body>
The can declare multiple String in an array.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", null, ["Hello,", "World"]);
ReactDOM.render(element, rootElement);
</script>
</body>
You can declare multiple React elements in an array.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script>
const rootElement = document.getElementById("root");
const span1 = React.createElement("span", null, "span 2");
const span2 = React.createElement("span", null, "span 2");
const element = React.createElement("div", null, [span1, span2]);
ReactDOM.render(element, rootElement);
</script>
</body>
In the code given below, I have applied some in style to the React element.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement(
"h1",
{
style: {
border: "2px solid black"
}
},
["Hello,", "World"]
);
ReactDOM.render(element, rootElement);
</script>
</body>
There is one special prop called children who work the same way as the third parameter of the createElement
method.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", {
children: ["Hello,", "World"]
});
ReactDOM.render(element, rootElement);
</script>
</body>
Note: You can also write multiple Strings or React elements without using an array.
<body>
<div id="root">This will be replace by React</div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", null, "Hello,", "World");
ReactDOM.render(element, rootElement);
</script>
</body>
Top comments (3)
Nice work sir it will help us a lot
Good work
Some comments may only be visible to logged-in visitors. Sign in to view all comments.