Skyler Dowdy

Posted on Feb 26, 2020

2020 Setting up React Navigation in a new git repo

#react #git #github #npm

Prerequisites

System Requirements:

Computer Running Linux Debian / Ubuntu (Preferred), Windows 7 or Later, MacOS X or Later

Programs Requirements:

Node.js along with NPM/NPX and Chocolatey
- More information can be found at https://nodejs.org
A Text Editor VS Code or Atom Preferred
- I am going to be using VS Code and utilizing the Shortcuts for VS code
- You Can use anything from Acme to Zile (I have no Idea what either of these text editors are)
If using VSCode these are the plugins I will be using you can also find them for Atom as well
a. ES7 React/Redux/GraphQL/React-Native snippets
b. Prettier - Code Formatter
c. Turbo Console Log
d. I use FiraCode font with ligatures enabled (that is how the => sign connects itself)
Terminal Access (GitBash if you are using Windows)
a. When installing be sure to select the correct text editor DO NOT SELECT VIM UNLESS YOU KNOW WHAT YOU ARE DOING!
Basic Knowledge of HTML, CSS, and JavaScript
Github Account connected either Https or SSL

MY RANT:

Linux Debian or Ubuntu with the Budgie or Mate desktop is what I reccommend that all programmers use. Unless, you are developing strictly for Apple products. Why? Speed, Performance, OpenSource, lack of bloatware... I could go on forever. It is however a personal preference and it does take some learning but, once you are used to it you will never want to use Windows Again... I have a PC with Windows on it and I rarely even turn it on because the only thing I cannot do on my Linux machine that I can on my Windows is play certain games... If you plan on developing for Apple products (swift) then a Mac is 100% the way to go. WINDOWS IS NEVER THE WAY TO GO

Step 1

Creating a Git Repo, Creating the React Application, and Pushing to the Repo.

This step just walks through the basics of creating a react application. If this does not work for you please make sure that you have checked all of the

Create a new Git Repository ** NO README **
Open a Terminal (GitBash if you are using windows)
Create the React App
a. npx create-react-app <react-tutorial-app>
Change to the newly created directory
a. cd <react-tutorial-app>
Paste in the commands from github
Change to a new branch
a. git checkout -b <Tutorial1-Create-React-App-Nav>
Install React Router
a. npm i react-router react-router-dom
Start your React App
a. npm start
You should now see your React App running in your browser. If not open it and navigate to "localhost:3000"
Navigate to your terminal and stop the application
a. ctrl + c

Step 2

Creating a folder structure and adding some base files.

All good applications need organization. If your app is not organized when it gets larger it makes it very hard to find things so, we are going to go ahead and setup the file structure now. If we setup our file structure while the application is small it makes it easier to tweak if we need to as the application grows. There is no right or wrong way to organize your files and you can do it any way that you please. Once you find a way that you like you can write a BASH script that will do all of the work for you. The things you need for this tutorial are jsx files named Header Navbar Footer AppRouter Home and About you can create them any way you would like to.

This is how I do it:

Assuming you are coming from Step 1 and are in the root directory of your newly created app e.g. /home//

Change into the "src" directory
a. cd src
Create your folders
a. mkdir -p configs components/pages components/forms pages/user pages/admin sources/images sources/raw_images styles/components styles/pages styles/forms

The -p tells it to create the parent directory if it does not exist
I use components/for things like my Header, Footer, NavBar, forms, etc
I use pages to hold the main pages either user or admin
I use sources/images to hold all the images displayed on the site
I use sources/raw_images to hold all of the photoshop or gimp files
I use styles to hold all of the styling

Create your files
a. cd configs
b. touch AppRouter.jsx
c. cd ../components/pages
d. touch Header.jsx Footer.jsx
e. cd [.]()./
f. touch NavBar.jsx
g. cd ../pages/user
h. touch Home.jsx About.jsx
i. cd ../../styles/pages
j. touch MainPage.css
k. cd ../components
l. touch NavBar.css
m. cd ../../../
Add the changes to git
a. git add .
Commit the changes
a. git commit
b. enter a commit message
c. ctrl +x
d. y
e. enter
Set the upstream and push the changes
a. git push -u origin Tutorial1-Create-React-App-Nav

Step 3

Setting up the files

In this step we are just going through and creating empty arrow functions for all of our newly created files. Once you get a structure setup that you like you can also automate this with a script as well.

This is where those VS code extensions will come in handy!

Assuming you are coming from Step 2 and are in the root directory of your newly created app e.g. /home//

Open your text editor of choice I am using VS Code (one of the few good things to come from Microsoft)
a. code .
Open each one of the newly created files in your text editor
a. |rafce| (Creates a react arrow function default exported)
- It should produce something in each one of your files that looks like example 1 at the bottom of the file
- If |rafce| did not work:
  - Check that you have ES7 React/Redux/GraphQL/React-Native snippets installed in vs code and restart VS Code
  - Check that you named the file with the .jsx extension
  - Check that the Language Mode is "JavaScript React" in the bottom right hand corner of VS Code.
- You can also copy the example 1 code click on "FileNameHere" and press ctrl + d twice. It will highlight both instances and you can just rename it to the name of the file.
Open a terminal in VS Code
Start the React Server Again
a. npm start

Step 4

Setting up React-Router

In this step we are setting up the routing for the application. A few things to note:

*BrowserRouter must be wrapped at the highest possible level in the application but, this is not the only place that you can wrap BrowserRouter. You can also do it in your App.js file if you prefer

