- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS - Reference API
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
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 −
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.
To Continue Learning Please Login
Login with Google