Skip to content

Latest commit

 

History

History
280 lines (217 loc) · 7.7 KB

README.md

File metadata and controls

280 lines (217 loc) · 7.7 KB
Raw

🛠️ React Application

📄 Overview

This React application serves as the frontend for a full-stack project that interacts with a Spring Boot backend. It features a responsive design with Bootstrap and uses React Router for navigation. The application includes user and account management functionalities.

🏛️ Project Architecture

🧩 Components

  • App.js: The root component that defines the application’s routing and layout.
  • components/: Contains individual components for various functionalities:

    • User Management: UserList, UserDetail, UserForm

    • Account Management: AccountList, AccountForm, AccountDetail

    • Home Page: Home

    • Navbar: AppNavbar

🛤️ Routing

React Router is used for navigation within the app. Routes are defined in App.js to handle different paths and components.

🎨 Styling

The application uses Bootstrap for styling. Ensure to include bootstrap.min.css for styling components.

🔧 Proxy Configuration

To handle API requests to the backend server, the setupProxy.js file is used. This file configures a proxy that forwards requests from the frontend to the backend server. Here's a summary of how it works:

  • Proxy Setup:
    • Location: setupProxy.js in the src folder.
    • Functionality: Redirects requests from /api to the backend server.
    • Configuration: 
      const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://67.207.86.85:8080',  // Backend server URL
      changeOrigin: true,
      pathRewrite: { '^/api': '' },  // Remove /api prefix before forwarding
    })
  );
};
    • Usage: Requests to /api will be proxied to http://67.207.86.85:8080, allowing your React app to communicate with the backend without CORS issues.

📡 Using Axios

Axios is used for making HTTP requests from the React application. Here's how to use it:

🚀 Setup

  1. Install Axios:

    npm install axios

  2. Create an API Utility:

    • Create a file named api.js in the src folder for centralized API configuration: 
      import axios from 'axios';

const api = axios.create({
  baseURL: '/api',  // Base URL for API requests
});

export default api;

📬 Making Requests

  • GET Request: 
    import api from '../api';

useEffect(() => {
  api.get('/users')
    .then(response => {
      // Handle response data
    })
    .catch(error => {
      console.error('Error fetching users:', error);
    });
}, []);
  • POST Request: 
    import api from '../api';

const handleSubmit = (e) => {
e.preventDefault();
const newUser = { firstName, lastName, email, password };

api.post('/users', newUser)
.then(response => {
  console.log('User created', response.data);
  // Handle success
})
.catch(error => {
  console.error('Error creating user:', error);
});

}; ```

  • DELETE Request: 
    import api from '../api';

const handleDelete = (id) => {
if (window.confirm('Are you sure you want to delete this user?')) {
  api.delete(`/users/${id}`)
    .then(() => {
      // Handle success
    })
    .catch(error => {
      console.error('Error deleting user:', error);
    });
}
};

Here's the styled README in Markdown format that you can copy and paste:

markdown Copy code

🛠️ React Application

📄 Overview

This React application serves as the frontend for a full-stack project that interacts with a Spring Boot backend. It features a responsive design with Bootstrap and uses React Router for navigation. The application includes user and account management functionalities.

🏛️ Project Architecture

🧩 Components

  • App.js: The root component that defines the application’s routing and layout.
  • components/: Contains individual components for various functionalities:
    • User Management: UserList, UserDetail, UserForm
    • Account Management: AccountList, AccountForm, AccountDetail
    • Home Page: Home
    • Navbar: AppNavbar

🛤️ Routing

React Router is used for navigation within the app. Routes are defined in App.js to handle different paths and components.

🎨 Styling

The application uses Bootstrap for styling. Ensure to include bootstrap.min.css for styling components.

🔧 Proxy Configuration

To handle API requests to the backend server, the setupProxy.js file is used. This file configures a proxy that forwards requests from the frontend to the backend server. Here's a summary of how it works:

  • Proxy Setup:
    • Location: setupProxy.js in the src folder.
    • Functionality: Redirects requests from /api to the backend server.
    • Configuration: 
      const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://67.207.86.85:8080',  // Backend server URL
      changeOrigin: true,
      pathRewrite: { '^/api': '' },  // Remove /api prefix before forwarding
    })
  );
};
    • Usage: Requests to /api will be proxied to http://67.207.86.85:8080, allowing your React app to communicate with the backend without CORS issues.

📡 Using Axios

Axios is used for making HTTP requests from the React application. Here's how to use it:

🚀 Setup

  1. Install Axios:

    npm install axios

  2. Create an API Utility:

    • Create a file named api.js in the src folder for centralized API configuration: 
      import axios from 'axios';

const api = axios.create({
  baseURL: '/api',  // Base URL for API requests
});

export default api;

📬 Making Requests

  • GET Request: 
    import api from '../api';

useEffect(() => {
  api.get('/users')
    .then(response => {
      // Handle response data
    })
    .catch(error => {
      console.error('Error fetching users:', error);
    });
}, []);

POST Request: javascript Copy code import api from '../api';

const handleSubmit = (e) => { e.preventDefault(); const newUser = { firstName, lastName, email, password };

api.post('/users', newUser) .then(response => { console.log('User created', response.data); // Handle success }) .catch(error => { console.error('Error creating user:', error); }); };


DELETE Request:
javascript
Copy code
import api from '../api';

const handleDelete = (id) => {
if (window.confirm('Are you sure you want to delete this user?')) {
  api.delete(`/users/${id}`)
    .then(() => {
      // Handle success
    })
    .catch(error => {
      console.error('Error deleting user:', error);
    });
}
};

▶️ Running the Application**

  1. Clone the repository:

    git clone https://github.com/yourusername/ReactApp.git
cd ReactApp

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm start

  4. Navigate to http://67.207.86.85:3000 to view the application.

Additional Resources