03 – Writing our First React Code

on August 19, 2019
🔥 1338 views

  • React – The Complete Guide (incl. React Router 4 & Redux)

    • Contents hide
    1) Our First React Code
    1.1) react.js
    1.2) react DOM
    2) Babel : JavaScript Preprocessor
    3) First React Code
    3.1) Dive Deep Into React Code
    3.2) Whats actually code is converted to?

    Code And Demo

    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

    index.html
    
  <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>
    Note: There are two different CDN available for different enviroment i.e. development and production. you can find it here React CDN Links

    Babel : JavaScript Preprocessor

    JSX Library
    
<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:

    app.js
    
  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

    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".

    app.js
    
  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.

    AND

    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:

    app.js
    
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"));
    Code And Demo