ReactJS , FrontEnd

In this post we shall look at the building blocks of webapp.

We shall be building frontend using reactjs.

What is React JS?

ReactJS is a free and open source front end java script library for building user interfaces. It is a popular framework for building front end applications.

Steps:

Make sure you have npm installed on your machine. if not please google and install latest npm version
Create a react application using the command
```
 npx create-react-app webapp
```
Lets create a directory structure under the folder webapp which will help us build the application
create following folders under the folder src
1. components - to develop reusable components across application like Sidebar, Navigation bar. Inside this folder create files
  1. Navbar.jsx - this will be the navigation bar used across application
  2. Sidebar.jsx - this will be the side bar used across application
  3. PrivateRoute.jsx - this will be a component to manage secure routes in the application
  4. PageNotFound.jsx - this component will display 404 Page for any route not found in application
2. data - this folder will contain any mock data to be used in the application while building UI
3. context - this folder will contain the Context data which can be accessible across the application without passing it via props. For example if the usertoken ,username or whether the user is logged in property should be used across application there is no point in sending via props and making it complicated implementation. This will be like global variables and can be accessed easily in any part of application
4. pages - these will be pages in application. A difference between page and component is page is normally not reused and most likely an end point like /dashboard and also it can use multiple components like Sidebar and Navigation bar. However a component is used in several pages like Navigation bar is used across all pages
  1. Create following pages
    1. Login.jsx - This will be the login page or first page of application. if the user is not logged in then he will redirected to this page
    2. Dashboard.jsx - this will be the landing page once the user does a login successfully.
5. Configure Tailwindcss - We are going to use tailwindcss for our application which helps to style the UI application with ease and not worry about the classes. For more information please refer to documentation - https://tailwindcss.com/docs/installation
  1. Configure tailwindcss - At webapp folder level execute following commands.
```
 npm install -D tailwindcss
 npx tailwindcss init
```
  2. Configure your template paths
```
 module.exports = {
   content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {},
   },
   plugins: [],
 }
```
  3. Add the Tailwind directives to your CSS
```
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
```

This section completes the code setup part. We shall do a detailed dive into the code in the next section.

08-Building block of webapp

Table of contents

What is React JS?