Routing in ReactJS application - Tutorial for beginners

In this article we will learn routing in Reactjs from the  beginning. Routing is a mechanism to redirect the users from one page to another page, and provides the navigation from one page to another page.

Prerequisites

• We should have a basic knowledge of ReactJS
• Visual Studio Code should be installed
• Node and NPM installed

React router

React router is a routing library built on top of the react which is used to create the routing in React apps.

**Create React.js Project **

npx create-react-app routingdemo  

Install react router

Install React router by using the  following command.

npm install react-router-dom --save  

Install bootstrap in this project by using the following command.

npm install --save bootstrap    

Now, open the index.js file and add Bootstrap reference.

import 'bootstrap/dist/css/bootstrap.min.css';  

Project structure

I have created two folders, layout and Views. Inside these folders I  have created  the following components.

Layout Folder components

• Footer.js
• Header.js
• Leftside.js
• Layout.js

Views folder conponents

• Addemployee.js
• Dashboard.js
• Editemployee.js
• Employee.js
• Profile.js
• Setting.js

Now let’s create one more file named ‘route.js’, in this file we defined routing. Open route.js file and add the  following code

import  React from 'react';  
const Dashboard=React.lazy(()=>import('./Views/Dashboard'));  
const setting=React.lazy(()=>import('./Views/Setting'))  
const employee=React.lazy(()=>import('./Views/Employee'))  
const addemployee=React.lazy(()=>import('./Views/Addemployee'))  
const editemployee=React.lazy(()=>import('./Views/Editemployee'))  
const profile=React.lazy(()=>import('./Views/Profile')) 
const notfound=React.lazy(()=>import('./PageNotFound'))
const routes = [  
    { path: '/Dashboard', component: Dashboard },  
    { path: '/setting', component: setting },  
    { path: '/employee',  component: employee },  
    { path: '/addemployee',  component: addemployee },  
    { path: '/profile',  component: profile },  
    { path: '/editemployee/:id', exact: true,  component: editemployee }, 
    { component:notfound }
];  
  
export default routes;  

Now go to Layout folder and open header.js file and  add the following code.

import React, { Component } from 'react'  
import { Link } from 'react-router-dom'  
  
export class Header extends Component {  
  render() {  
    return (  
      <div>  
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">  
          <ul class="navbar-nav ml-auto">  
  
            <li class="nav-item dropdown no-arrow d-sm-none">  
            </li>  
            <li class="nav-item dropdown no-arrow mx-1">  
            </li>  
            <div class="topbar-divider d-none d-sm-block"></div>  
            <li class="nav-item dropdown no-arrow">  
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
                <span class="mr-2 d-none d-lg-inline text-gray-600 small">Sanwar</span>  
                <img src="https://img.icons8.com/officel/16/000000/user.png" />  
              </a>  
              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">  
                <Link class="dropdown-item" to="/profile">  
                  <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>  
        Profile  
      </Link>  
                <div class="dropdown-divider"></div>  
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">  
                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>  
        Logout  
      </a>  
              </div>  
            </li>  
          </ul>  
        </nav>  
      </div>  
    )  
  }  
}  
  
export default Header  

Now open Footer.js component and add the following code.

import React, { Component } from 'react'  
export class Footer extends Component {  
    render() {  
        return (  
            <div>  
                 <footer class="sticky-footer bg-white">  
             <div class="container my-auto">  
              <div class="copyright text-center my-auto">  
            <span>Rotuing in ReactJS</span>  
          </div>  
        </div>  
      </footer>  
            </div>  
        )  
    }  
}  
export default Footer 

Now open Leftside.js component and  add the following code.

