How do compiled code looks like in React.js?

What is a Lifecycle Method in React.js? »

Before you make further changes to the app, you may want to know how the compiled code looks like. At multiple places, you got to know that the syntax you follow to write ES and modern Javascript code is not directly understood by the browser. Babel takes in this code and converts into pure Javascript code so that your web browser can understand it. If you run the server at the current state of development and go to Debugger inside the Developer Tools in your browser. Then go to Sources > localhost:3000 and you should see the complete compiled code as follows:

webpackHotUpdate("main",{

/***/ "./src/index.js":
/*!**********************!*\
 !*** ./src/index.js ***!
 \**********************/

/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _DayNightDisplay__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./DayNightDisplay */ "./src/DayNightDisplay.js");

var _jsxFileName = "F:\\Projects\\React\\DayNight\\daynight\\src\\index.js";

class App extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {

 constructor(...args) {
    super(...args);
    this.state = {
     hrs: '',
     hasError: false
    };
 }

 componentDidMount() {
    const getHours = () => {
     const currentHours = new Date().getHours();
     return currentHours;
    };

    setTimeout(() => {
     const hours = getHours().toString();
     this.setState({
       hrs: hours
     });
    }, 3000);
 }

 componentDidUpdate() {
    console.log("Component got updated on the screen");
 }

 render() {
    if (this.state.hasError) {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
       __source: {
         fileName: _jsxFileName,
         lineNumber: 28
       },
       __self: this
     }, "An error has occurred!");
    }

    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_DayNightDisplay__WEBPACK_IMPORTED_MODULE_2__["default"], {

     hours: this.state.hrs,

     __source: {
       fileName: _jsxFileName,
       lineNumber: 30
     },

     __self: this
    });
 }
}

react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App, {

 __source: {
    fileName: _jsxFileName,
    lineNumber: 35
 },

 __self: undefined
}), document.querySelector('#root'));

/***/ })
})

//# sourceMappingURL=main.bbffede985b7024ed24e.hot-update.js.map

If you notice, you’d see that there’s a constructor function inside the App component, although you had already deleted it and initialized the states manually. This is because React automatically creates a constructor() function whether or not you define it on your own.

You’d further notice that React has imported a lot of Webpack modules and it’s dependencies. You may want to learn more about Webpack modules from here.

Leave a Comment