Skip to content

README.md

Latest commit

 

History

History
38 lines (32 loc) · 2.65 KB

README.md

File metadata and controls

38 lines (32 loc) · 2.65 KB

React Tutorial

From : 🔥ReactJS + Spring Boot Full-Stack Course [2025]

image image

  1. To create new project

    1. Open desired folder on VS > Open Terminal > Add npm create vite@latest ems-react-frontend
    2. ⚠️ To Initialize On Another Machine npm install
    3. app is created run npm run dev
    4. To add port add in vite.config.js
    server:{
port: 3000
   }
    1. Dependency are in package.json
    2. Start Point index.html > main.jsx > App.jsx
    3. Add BootStrap to React npm install bootstrap --save
    4. Add import 'bootstrap/dist/css/bootstrap.min.css' in main.jsx
    5. Add className="btn btn-info" in WelcomeJs.jsx : (Ref - https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp)

  2. Add list to react

    1. add plugin to VS as - ES7+ React/Redux/React-Native snippets
    2. Create new Component ListEmployeeComponentDummy.jsx and type rcfe to auto generate code OR rafce to auto generate arrow function
    3. add this component App.jsx

  3. Install axios Library - For HTTP call - npm install axios --save

  4. Create service EmployeeService.jsx

  5. GET CALL : Http call ListEmployeeComponentRest.jsx

  6. Add @CrossOrigin("*") to EmployeeController.java to avoid has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  7. Added Header.jsx and Footer.jsx

  8. Add React-Router-DOM npm install react-router-dom --save

  9. POST CALL : AddEmployeeComponent.jsx

  10. Add Validation ref : AddEmployeeComponent.jsx