DEV Community

Cover image for Laravel Views with React Components
Nilanth
Nilanth

Posted on • Edited on

1 1

Laravel Views with React Components

To Add React with Laravel from scratch, there are many important details you need to consider:

  1. Configuring React
  2. Adding State management systems like Redux and configuring store, actions and sagas for API calls
  3. Configuring Routes for React Components
  4. Authentication
  5. Configuring ESlint for effective code

These configurations might require more time. To avoid these and focus only on developing the App functionalities, You have laravel-react-boilerplate.

Laravel React Boilerplate

Laravel React Boilerplate helps to fasten your development, Instead of spending more time on configuring React and SPA Authentication.

It is Pre-Configured with

  • Laravel 8
  • Laravel Sanctum for SPA Auth
  • React 17
  • Redux
  • React Router
  • Axios
  • Ant Design
  • Redux-Saga
  • Sass
  • ESLint
  • Preconfigured redux store, actions and saga.

Pre-Configured Modules

  • User Login
  • User SignUp
  • Auth Routes

How to start with it?

Laravel Development Environment setup

You can choose either one for your development

  1. Laravel Homestead
  2. Laravel Sail

Basic needs

  1. Composer 2.
  2. Node stable version.

Usage

  1. Install using composer
composer create-project nilanth/laravel-react-boilerplate
Enter fullscreen mode Exit fullscreen mode
  1. cd laravel-react-boilerplate
  2. Run yarn install
  3. Create a Database
  4. Update the Database credential to .env file
  5. Run php artisan migrate -> To create needed tables.
  6. Run php artisan db:seed -> To seed some fake users.
  7. Run yarn run dev
  8. Update API HOST_URL in resources/js/config/constant.js file

Login

Login

SignUp

SignUp

Home Screen

Home Screen

Use Laravel React Boilerplate to fasten your development 🚀

Need to learn more? Feel free to connect on Twitter :)

You can support me by buying me a coffee ☕

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay