Building a Car Information Gallery with ReactJS
January 05, 2018
I used ReactJS to build an gallery of cards displaying information about different cars. They display the make and model, a brief description, the engine size and horsepower, and a picture. All the car info is stored in a JSON file.
At its initial state, the app displays four cards for four different cars. If you click on the "Load More" button, it will display four more cards. There is also a brief form where users can add new cars to the gallery.
The main topics and techniques that I learned or practiced through this project are:
- How to use the
create-react-app. This app simplifies your ReactJS development process by providing all the scaffolding necessary to start coding right away. It even gives you the option to fire up a development server that refreshes automatically every time you make and save a change.
- Practice ES6 concepts like classes, arrow functions and modules.
- How to work with props (properties) and
- How to work with components and the import and export syntax in order to link different ReactJS files to make them work together.
- Understand the difference between the development and the production environments.
Note: For this project I followed this ReactJS tutorial as a guide. It has a more detailed explanation of each step if you want to take a look or try it out yourself.