import React, { Component } from 'react'  
import { Link } from 'react-router-dom';  
export class Leftside extends Component {  
    render() {  
        return (  
            <div>  
                <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">  
                    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">  
                        <div class="sidebar-brand-text mx-3">React Routing </div>  
                    </a>  
                    <hr class="sidebar-divider my-0" />  
                    <hr class="sidebar-divider" />  
                     <li class="nav-item">  
                        <Link class="nav-link" to="/Dashboard"> <i class="fas fa-fw fa-home"></i>Home</Link>  
                    </li>  
                    <li class="nav-item">  
                        <Link class="nav-link" to="/employee"> <i class="fas fa-fw fa-user"></i>Employee</Link>  
                    </li>  
                    <li class="nav-item">  
                        <Link class="nav-link" to="/setting">  <i class="fas fa-fw fa-cog"></i>Setting</Link>  
                    </li>  
                </ul>  
            </div>  
        )  
    }  
}  
  
export default Leftside  

Now open Layout.js component and import header, footer and leftside components reference. In this component, add the following code.

import React, { Component, Suspense } from 'react';  
import Leftside from './Leftside';  
import Header from './Header'  
import Footer from './Footer'  
import routes from '../routes';  
import * as router from 'react-router-dom';  
import {  
    Route, Switch, Redirect  
} from 'react-router-dom';  
export class Layout extends Component {  
    loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>  
    render() {  
        return (  
            <div>  
                <div id="wrapper">  
                    <Leftside></Leftside>  
                    <div id="content-wrapper" class="d-flex flex-column">  
                        <div id="content">  
                            <Header />  
                             <Suspense fallback={this.loading()}>  
                            <Switch>  
                                {routes.map((route, idx) => {  
                                    return route.component ? (  
                                        <Route  
                                            key={idx}  
                                            path={route.path}  
                                            exact={route.exact}  
                                            name={route.name}  
                                            render={props => (  
                                                <route.component {...props} />  
                                            )} />  
                                    ) : (null);  
                                })}  
                                <Redirect from="/" to="/dashboard" />  
                            </Switch>  
                            </Suspense>  
                        </div>  
                        <Footer />  
                    </div>  
                </div>  
            </div>  
        )  
    }  
}  
  
export default Layout  

Layout structure

Now go to Views folder and open Dashboard.js component and add the  following code.

import React, { Component } from 'react'  
  
export class Dashboard extends Component {  
    render() {  
        return (  
            <div>  
                <h1>Welcome to React Routing Dashboard</h1>  
            </div>  
        )  
    }  
}  
  
export default Dashboard 

Now open Addemployee.js component and following code.

import React, { Component } from 'react'  
  
export class Addemployee extends Component {  
    render() {  
        return (  
            <div>  
  
  
  
                <div class="row">  
                    <div class="col-lg-2"></div>  
                    <div class="col-lg-8">  
                        <div  style={{"padding":"0rem!important"}}>  
                            <div class="text-center">  
                                <h1 class="h4 text-gray-900 mb-4">Create new Employee!</h1>  
                            </div>  
                            <form >  
                                <div class="form-group row">  
                                    <div class="col-sm-12 mb-3 mb-sm-0">  
                                        <input type="text" class="form-control form-control-user" id="eEmployeetName" placeholder="Employee Name" />  
                                    </div>  
  
                                </div>  
                                <div class="form-group row">  
  
                                    <div class="col-sm-12">  
                                        <input type="text" class="form-control form-control-user" id="City" placeholder="City" />  
                                    </div>  
                                </div>  
                                <div class="form-group">  
                                    <input type="email" class="form-control form-control-user" id="Email" placeholder="Email Address" />  
                                </div>  
                                <div class="form-group">  
                                    <input type="email" class="form-control form-control-user" id="Department" placeholder="Department" />  
                                </div>  
  
                                <a href="login.html" class="btn btn-primary btn-user btn-block">  
                                    Add  Employee  
                          </a>  
  
  
                            </form>  
  
                        </div>  
                    </div>  
                </div>  
  
            </div>  
        )  
    }  
}  
  
export default Addemployee  

Now open Setting.js component and add the following code.

import React, { Component } from 'react'  
  
