frontend-with-reactjs
-
Install Nodejs https://nodejs.org/en/download NOTE: With nodejs installation npm (package manager) will also get installed
-
Check version after the installation
node.exe --version v18.17.0
npm --version 9.6.7
-
Install the React Developer tools extension in Google Chrome https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
-
Install extensions in vscode
ES7 React/Redux/GraphQL/React-Native snippets -> Simple extensions for React Auto Rename Tag - Auto rename paired HTML/XML tag Live Server - Launch a development local Server with live reload feature for static & dynamic pages Prettier Code formatter - Code formatter using prettier -
In the vscode, click on settings icon and then click on Settings. A new window will open, in the search box type - "Emmet" and scroll down and go to Emmet: Include Languages And then add javascript in the key and javascriptreact in the value as shown below in the image.
-
Follow the document from Reactjs to setup your project https://create-react-app.dev/docs/getting-started
-
Create project directory structure with npx
NOTE: npx will be installed when you install nodejs from Step 1. -
Start the npm server
npm startOpen the browser and open this url - http://localhost:3000 -
Now we have to play with App.js and App.css file
-
Let's add the bootstrap CSS and JS CDN url in the index.html file Get the URL of CDN from https://getbootstrap.jp/docs/5.3/getting-started/introduction/
-
Now let's delete the content from index.css file
-
Now copy the html code from bootstrap for Navbar and replace the class with className and also close the tags if not closed
-
To add the Date time calendar option install below packages
npm install dayjs npm install dayjs npm install @mui/material @emotion/react @emotion/styled``` -
Copy the Javascript code of Date time picker from Material UI - https://mui.com/x/react-date-pickers/date-time-picker/ and add the code in App.js file
