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:

resources/js/website/components/pages/Home.js

resources/js/website/components/pages/Category.js

resources/js/website/components/pages/Tag.js



resources/js/website/components/pages/Post.js

resources/js/website/components/pages/Login.js

resources/js/website/components/pages/Register.js



resources/js/website/components/partials/Header.js

resources/js/website/components/partials/Footer.js

resources/js/website/components/partials/Sidebar.js



resources/js/website/components/partials/Article.js

resources/js/website/components/partials/Comments.js

resources/js/website/components/partials/CommentForm.js



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.

resources/js/website/App.js

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: