Building a Blog With Reactjs And Laravel Website start

Building a Blog With Reactjs And Laravel Part11: Website Start

In this article i will prepare the website front in reactjs and i will used a ready made html template to be used to display pages.





Preparing the template

Let’s prepare the html template we will use to display the components so i picked a ready made html template and removed the unnecessary css and js files and uploaded it here. After you download it extract it into public/assets/website/ directory, create this directory if it does not exist.


Preparing React Components

The next step is to prepare the react components so create those two directories in resources/js/website/components:

  • pages
  • partials

The pages/ directory contain the website pages. The partials/ directory contains partial components such as header and footer.

Create these components in pages/ directory:

  • Home.js
  • Category.js
  • Tag.js
  • Post.js
  • Login.js
  • Register.js

Also create these components in partials/ directory:

  • Header.js
  • Footer.js
  • Sidebar.js
  • Article.js
  • Comments.js
  • CommentForm.js

Then i setup the components with dummy data let’s update the above mentioned components as shown below:













After we created the components we will need to setup routes to navigate through page so create resources/js/website/Routes.js and add this code:

The above code contain the website routes as we did in the admin panel i added the routes in a separate component, let’s update App.js to setup react router.


Now run

Navigate to the website and refresh it should display the the template we just added.


Continue to part12: Display Categories and Posts


Share this: