DEV Community

Cover image for My First Laravel 6 and React App
Mạnh Đạt
Mạnh Đạt

Posted on

My First Laravel 6 and React App

I have been developing for WordPress for a while and I have been working with jQuery mostly.

Recently, I prepare for going to interview. As PHP dev, knowing Laravel and a JS framework is expected nowadays I guess. So I decided to create an app with Laravel and React to practice.

After a week, here it is:

https://youtu.be/6s5-EOaV6tI

You can play with it at https://piggyspastel.com

The app basically let you search through a list of images and generate a one-page PDF file so you can print and fill with color.

I sometimes play this with my daughter and we had a lot of fun.

Thinks I learnt

  1. You don't get value at element but from a central object at the root component
    You need to plan your code quite a bit. For example, in jQuery, if you want to grab any input value, simply select that element and use val(). In react, my feeling is you need to store the value somewhere in the app (in the root component in the case of my app) and work on that value

  2. Event handling quite strange
    In jQuery, if you want to add a listener to an event, simply bind the event handle to that element directly. However, in React, many times you need to pass the event handler to child components through props. This may cause some headache if the components are a few levels deep

I think I need a lot more practices to really understand the way React works and get familiar with it.

If you have any pointers that help me learn it faster, please share.

Thanks a lot!

Latest comments (2)

Collapse
 
mike_hasarms profile image
Mike Healy • Edited

The app didn't work for me.
I had these errors in the console:

Chrome console errors

Also it seems like your Laravel app has debug mode true, which can be a security risk in production. I could click through to that 500 API error and see the detailed error page.

You can set debug=false in your .env file to fix that.

Collapse
 
datmt profile image
Mạnh Đạt

Thanks! I'm fixing it now