DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Laravel Views with React Components
Nilanth
Nilanth

Posted on • Updated on

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!