DEV Community

loading...
Cover image for Laravel Views with React Components

Laravel Views with React Components

Nilanth
Full Stack Developer | ReactJS | Redux | Laravel | AWS | Follow on Twitter for daily updates | Let’s make the web. Faster 🚀
Updated on ・2 min read

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 :)

Discussion (0)