Hello folks! welcome back to a new edition of our tutorial on ReactJS. In this section of ReactJS tutorial, we will study about how to Create Complex application via customized method.
Customize the code
Let's remove the default source code of the application and bootstrap the application to better understand the internals of the 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 -
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 component 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 the src folder and then call our recently 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 now run the application by invoking the start script configured in package.json file.
> npm start
It's going to start the application in the local system and it can be accessed by inputting http://localhost:3000 into the address bar of the browser and pressing enter.
> 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 then go to http://localhost:3000. The following below is the output of the application -
READ: ReactJS | Installation
Using Custom Solution
As we have learned earlier, create react app is the recommended tool for starting up the React application. It includes everything for the development of a React application. But sometimes, application doesn't need all the features given by Create React App and we want our application to be small and clean. We can use our own customized method to create a React application with just enough dependency to support our application.
To create a custom project, we need to have basic knowledge about four items -
To create a custom project, we need to have basic knowledge about four items -
- Package manager - It is a high level management of application. We are using the npm build command as our default package manager.
- Compiler - It compiles the JavaScript variants into standard JavaScript that is supported by the web browser. We are using babel as default compiler.
- Bundler - Used to bundle the multiple sources (JavaScript, HTML, and CSS) into a single deployable code. Create React App makes use of webpack as its bundler.
- Webserver - Start the development server and lunches our application. Create React App makes use of an internal webserver and we can use serve as our development server.
READ: ReactJS | Introduction
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about ReactJS JSX.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.