Building a Blog With Reactjs And Laravel Part3

Building a Blog With Reactjs And Laravel Part3: Begin Reactjs

In this part of this tutorial we will begin installing reactjs dependencies through npm. Then we will setup reactjs in our laravel app and start creating our UI.

 

 

 

 

The first step when using reactjs in your laravel app is to tell laravel to switch the Javascript environment to use react, because laravel by default comes with Vuejs already you can find that in resources/js. So let’s run this command in the terminal:

This command will convert all vuejs components to reactjs components, and also it update package.json to include react and react-dom instead of vuejs.

 

The second step is to install npm dependencies with:

Great, now after installing react we need to create the main view home page which will display our react app. We will need two views as we will have two react apps one for the admin panel and the other for the website so open routes/web.php and update it with this code:

The above routes uses laravel conditional routing using where() method and passing regular expression. The first route represent the website home and return a simple view. Here the path parameter will match anything except admin keyword. The second route represent the admin panel so the path parameter will match anything after /admin.

 

Website & Admin Views

Create a new blade view resources/views/website.blade.php

Create another view resources/views/admin.blade.php

The website and admin view will contain the react app. First i included the bootstrap stylesheet, at the bottom i included js/website.js andjs/admin.js. This is the compiled script after you run npm run dev or npm run watch as we will see shortly. Finally i added a simple div with #id=app which will render the reactjs app.

 

Let’s run

Go to http://localhost/react-laravel-blog/public or http://localhost/react-laravel-blog/public/admin

you will see a blank page for now because we have to do some modifications to the react app located in resources/js.

 

Main React Components

We will need two apps, the first for the website and the second for the admin. So we will create two sets of components for both apps.

Go to resources/js and create the below file structure:

reactjs laravel blog file structure

 

 

 

 

 

 

 

Insert this code into resources/js/admin.js

Also insert this code into resources/js/website.js

resources/js/admin/App.js

resources/js/website/App.js

As you see above this is the file structure for the two react apps. Each app has a main component which in this case admin/App.js and website/App.js. we just add a dummy content for now and we will update it later.

Updating webpack.mix

There is one final thing so that the javascript compiled successfully is to update webpack.mix.js located in the root of your project like shown below

webpack.mix.js

Now run npm run watch and refresh the page you will see the hello message.

 

 

Preparing Admin Panel Layout

For the purpose of this tutorial i use AdminLTE the free admin panel template. I downloaded the template and removed the unneeded styles and scripts, you can download it from here. Then extract it into a folder called assets/ in the public/ directory, if you don’t find assets/ directory just create it.

Update resources/views/admin.blade.php as follows:

I updated the view with styles and scripts needed for our template. Let’s refactor this template into partials. To do this this must be done in react code.

 

Updating React Main Component

Create a new directory called partials/ inside resources/js/admin/components which will contain partial components:

  • Header.js
  • Sidebar.js
  • Footer.js

resources/js/admin/components/partials/Header.js

resources/js/admin/components/partials/Sidebar.js

resources/js/admin/components/partials/Footer.js

I used function based components here for now in these partial components. Now we need to update App.js and inject these components.

Open resources/js/admin/App.js and update as follows:

In terminal initiate

and refresh the page you will see the green admin panel.

 

Continue to part4: React Admin Panel

 

Share this: