Our First React Code
The first thing we will do is that we will import the React JS library into our index.html file
react.js
React itself its kind of logic part which we need for creating this react components
react DOM
React DOM is then about rendering this components to the real DOM
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
development and production. you can find it here React CDN Links Babel : JavaScript Preprocessor
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
we will have to import another package i.e. Babel.js. Babel is a JavaScript compiler which allows us the special syntex which looks like html but which its i`snt.
for example:
function Person(){
return (
<div class="card">
<h1> TITLE </h1>
<hr>
<p>Description Goes Here</p>
</div>
);
}
First React Code
Lets create a basic HTML structure containing the React CDN links in file index.html
<html lang="en">
<head>
<!-- @import Babel JSX library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<!-- @import React library -->
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<!-- @import React DOM library -->
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="card"></card>
<script src="./app.js"></script>
</body>
</html>
As you can see we have imported an app.js file in which we will write our React code which will render the content to the HTML element containing id id="card".
function Person() {
return (
<div className="card">
<h1> TITLE </h1>
<hr />
<p>Description Goes Here</p>
</div>
);
}
ReactDOM.render(<Person />, document.querySelector("#card"));
Dive Deep Into React Code
In app.js you can see we have create a function function Person() the function name is start with the capital letter, it is required to use it correctly with React.
This Person() is a normal javascript function which will return the code which you actually rendered to the DOM and therefore React uses the JSX to render the HTML part in the javascript code.
its might looks weird that the Person() is returning the html code. Here where JSX library is used to compile the HTML code and convert into normal javascript code.
ReactDOM.render takes the two arguments:
1) render function: we can render the function by turning into HTML element as the function name.
2) where to render: the second argument is normal Javascript i.e. document.querySelector('#card') which will render to that perticular element containing that id.
Whats actually code is converted to?
Our app.js is convertd to normal Javascript function which actually looks like below example:
function Person() {
return (
React.createElement("div", { className: "card" },
React.createElement("h1", null, " TITLE "),
React.createElement("hr", null),
React.createElement("p", null, "Description Goes Here")));
}
ReactDOM.render(React.createElement(Person, null), document.querySelector("#card"));