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. ✅
I hope you find it interesting!
Cheers 🍻
Stay healthy!
Top comments (0)