DEV Community

Cover image for Quote CRUD App build with React.js
Naim Latifi
Naim Latifi

Posted on • Edited on

1 1

Quote CRUD App build with React.js

We frontend developers are not limited to only one framework for building Single Page Applications (SPA). Recently I have been working mostly with Vue.js framework for building those applications but I wanted to extend my knowledge further and learn how React.js works under the hood. So, I created this simple Quote CRUD app with the purpose of applying React.js concepts and shared it with you. 😊

The purpose of this app is as a user to be able to create, read, edit and delete a quote. Technologies and React concepts I applied in this app:

  • Quickly get started with create-react-app CLI ✅
  • Created class components for showing and creating quotes. ✅
  • Instead of writing pure vanilla JS for creating HTML elements and appending to DOM I learned to use JSX and understood that everything in React is JavaScript. ✅
  • In order to navigate between pages, I installed a react-router. ✅
  • Local state in React class components and setState method for mutating the state values. ✅
  • As my app began to grow I noticed that it could be better to separate it in multiple function components and reuse those components. ✅
  • Controlled components for handling user form inputs and events. ✅
  • Props for passing data between components and conditional rendering to render part of the code/component. ✅
  • React-bootstrap is used for UI components. ✅
  • Sass as CSS pre-processor for component styling. ✅
  • React masonry CSS for masonry layout. ✅
  • Firebase real database for saving, fetching and updating the data. ✅
  • For this tiny app I would probably not need an extra library for managing the state of this application however I wanted to integrate Redux and hold the application state into a store, using reducers to specify how the application's state changes, using actions to send data from my application to the store by dispatching, etc. ✅

Link: Quote app

I hope you find it interesting!

Cheers 🍻
Stay healthy!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more