The first thing we will do is that we will import the React JS library into our index.html file
React itself its kind of logic part which we need for creating this react components
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/r[email protected]/umd/react-dom.production.min.js"></script>
development
production
<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> ); }
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".
id="card"
function Person() { return ( <div className="card"> <h1> TITLE </h1> <hr /> <p>Description Goes Here</p> </div> ); } ReactDOM.render(<Person />, document.querySelector("#card"));
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.
function Person()
Person()
JSX
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.
ReactDOM.render
document.querySelector('#card')
id
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"));
See the Pen First React Code – React Course | Geeks Trick by rehmaanali (@geekstrick) on CodePen.