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 .