React Project: HashTags for Posts with Auth — Part #1
Tags: react, styledcomponents, i18next, reactquery
Published: 2021-03-16 10:28:28

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](https://dev.to/selvaece25/react-project-hashtags-for-posts-with-auth-part-2-3fn5)
PART #3 - [React Query for remote data fetching instead of Redux thunk](https://dev.to/selvaece25/react-project-hashtags-for-posts-with-auth-part-3-10ch)
PART #4 - [Internationalization with i18next](https://dev.to/selvaece25/react-project-hashtags-for-posts-with-auth-part-4-45l2)
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](https://github.com/selvaece25/react-social-authors-js-app)

To find the completed project, [Demo link] (https://0bkge.csb.app/)

### This is what we are going to create:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6medtvty8g5p1bb36ty7.gif)

### 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
6. 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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr47qek3nlwl9rhk64ka.png)

### Our goal today is to:

1. Create a new React blog
2. Have [Dummy Api](https://dummyapi.io/) 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 :
```javascript
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 :

```javascript
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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvhrd22qnif7v7qb1jn9.png)


#### 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:
```javascript
npm install --save react-router-dom
```

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

```javascript
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 

```javascript
{ 
 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:

```javascript
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](https://dev.to/selvaece25/react-project-hashtags-for-posts-with-auth-part-2-3fn5) article