Lockdown diaries - React + Symfony + Api Platform: the perfect combination

The days are long during the lockdown, so I decided to learn ReactJs from scratch or almost.

“Almost” because Javascript, even if it’s not the language which I best know, I still often used it. I’ve also got some knowledge about VueJs.
After 15 days of quarantine, an application came out. You can view and clone it here.

I would like to share with you the various steps that led me to have a functional application written in ReactJs, with an API base on Symfony and Api Platform. I would also like to show how the new Api Platform features such as Vulcain and Mercure can be integrated naturally with ReactJs.

I tried to be constant about the time spent on learning and practicing : 3 hours per day for 14 days.

Day 1 — Reading documentation and practice

The first day I’ve read the very accurate documentation of ReactJs from the official website.

In particular, I’ve focused on the main concepts : Jsx, Components, Props, State, Conditions, Lists and Forms . I’ve played with CodePen, trying to redo the various examples of the documentation.

Day 2 — Reading documentation and practice

On the second day I’ve continued reading the documentation. I switched to advanced guides and I learned what Fragments are. I worked on understanding the Context, static validation, PropTypes and Hooks. Still practicing with CodePen during all the process.

Day 3 — Installing and configuring environnement (Symfony, Api Platform, Yarn, React)

On the third day I was impatient to start something more than CodePen examples. So I started setting up an environment to develop my first ReactJs application.

I’ve downloaded the latest Api Platform distribution. You must have Docker, if you do not already have it on your computer, you can install it here.
Built on top of Symfony, API Platform enables you to build a rich, JSON-LD-powered, hypermedia API.

We’re going to build a books store. The application allows us to consult a books list. You can filter on title or author and you can add a book into shopping cart. It is roughly the same type of application made in my first post of these series.

Continue reading on Medium

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s