export class Setting extends Component {  
    render() {  
        return (  
            <div>  
               <h1>Welcome to React Routing Setting Dashboard</h1>  
            </div>  
        )  
    }  
}  
  
export default Setting  

Now open Profile.js component and add the following code.

import React, { Component } from 'react'  
  
export class Profile extends Component {  
    render() {  
        return (  
            <div>  
                <h3>Profile</h3>  
            </div>  
        )  
    }  
}  
  
export default Profile  

Now open Employee.js component and add the following code.

import React, { Component } from 'react'  
import { Link } from 'react-router-dom';  
export class Color extends Component {  
      
    render() {  
        const employee = `/editemployee/${1}`  
        return (  
            <div>  
                <div class='container-fluid' >        
           <div className="row title" style={{marginBottom: "20px"}} >        
           <div class="col-sm-12 ">     
           <div class="col-sm-9 btn">  
               </div>  
               <div class="col-sm-3 btn btn-info nav-item">  
               <Link style={{"color":"white"}} class="nav-link" to="/addemployee"> <i style={{"color":"white"}} class="fas fa-fw fa-user"></i>Add Employee</Link>  
               </div>  
            
           </div>        
           </div>    
       </div>    
                <table class="table">  
                    <thead>  
                        <tr>  
                            <th>Employee name</th>  
                            <th>City</th>  
                            <th>Email</th>  
                            <th>Department</th>  
                            <th></th>  
                        </tr>  
                    </thead>  
                    <tbody>  
                        <tr>  
                            <td>John</td>  
                            <td>Doe</td>  
                            <td>john@example.com</td>  
                            <td>IT</td>  
                            <td>  
                             
                            <Link class="btn btn-info" to={employee}>Edit</Link>  
                                  
                                     
                            </td>  
  
                        </tr>  
                        <tr>  
                            <td>Mary</td>  
                            <td>Moe</td>  
                            <td>mary@example.com</td>  
                            <td>HR</td>  
                            <td>  
                                <button type="button" class="btn btn-info">Edit</button>  
                                  
                            </td>  
                        </tr>  
                        <tr>  
                            <td>July</td>  
                            <td>Dooley</td>  
                            <td>july@example.com</td>  
                            <td>IT</td>  
                            <td>  
                              <button type="button" class="btn btn-info">Edit</button>  
                                     
                            </td>  
                        </tr>  
                    </tbody>  
                </table>  
            </div>  
        )  
    }  
}  
  
export default Color  

Now open Editemployee.js component and add the following code.

import React, { Component } from 'react'  
  
export class Editemployee extends Component {  
    render() {  
        return (  
            <div>  
                 <div class="row">  
                    <div class="col-lg-2"></div>  
                    <div class="col-lg-8">  
                        <div  style={{"padding":"0rem!important"}}>  
                            <div class="text-center">  
                                <h1 class="h4 text-gray-900 mb-4">Update Employee</h1>  
                            </div>  
                            <form >  
                                <div class="form-group row">  
                                    <div class="col-sm-12 mb-3 mb-sm-0">  
                                        <input type="text" class="form-control form-control-user" id="eEmployeetName" placeholder="Employee Name" />  
                                    </div>  
  
                                </div>  
                                <div class="form-group row">  
  
                                    <div class="col-sm-12">  
                                        <input type="text" class="form-control form-control-user" id="City" placeholder="City" />  
                                    </div>  
                                </div>  
                                <div class="form-group">  
                                    <input type="email" class="form-control form-control-user" id="Email" placeholder="Email Address" />  
                                </div>  
                                <div class="form-group">  
                                    <input type="email" class="form-control form-control-user" id="Department" placeholder="Department" />  
                                </div>  
  
                                <a href="login.html" class="btn btn-primary btn-user btn-block">  
                                Update  Employee  
                          </a>  
  
  
                            </form>  
  
                        </div>  
                    </div>  
                </div>  
            </div>  
        )  
    }  
}  
  
export default Editemployee  