*You do not have to use "Switch."

*What is Switch? It is the same thing as a Switch statement in JS with reference to what place the path is in. For example if I were to Route Path to "/" and "about" without an exact or switch it would render both pages; first the home then the about right under it. You do not have to use "exact" when using Switch but, it is safer to do so in most use cases.

Open index.js and import BrowserRouter from react-router-dom I rename it using "as"
a. |imd| (import destructured)
b. import { BrowserRouter as BR } from 'react-router-dom'
Put a "<BR>" tag before "<App />"
Put a "</BR>" tag after "<App />"
Your index.js file should now look like example 2
Open your AppRouter file and Import Switch and Route from react-router-dom
a. imd
b. import { Switch as S, Route as R } from 'react-router-dom';
Import your Home and About pages
a. import Home from '../pages/user/Home.jsx;
b. import About from '../pages/user/About.jsx;
Replace the "<Div>" tags with "<S>"
a. Select the first div tag and press ctrl +d twice then type S
Add an exact route to the Home page and a non-exact route to the About page
a. <R exact path='/' component={Home} />
b. <R path='/about/' component={About} />

Step 5

Setting up Navigation

When setting up Navigation in a react app you want to use NavLink or Link instead of anchor tags. Since React applications are "Single Page Applications" meaning that it is run out of a single index.html file, you do not want to use anchor tags becuase this will cause the app to reload everytime someone clikcs a link therefore the app would lose any state that it is holding on to. The only time you want to use anchor tags when developing a react application are to link to an external site or email address.

*NavLink is just an anchor tag that will have an active class when clicked. - Usually used in nav bars

*Link is just an anchor tag it will not have an active class attached to it. - Usually Used on pages

Open your Home and About pages and add in an <h1> that says ___ Page Works
a. <h1>___ Page Works
Open your NavBar file and import NavLink from react-router-dom
a. imd
b. import { NavLink as NL } from 'react-router-dom';
Create NavLinks to your Home and About Pages
a. <NL exact to='/'>Home</NL>
b. <NL to='/about'>About</NL>
Your NavBar File Should look like example 4
In your Header.jsx file import NavBar and render it between the
tags a. import NavBar from '../NavBar'; b. <div> <NavBar /> </div>
Your Header file should look like example 5
Add a footer if you would like you can see mine in example 6

Step 6

Tying it all together

Open your App.js file and import Header, AppRouter, and Footer
a. import Header from './components/pages/Header.jsx';
b. import Footer from './components/pages/Footer.jsx';
c. import AppRouter from './configs/AppRouter.jsx';
Between your app div render the above pages
a. <div className='App'> <Header /> <AppRouter /> <Footer /> </div>
Your App.js file should look like example 7
In your browser you should now see:
a. NavLinks for Home and About
b. ___ Page Works by pressing

c. Your Footer
Check the status on git
a. git status
Add the Files
a. git add .
Commit the changes
a. git commit
b. Enter a commit message
c. ctrl + x
d. y
e. enter
Push the Changes to GitHub
a. git push
Create a Pull Request
Merge your pull request
Checkout to master
a. git checkout master
Pull master
a. git pull
Congratulations! You Built a React Application with Application Routing.
Check the status on git
a. git status
Add the Files
a. git add .
Commit the changes
a. git commit
b. Enter a commit message
c. ctrl + x
d. y
e. enter
Push the Changes to GitHub
a. git push
Create a Pull Request
Merge your pull request
Checkout to master
a. git checkout master
Pull master
a. git pull
Congratulations! You Built a React Application with Application Routing.

Examples

Example 1 - React Arrow Function

import React from "react";

const YourFileNameHere = () => {
  return (
<div>

</div>
  );
};

export default YourFileNameHere;

Example 2 - Index.js After BrowserRouter Import

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as BR } from 'react-router-dom'

ReactDOM.render(
<BR>
<App />
</BR>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
//* Learn more about service workers: https:*bit.ly/CRA-PWA 
serviceWorker.unregister();

Example 3 - AppRouter.jsx

import React from "react";
import { Route as R, Switch as S } from "react-router-dom";
import Home from "../pages/user/Home.jsx";
import About from "../pages/user/About.jsx";

const AppRouter = () => {
  return (
<S>
  <R exact path="/" component={Home} />
  <R path="/about" component={About} />
</S>
  );
};

export default AppRouter;

Example 4 - NavBar.jsx

import React from "react";
import { NavLink as NL } from "react-router-dom";
const NavBar = () => {
  return (
<div>
  <NL exact to="/">Home</NL>
  <NL to="/about">About</NL>
</div>
  );
};

Example 5 - Header.jsx

import React from "react";
import NavBar from "../NavBar.jsx";
const Header = () => {
  return (
<div>
  <NavBar />
</div>
  );
};

export default Header;

Example 6 - Footer.jsx

import React from "react";

const Footer = () => {
  return (
<div>
  <p>&copy;2020 SkylerWebDev</p>
</div>
  );
};

export default Footer;

Example 7 - App.js

import React from "react";
import "./App.css";
import AppRouter from "./configs/AppRouter.jsx";
import Header from "./components/pages/Header.jsx";
import Footer from "./components/pages/Footer.jsx";

const App = () =>{
  return (
<div className="App">
  <Header />
  <AppRouter />
  <Footer />
</div>
  );
}

export default App;

DEV Community