ReactJS – Creating a React Application
Here’s a step-by-step guide to create a simple ReactJS application for an Insurance Application with a welcome message on the first page:
Steps to Create the Application
1. Setup React Application
- Open your terminal and run:
npx create-react-app insurance-app
This will create a folder named insurance-app with all the necessary setup.
- Navigate into the project folder:
cd insurance-app
- Start the development server:
npm start
The default React app should open in your browser at http://localhost:3000
Terminal commands and logs
PS D:\React_Project> npx create-react-app insurance-app
Creating a new React app in D:\React_Project\insurance-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1314 packages in 31s
259 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 46 packages, and changed 1 package in 4s
263 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1360 packages in 3s
263 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created insurance-app at D:\React_Project\insurance-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd insurance-app
npm start
Happy hacking!
PS D:\React_Project> dir
Directory: D:\React_Project
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 29-11-2024 19:28 AngularProject
d----- 30-11-2024 16:20 insurance-app
d----- 30-11-2024 13:49 my-app
d----- 30-11-2024 14:13 my-react-app
PS D:\React_Project> cd .\insurance-app\
PS D:\React_Project\insurance-app> dir
Directory: D:\React_Project\insurance-app
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 30-11-2024 16:20 node_modules
d----- 30-11-2024 16:20 public
d----- 30-11-2024 16:20 src
-a---- 30-11-2024 16:20 310 .gitignore
-a---- 30-11-2024 16:20 669357 package-lock.json
-a---- 30-11-2024 16:20 816 package.json
-a---- 30-11-2024 16:20 3359 README.md
PS D:\React_Project\insurance-app> npm start
> insurance-app@0.1.0 start
> react-scripts start
(node:6276) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:6276) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!
You can now view insurance-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.37:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Default Insurance application page of React
2. Modify the Application
a. Clean the Default Files
- Remove unnecessary files for a clean start:
- Delete everything inside the src folder except index.js .
- Create a new App.js file in the src folder.
b. Update App.js
Replace the contents of App.js with the following:
import React from 'react';
function App() {
return (
<div style={styles.container}>
<h1 style={styles.heading}>Welcome to Insurance Portal</h1>
<p style={styles.paragraph}>Your trusted partner for all insurance needs!</p>
</div>
);
}
const styles = {
container: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
backgroundColor: '#f0f8ff',
color: '#333',
fontFamily: 'Arial, sans-serif',
},
heading: {
fontSize: '3rem',
marginBottom: '1rem',
},
paragraph: {
fontSize: '1.2rem',
textAlign: 'center',
},
};
export default App;
c. Update index.js
Make sure index.js imports and renders the App component:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
3. Add Basic Styling
The App.js file above already includes inline styles for simplicity. You can replace or enhance it using external CSS if needed.
4. Run the Application
- Start the development server:
Change the Execution Policy for current user permanently, if you are getting below error during npm start
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Terminal commands and logs
PS D:\React_Project\insurance-app> npm start
npm : File D:\Program Files\nodejs\npm.ps1 cannot be loaded because running scripts is disabled on this system. For
more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ npm start
+ ~~~
+ CategoryInfo : SecurityError: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
PS D:\React_Project\insurance-app> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
PS D:\React_Project\insurance-app> npm start
> insurance-app@0.1.0 start
> react-scripts start
(node:32612) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:32612) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!
You can now view insurance-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.37:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
- You’ll see the following welcome message on the page:
Recent Comments