I have developed a CRUD application using React.js and MockAPI, that provides APIs for testing purposes. Here's the breakdown of the steps I followed:
Step 1: I started by installing React.js using the command "npm install create-react-app" and then proceeded to remove the default data from the App.js file, which is provided by default.
Step 2: I created a "components" folder where I organized my code. Inside this folder, I created three sub-folders named Data.js, Input.js, and Update.js.
Step 3: For styling purposes, I also generated CSS files within the "components" folder. I used CSS within JSX to design my components.
Step 4: I installed the Axios library using npm. I used Axios to make API calls.
Step 5: In the "Input" file, I developed an input form to manage data using the useState hook. I used the Axios library to send a POST request to the MockAPI server upon submitting the form. Later, in the "Update" file, I retrieved data from the browser's local storage using the useState hook and displayed it in input fields. I used a PUT request to update data. In the "Data" file, I fetched and displayed the saved data from the server using the useEffect hook to avoid frequent API calls. Finally, I implemented the option to delete data using a DELETE request.