Now open index.js file and add the following code

import React from 'react';  
import ReactDOM from 'react-dom';  
import './index.css';  
import App from './App';  
import * as serviceWorker from './serviceWorker';  
import { BrowserRouter } from 'react-router-dom';  
ReactDOM.render(  
  <BrowserRouter>  
  <App />  
</BrowserRouter>  
, document.getElementById('root')  
);  
serviceWorker.unregister();  

Open app.js file and add the following code

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import Layout from './Layout/Layout'  
function App() {  
  return (  
    <div className="App">  
      <Layout></Layout>  
    </div>  
  );  
}  
  
export default App; 

Now run the project by using ‘Npm start’.

Click on Employee

Click on Addemployee Button

Click on Edit button

To check if page is not found component, enter any invaild text in url

Summary

In this article, we learned about routing in ReactJS applications.

#react #javascript

What is GEEK

Buddha Community

Data Visualization in R with ggplot2: A Beginner Tutorial

A famous general is thought to have said, “A good sketch is better than a long speech.” That advice may have come from the battlefield, but it’s applicable in lots of other areas — including data science. “Sketching” out our data by visualizing it using ggplot2 in R is more impactful than simply describing the trends we find.

This is why we visualize data. We visualize data because it’s easier to learn from something that we can see rather than read. And thankfully for data analysts and data scientists who use R, there’s a tidyverse package called ggplot2 that makes data visualization a snap!

In this blog post, we’ll learn how to take some data and produce a visualization using R. To work through it, it’s best if you already have an understanding of R programming syntax, but you don’t need to be an expert or have any prior experience working with ggplot2

#data science tutorials #beginner #ggplot2 #r #r tutorial #r tutorials #rstats #tutorial #tutorials

Tutorial: Getting Started with R and RStudio

In this tutorial we’ll learn how to begin programming with R using RStudio. We’ll install R, and RStudio RStudio, an extremely popular development environment for R. We’ll learn the key RStudio features in order to start programming in R on our own.

If you already know how to use RStudio and want to learn some tips, tricks, and shortcuts, check out this Dataquest blog post.

Table of Contents

