ReactJS - Customized Code

Customize the code

Let us remove the default source code of the application and bootstrap the application to better understand the internals of React application.

Delete all files under src and public folder.

Next, create a folder, components under src to include our React components. The idea is to create two files, <component>.js to write the component logic and <component.css> to include the component specific styles.

The final structure of the application will be as follows −

|-- package-lock.json
|-- package.json
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Let us create a new component, HelloWorld to confirm our setup is working fine. Create a file, HelloWorld.js under components folder and write a simple component to emit Hello World message.

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

Next, create our main file, index.js under src folder and call our newly created component.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);

Next, create a html file, index.html (under public folder*), which will be our entry point of the application.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager</title>
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

Run the application

Let us run the application by invoking the start script configured in package.json file.

> npm start

It will start the application in the local system and can be accessed through browser @ http://localhost:3000.

> expense-manager@0.1.0 start D:\path\to\expense-manager
> react-scripts start

i ｢wds｣: Project is running at http://192.168.56.1/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\path\to\expense-manager\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view expense-manager in the browser.

   Local:            http://localhost:3000
   On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Open your favorite browser and go to http://localhost:3000. The result of the application is as shown below −

Hello World

Using custom solution

As we learned earlier, Create react app is the recommended tool to kick-start the React application. It includes everything to develop React application. But sometimes, application does not need all the feature provided by Crzzeate React App and we want our application to be small and tidy. Then, we can use our own customized solution to create React application with just enough dependency to support our application.

To create a custom project, we need to have basic knowledge about four items.

  • Package manager − High level management of application. We are using npm as our default package manager.

  • Compiler − Compiles the JavaScript variants into standard JavaScript supported by browser. We are using Babel as our default compiler.

  • Bundler − Bundles the multiple sources (JavaScript, html and css) into a single deployable code. Create React App uses webpack as its bundler. Let us learn how to use Rollup and Parcel bundler in the upcoming section.

  • Webserver − Starts the development server and launch our application. Create React App uses an internal webserver and we can use serve as our development server.

reactjs_creating_application.htm
Advertisements