Using ReactJS in the Laravel project

Tram Ho

In recent times, Single Page App (SPA) is very popular among devs because it greatly enhances the user experience. So far, I rarely learn about js frameworks. But to catch the trend, I also did some research on ReactJS 😄 . And with the foundation, a Laravel learner and Laravel also support the use of ReactJS, after a little research, I can also use ReactJS to create a simple SPA in a Laravel project. Today I am writing this article to share it with everyone, if you want to learn, you can read it, but whoever sees me wrong, I hope you can give me suggestions for me to write.

A few requests

In order to do this demo, there are some system requirements and knowledge that you think you will need

  • Basic knowledge of Laravel, ReactJs
  • It has installed PHP, npm, Composer, Laravel, MySQL, PHP MyAdmin (can be equivalent managers or you can use the command if you master)

Demo description

In this demo, I will make a simple SPA including listing display, add, edit, delete posts

Begin

First we need to create a Laravel project:

Then, access the project’s source code, use the preset command to specify the framework js you want to use:

And then run:

Next, we need to configure the .env file. Everyone with basic knowledge about Laravel knows this already so I won’t say it again. Well one more thing, that is here I will use the arrow function when writing js code so need to create a .babelrc file in the source code of the project. The content of the file will be as follows:

If there is no "@babel/plugin-proposal-class-properties" paragraph that you use the arrow function, you will get an error when you run the watch. 😄 )

Model creation and migration

The basic setup is done, now we need to prepare the db so we can save the data. But introduced then I will only do additional functions delete posts. So here I will just need 1 posts table

Since no other tables are needed, I will delete all the files in the migrations , leaving only the files to migrate the posts table

My Model Post will look like this:

Done everything then migrate only:

Generate API

Here I will create a simple api, there is no authenticate 😄 If you want to take care of this project, you can see how to create authenticate api with your laravel in this article: API Authentication with passpost in Laravel 5.8

In api.php , I will create routes to handle basic actions:

Now create PostController :

Due to the quick demo, I will not validate the data in the backend 😄 forgive me. Here because we are creating the api, all results must be in json format

Create a wildcard route

In web.php file, I will write the following:

What this section means is that all the url strings that meet the above regex condition will run into the RenderSpaView file. Here I am in every case

Now create the RenderSpaView file:

Now in the view I will create the file spa-view.blade.php

Create components

App Component

Now open the resources/js/components will see an Example.js file, change this file to App.js And you go into the resources/js/app.js , change the require('./components/Example') to require('./components/App') . Now we will have to install the library: react-router-dom (which is a standard routing library in react)

ant-design (this library will help us to simplify the frontend code)

And this will be the code in my App.js file

Now run

And

Visit the link http://127.0.0.1:8000/ see the results 😄 , if you see the word hello that is already successful

Header component

Now we will need a simple Header, I’ll go here: https://ant.design/components/page-header/ and have a look. Create a Header.js file, I will add the article button to be able to go to the article creation page

Now go back to App.js and add any Header component, no more Hello

Add component

Now we need a view to add the post, so we’ll create Add.js

About creating components in the form, you can read here for more clarification: https://ant.design/components/form/ . In function handleSubmit , I need to check if there are any errors, if not then send an api request to add data. If you are familiar with frontend frameworks such as angular or vue, then it is no stranger to axios . If not, you can read through here: Introduction to axios . Here if more successful, I will return to the home page, also found an error, it will be logged in the console error.

And now go back to App.js to add this route

Try clicking the add article button and create a test article to see if it runs well 😄

List component

Add it, then there must be a display list, right? I will create List.js and delete posts function

In componentDidMount I will call api to retrieve data and save data to get into the state. As for deletePost function, I will call to delete api, if successful delete will have alert, failure will log out. And do not forget to add the route in App.js and let’s try the function is complete

Edit component

Come on, go to the last component. In fact, you can reuse Add.js and add an isUpdate property to the props to distinguish between add and edit. But let’s just separate. Create Edit.js file

Here in the render will be a bit different from Add there will be an initialValue , this property will get to the original default value. In componentDitMount I will call api to get data, and I use the match attribute in props to determine the post id. The handleSubmit part is almost similar to Add .

Conclude

So the demo has been completed, hope that it will help you a bit 😄 Because I do not have too much time to do this demo, so I have not taken care of it very much. You should do more details to learn more things offline

Reference: https://blog.pusher.com/react-laravel-application/

Share the news now

Source : Viblo