Originally posted on nathanheffley.com
After getting React set up in your Laravel project (check out how to get started with React in Laravel 5.5 if you haven't used the new preset before), you may be wondering how to actually use it on your site.
In this series, we'll create a simple forum which uses React components for the main features of the site. Starting out, we'll focus on the main features (creating threads, commenting, etc). Later on we'll explore more advanced features such as voting, popular/hot algorithms, messaging, and following other users.
Let's look at the core components that we'll be creating over the next couple of lessons.
List of Threads
This will be the first thing that users will see when visiting the site. There's no point in going to a forum if you can't see a list of all the threads, right? We'll start out by creating a component that will take data about threads and display them in a chronological order (once we implement voting we can change this to show high-quality threads towards the top). Pagination will also be included in this component, and how to use Laravel's built-in pagination feature to create a React-powered element.
Thread
In order to allow a user to edit or delete their thread, we'll create a component that displays a thread to everyone but only shows the controls to the author. To keep a nice flow on the front-end, we'll also make use of Ajax calls to the back-end which will validate everything of course.
Comments
The comments will be similar to the thread list component, in that we'll paginate and display a list of all the comments for a particular thread. We'll also give the author some controls like on a main thread component.
GitHub
Throughout this series, I'll have a GitHub repo open tracking all the changes. I'll make sure to reference the most recent commit at the start and end of each lesson, so that you can catch up if you fall behind or just skip ahead to the next lesson if you don't want to write the code yourself.
I've already set it up with a basic Laravel project with the React preset already configured (again, check out my previous post to learn more about that). Go on over to my react-forum repository to check that out. Along the way I would love to see issues and pull requests for things I mess up or just for new features/lessons that you would like to see covered in this series!
Next week we'll get started with quickly setting up the authentication system and then allowing users to post new threads, which will give us the opportunity to start creating the Thread List component.
Top comments (0)