Create React CRUD with PHP Laravel framework

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library responsible only for the view layer of the application. React have lots of features that power the web app. One of it's major feature is virtual DOM . React applications loads faster than any normal web app because of it 's faster virtual DOM loading. I am React Frontend Developer based in India. Working as a PHP developer since 2009. I will guide you to create React CRUD with most popular PHP Laravel Framework. Let's start one by one .

1) for our basic CRUD system, we need below database tables

Below shown it's screenshot

2) Now we need Laravel model for this table.

Create Sample.php inside 'app' folder and put below

3) Creating the app API

We'll start by defining the API endpoints. Open routes/api.php and replace it content with the code below: We are using laravel Restfull API it allow to perform CRUD system on the url

4) Now we need to create laravel controller 'SampleController.php' inside

app\Http\Controllers and put below code

Here, we created functions for fetching all items as well for fetching a single item. Then for creating new item .

5) using React Router

We'll be using React Router to handle routing in our application. Install it using below command

6) Creating a wildcard route

Wwe need to render a single view file for all our application routes. Open routes/web.php and replace it content with the code below:

We define a wildcard route. An app.blade.php view file will be rendered for all our app routes. This way, we can render our React components from within this view file, and we’ll be able use all the goodies that React has to offer.

7) Let's create the app.blade.php view file.

We’ll create this file directly within the resources/views directory, then paste the following code in it:

We add references to both a CSS file and a JavaScript file (containing React and other dependencies bundled up). We have an empty div with an id of app. This is where our React components will be rendered. Also, you’ll notice we have a meta tag containing a CSRF token, which will be attached as a common header to all outgoing HTTP requests we make using Axios. This is defined in resources/assets/js/bootstrap.js.

8) Creating the App component

The App component will serve as the base for our React components. Let's rename the default Example component to App and replace it content with the following code:

- We render a Header component (which we’ll create shortly). The Header component will be rendered for all our app pages

9) open and update resources/js/app.js as below:

Instead of referencing the Example component, we reference the App component we just created.

10) Creating the Header component

Let's create the Header component referenced above. Create a new Header.js file within the resources/js/components folder and paste the code below in it:

11) Above we are using bootstrap css framework classes, we need to install bootstrap react package to use this execute below coomand

12) For making http request we will use 'axios' package

- Axios (https://github.com/axios/axios) Axios is easy to work with react and handing requests. Lets install it first

Import it in the js file before using

13) Displaying all items

To display a list of items , we’ll create a SampleList.js component. Within resources/js/components, create a new SampleList.js file and paste the code below in it:

Above we also done delete task . We define a items state and initialize it to be an empty array. Using React's componentDidMount lifecycle, we make an HTTP request using Axios to our app API endpoint to fetch all the items . Then we update the items state with the response data got from our API. Finally, we display a list of the items by iterating over the items state. Note: before we checking to browser we have to combine new javascripts that we added using below command npm run development then visit on your browser

14) Now create SampleCreate.js component inside resources/js/components

15) Create SampleEdit.js component inside folder 'resources\js\components'

Note : here on form's field attribute mentioned 'defaultValue' rather just 'value' otherwise it shows below error " You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`." Finally, if everything is ok, you can run below command to make it for production use

If you want to upload to your domain subb folder, check this official tutorials for this Building for Relative Paths Demo of our React CRUD with laravel

Conclusion

So, we have created basic React CRUD system with PHP Laravel Framework. I will be writing more tutorials on React topic. We also provide React advance training online or classroom in Tilak Nagar, West Delhi, Delhi/NCR/NCR. Or visit here if you looking to hire React Developer, Laravel PHP Developer in India.