React Project: HashTags for Posts with Auth — Part #1

This blog post is about will give you complete knowledge about how to start with React Query, Redux toolkit, I18n, custom themes

Quick links for our Part Series:

PART #1 - Introduction and Installation of ReactJS (This Post)
PART #2 - ReactJS split the UI by components Components
PART #3 - React Query for remote data fetching instead of Redux thunk
PART #4 - Internationalization with i18next
PART #5 - Basics to Advanced Usage of styled-components

Keep in mind that if you get stuck on any step, refer to the Github repo

To find the completed project, Demo link

This is what we are going to create:

By starting from nothing, let's go over what we are going to cover in detail:

1. Set up a basic React SPA using create-react-app
2. Set up our own State management system using Redux toolkit
3. Learn about navigating our app using React Router
4. Learn about Custom multi Layout building
5. Learn how to use react-query for remote data
6. Learn how to use i18n
7. Get started with styling using Styled components
8. Learn how to build custom themes

Our project's structure:

Before we begin let's talk about how our project is going to be organized.

Once we create our React app using create-react-app, we will have our base React app. Once inside that application, we will create a component pattern and Our folder structure will look like the following:

Our goal today is to:

1. Create a new React blog
2. Have Dummy Api account setup and generate API KEY
3. Using React Routing, be able to navigate our app

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app my-app --template typescript

API :

The frontend will have to fetch the data from an API, I choose DAummyapi 🎬 : It's free, we just create an account to get your API key

Please use your API key as an environment variable, in .env file :

REACT_APP_ENV =“dev”

REACT_APP_DUMMY_API_ID = YOUR_API_KEY

REACT_APP_DUMMY_API_ENDPOINT = YOUR_API_URL

REACT_APP_MOCK_API_ENDPOINT = YOUR_API_URL

The configuration is done, let's start coding.

Building our React components

In this application, we are going to have fives pages for templates:

• All Author details with Filter
• All blog posts with Author details
• Register Form with validation
• Login Form with Validation
• My account page

Let’s create those files. In the src/ folder, create the following folder: src/pages. Within that newly created folder.

Setting up React Router:

To get React Router going, we are going to need to install our dependency. In the project, run the following command:

npm install --save react-router-dom

create router.js file, copy and paste this code :

import AuthorListing from './pages/authors/author-listing-container';
import PostListing from './pages/posts/post-listing-container';
import LoginPage from './pages/onboarding/login-container';
import SignUp from './pages/onboarding/singup-container';
import AuthorDetail from './pages/authors/author-detail-container';
import MyAccount from './pages/onboarding/myaccount-container';
import AuthorFilters from './pages/authors/author-listing-filter-container';
import NotFound from './components/not-found';
const isLoggedIn = localStorage.getItem('token');

export const routes = [  
 { path: '/', label: 'Authors', layout_type: 1, component: {   sidebar: AuthorFilters,   main: AuthorListing, }, hide_on_auth: false,  }, 
 { path: '/posts', label: 'Posts', layout_type: 3, component: {   sidebar: '',   main: PostListing, }, hide_on_auth: false,  },  
 { path: '/my-account', label: 'My Account', layout_type: 3, component: {   sidebar: '',   main: MyAccount, }, hide_on_auth: !isLoggedIn,  },  
 { path: '/login', label: 'Login', layout_type: 3, component: {   sidebar: '',   main: LoginPage, }, hide_on_auth: isLoggedIn,  },  
 { path: '/sign-up', label: 'Sign Up', layout_type: 3, component: {   sidebar: '',   main: SignUp, }, hide_on_auth: isLoggedIn,  },  
 { path: '/profile/:id', layout_type: 2, component: {   sidebar: AuthorDetail,   main: PostListing, },  },  
 { path: '*', layout_type: 3, component: {   sidebar: '',   main: NotFound, } }
];

Layout Components:

Because the Layout component is so simple, it can be re-used in other parts of the application, where a developer wants to use the same page layout. Moreover, it's possible to create custom reusable layouts.

I have used three layout combinations in my application

• Left-sidebar
• Right-sidebar
• No-sidebar

For this challenge, we are required to define a child component, define data to be received via props in the child component, and utilize this child component multiple times in a parent component.

This challenge will be solved in three steps:

• Define parameters in the router as layout type sidebar and main like below

{ 
 layout_type: 1, 
  component: {   
     sidebar: AuthorFilters,   main: AuthorListing }, 
   },
   path: '/', 
   label: 'Authors'
}

layout_type => 1 = Left-sidebar 2 = Right-sidebar 3 = No-sidebar

• Define the child component and provide props as parameters.
• Use the child component in the parent component and provide data through props.

In the Layout folder we create Layout.js file and store the code of the layout component there:

import React from 'react';

const AppLayout = ({ main: Main, sidebar: Sidebar, type, ...rest }) => {
  const bodyTemplate = [];
  bodyTemplate[1] = (
    <>
      <div className='col-2 sidebar'>
        <Sidebar {...rest} />
      </div>
      <div className='col-10'>
        <Main {...rest} />
      </div>
    </>
  );
  bodyTemplate[2] = (
    <>
      <div className='col-10'>
        <Main {...rest} />
      </div>
      <div className='col-2 sidebar'>
        <Sidebar {...rest} />
      </div>
    </>
  );
  bodyTemplate[3] = (
    <>
      <div className='col-12'>
        <Main {...rest} />
      </div>
    </>
  );
  return (
      <div className='row'>{bodyTemplate[type]}</div>
  );
};
AppLayout.displayName = 'App Layout';
export default AppLayout;

Putting it all together

Now that we have our components set up, we can head on over to “localhost:3000” and see all pages get render.

To be continued Part-2 article