Using React with PHP Laravel framework

By default, Laravel applications contain an ExampleComponent.vue Vue component located in the resources/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js file: So, If you have not installed Laravel then first install it.

1. We need to change the default Vue.js scaffolding to React.js with the following command:

The preset command was added in Laravel 5.5, which allows us to specify our JavaScript framework of choice. To specify we want to use React in place of Vue.js, we’ll run the command below: For Laravel 7+ projects:

For Laravel 5.5+ projects:

Now you can see that Laravel create a react component in the file Example.js located in the resources/js/components directory:

2. Run below command to install all the javascript packages necessary for our project.

When we install a dependency with npm install, a node_modules directory is automatically generated where the installed packages are saved. Also it is generate a package-lock.json file who is responsible for keeping track of the changes made within node_modules or when changes are made to the file package.json

3. To show a view through React JS

we need to compile JavaScript files using Laravel Mix with the "npm run dev" command:

4. And now we start the app with the command:

Open the browser in the path "https://localhost:8000" and you can see the default view by Laravel Now, You can proceed our next tutorials Create React CRUD with PHP Laravel framework for your better understanding on using React with Laravel . We are providing React Js course , React Native and PHP Laravel course from basic to advance level.

Compiling Assets With Laravel Mix

Laravel Mix is a npm package included with all Laravel applications. It is not, however, limited to Laravel; you may use it in any application that requires a straightforward build process. It defines assistance for major frameworks, including React. The mix.react() helper handles adding Babel to enable JSX syntax automatically. The frontend build process for Laravel is set in webpack.mix.js. It provides some scaffolding code by default, which gives you a concept of how it might be used:

Use the npm run dev command to start the build process. This will compile everything given in webpack.mix.js using laravel-mix. There's also a place to provide the build's output directory. You may also execute php artisan serve to establish a simple development server.