"Quote" CRUD App build with React.js

As a frontend developer, we 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 app with the purpose of applying React.js concepts.

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 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 input with forms 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 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 .
react logo