• 1. Install R
• 2. Install RStudio
• 3. First Look at RStudio
• 4. The Console
• 5. The Global Environment
• 6. Install the [tidyverse](https://www.dataquest.io/blog/tutorial-getting-started-with-r-and-rstudio/#tve-jump-173bb26184b) Packages
• 7. Load the [tidyverse](https://www.dataquest.io/blog/tutorial-getting-started-with-r-and-rstudio/#tve-jump-173bb264c2b) Packages into Memory
• 8. Identify Loaded Packages
• 9. Get Help on a Package
• 10. Get Help on a Function
• 11. RStudio Projects
• 12. Save Your “Real” Work. Delete the Rest.
• 13. R Scripts
• 14. Run Code
• 15. Access Built-in Datasets
• 16. Style
• 17. Reproducible Reports with R Markdown
• 18. Use RStudio Cloud
• 19. Get Your Hands Dirty!
• Additional Resources
• Bonus: Cheatsheets

#data science tutorials #beginner #r tutorial #r tutorials #rstats #tutorial #tutorials

Tutorial: Loading and Cleaning Data with R and the tidyverse

1. Characteristics of Clean Data and Messy Data

What exactly is clean data? Clean data is accurate, complete, and in a format that is ready to analyze. Characteristics of clean data include data that are:

• Free of duplicate rows/values
• Error-free (e.g. free of misspellings)
• Relevant (e.g. free of special characters)
• The appropriate data type for analysis
• Free of outliers (or only contain outliers have been identified/understood), and
• Follows a “tidy data” structure

Common symptoms of messy data include data that contain:

• Special characters (e.g. commas in numeric values)
• Numeric values stored as text/character data types
• Duplicate rows
• Misspellings
• Inaccuracies
• White space
• Missing data
• Zeros instead of null values

2. Motivation

In this blog post, we will work with five property-sales datasets that are publicly available on the New York City Department of Finance Rolling Sales Data website. We encourage you to download the datasets and follow along! Each file contains one year of real estate sales data for one of New York City’s five boroughs. We will work with the following Microsoft Excel files:

• rollingsales_bronx.xls
• rollingsales_brooklyn.xls
• rollingsales_manhattan.xls
• rollingsales_queens.xls
• rollingsales_statenisland.xls

As we work through this blog post, imagine that you are helping a friend launch their home-inspection business in New York City. You offer to help them by analyzing the data to better understand the real-estate market. But you realize that before you can analyze the data in R, you will need to diagnose and clean it first. And before you can diagnose the data, you will need to load it into R!

3. Load Data into R with readxl

Benefits of using tidyverse tools are often evident in the data-loading process. In many cases, the tidyverse package readxl will clean some data for you as Microsoft Excel data is loaded into R. If you are working with CSV data, the tidyverse readr package function read_csv() is the function to use (we’ll cover that later).

Let’s look at an example. Here’s how the Excel file for the Brooklyn borough looks:

The Brooklyn Excel file

Now let’s load the Brooklyn dataset into R from an Excel file. We’ll use the readxlpackage. We specify the function argument skip = 4 because the row that we want to use as the header (i.e. column names) is actually row 5. We can ignore the first four rows entirely and load the data into R beginning at row 5. Here’s the code:

library(readxl) # Load Excel files
brooklyn <- read_excel("rollingsales_brooklyn.xls", skip = 4)

Note we saved this dataset with the variable name brooklyn for future use.

4. View the Data with tidyr::glimpse()

The tidyverse offers a user-friendly way to view this data with the glimpse() function that is part of the tibble package. To use this package, we will need to load it for use in our current session. But rather than loading this package alone, we can load many of the tidyverse packages at one time. If you do not have the tidyverse collection of packages, install it on your machine using the following command in your R or R Studio session:

install.packages("tidyverse")

Once the package is installed, load it to memory:

library(tidyverse)

Now that tidyverse is loaded into memory, take a “glimpse” of the Brooklyn dataset:

glimpse(brooklyn)
## Observations: 20,185
## Variables: 21
## $ BOROUGH <chr> "3", "3", "3", "3", "3", "3", "…
## $ NEIGHBORHOOD <chr> "BATH BEACH", "BATH BEACH", "BA…
## $ `BUILDING CLASS CATEGORY` <chr> "01 ONE FAMILY DWELLINGS", "01 …
## $ `TAX CLASS AT PRESENT` <chr> "1", "1", "1", "1", "1", "1", "…
## $ BLOCK <dbl> 6359, 6360, 6364, 6367, 6371, 6…
## $ LOT <dbl> 70, 48, 74, 24, 19, 32, 65, 20,…
## $ `EASE-MENT` <lgl> NA, NA, NA, NA, NA, NA, NA, NA,…
## $ `BUILDING CLASS AT PRESENT` <chr> "S1", "A5", "A5", "A9", "A9", "…
## $ ADDRESS <chr> "8684 15TH AVENUE", "14 BAY 10T…
## $ `APARTMENT NUMBER` <chr> NA, NA, NA, NA, NA, NA, NA, NA,…
## $ `ZIP CODE` <dbl> 11228, 11228, 11214, 11214, 112…
## $ `RESIDENTIAL UNITS` <dbl> 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1…
## $ `COMMERCIAL UNITS` <dbl> 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…
## $ `TOTAL UNITS` <dbl> 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1…
## $ `LAND SQUARE FEET` <dbl> 1933, 2513, 2492, 1571, 2320, 3…
## $ `GROSS SQUARE FEET` <dbl> 4080, 1428, 972, 1456, 1566, 22…
## $ `YEAR BUILT` <dbl> 1930, 1930, 1950, 1935, 1930, 1…
## $ `TAX CLASS AT TIME OF SALE` <chr> "1", "1", "1", "1", "1", "1", "…
## $ `BUILDING CLASS AT TIME OF SALE` <chr> "S1", "A5", "A5", "A9", "A9", "…
## $ `SALE PRICE` <dbl> 1300000, 849000, 0, 830000, 0, …
## $ `SALE DATE` <dttm> 2020-04-28, 2020-03-18, 2019-0…

The glimpse() function provides a user-friendly way to view the column names and data types for all columns, or variables, in the data frame. With this function, we are also able to view the first few observations in the data frame. This data frame has 20,185 observations, or property sales records. And there are 21 variables, or columns.

#data science tutorials #beginner #r #r tutorial #r tutorials #rstats #tidyverse #tutorial #tutorials

Getting Started with R Markdown — Guide and Cheatsheet

In this blog post, we’ll look at how to use R Markdown. By the end, you’ll have the skills you need to produce a document or presentation using R Mardown, from scratch!

We’ll show you how to convert the default R Markdown document into a useful reference guide of your own. We encourage you to follow along by building out your own R Markdown guide, but if you prefer to just read along, that works, too!

R Markdown is an open-source tool for producing reproducible reports in R. It enables you to keep all of your code, results, plots, and writing in one place. R Markdown is particularly useful when you are producing a document for an audience that is interested in the results from your analysis, but not your code.

R Markdown is powerful because it can be used for data analysis and data science, collaborating with others, and communicating results to decision makers. With R Markdown, you have the option to export your work to numerous formats including PDF, Microsoft Word, a slideshow, or an HTML document for use in a website.

Turn your data analysis into pretty documents with R Markdown.

We’ll use the RStudio integrated development environment (IDE) to produce our R Markdown reference guide. If you’d like to learn more about RStudio, check out our list of 23 awesome RStudio tips and tricks!

Here at Dataquest, we love using R Markdown for coding in R and authoring content. In fact, we wrote this blog post in R Markdown! Also, learners on the Dataquest platform use R Markdown for completing their R projects.

We included fully-reproducible code examples in this blog post. When you’ve mastered the content in this post, check out our other blog post on R Markdown tips, tricks, and shortcuts.

Okay, let’s get started with building our very own R Markdown reference document!

R Markdown Guide and Cheatsheet: Quick Navigation

• 1. Install R Markdown
• 2. Default Output Format
• 3. R Markdown Document Format
• 4. Section Headers
• 5. Bulleted and Numbered Lists
• 6. Text Formatting
• 7. Links
• 8. Code Chunks
• 9. Running Code
• 10. Control Behavior with Code Chunk Options
• 11. Inline Code
• 12. Navigating Sections and Code Chunks
• 13. Table Formatting
• 14. Output Format Options
• 15. Presentations
• 16. Add a Table of Contents
• 17. Reproducible Reports with RStudio Cloud
• More R Markdown Tips, Tricks, and Shortcuts
• Bonus: R Markdown Cheatsheet
• Additional Resources

1. Install R Markdown

R Markdown is a free, open source tool that is installed like any other R package. Use the following command to install R Markdown:

install.packages("rmarkdown")

Now that R Markdown is installed, open a new R Markdown file in RStudio by navigating to File > New File > R Markdown…. R Markdown files have the file extension “.Rmd”.

2. Default Output Format

When you open a new R Markdown file in RStudio, a pop-up window appears that prompts you to select output format to use for the document.

The default output format is HTML. With HTML, you can easily view it in a web browser.

We recommend selecting the default HTML setting for now — it can save you time! Why? Because compiling an HTML document is generally faster than generating a PDF or other format. When you near a finished product, you change the output to the format of your choosing and then make the final touches.

One final thing to note is that the title you give your document in the pop-up above is not the file name! Navigate to File > Save As.. to name, and save, the document.

#data science tutorials #beginner #r #r markdown #r tutorial #r tutorials #rstats #rstudio #tutorial #tutorials

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners