DEV Community: Skyler Dowdy

2020 Bash Scripts for React

Skyler Dowdy — Fri, 28 Feb 2020 15:08:00 +0000

I wrote a few BASH scripts to help in the Git and React World

All instructions are in the README

Bash Scripts

File 1 - Bash Aliases - to make your life easier...

Script 1 - setup-react.sh

Asks for an app name and creates it in the current folder
Installs react-router and react-router-dom
Creates a file / folder structure:
- configs/AppRouter.jsx
- configs/PrivateRoute.jsx
- components/reuse/NavBar.jsx
- components/pages/Header.jsx
- components/pages/Footer.jsx
- pages/user/Home.jsx
- pages/user/Contact.jsx
- pages/user/About.jsx
Writes the Routes for the pages and puts content into each of them
Rewrites the App.js file to contain:
- <Header />
- <AppRouter />
- <Footer />
Rewrites index.js to wrap the App component in BrowserRouter

Script 2 - Git Create Branch

Asks for branch name
Creates a new branch
Sets the upstream for the branch

Script 3 -- Git Deploy

Asks for a Commit message
Adds files
Commits files with commit message
Pushes files to current branch as long as the upstream is set

Script 4 - Clean Node Modules

Digs down deep to remove node modules folders

2020 Setting up a Private Route in React

Skyler Dowdy — Wed, 26 Feb 2020 18:49:59 +0000

This tutorial follows Tutorial 1

Provided you are using react-router-dom the code should still work for you. I will be linking the github repo ASAP

Step1

Setup files needed for tutorial.

Open your Project in VsCode a. cd projects/yourprojectnamehere b. code . c. or Just use the file menu
Open the VS Code Terminal and Get the status of git. a. git status 1. You should be on the master branch and your working tree should be clean
Checkout to a new branch and set the upstream a. git checkout -b <Tutorial-2-PrivateRoute> b. git push -u origin <Tutorial-2-PrivateRoute>
Create a PrivateRoute file a. touch src/cofigs/PrivateRoute.jsx
Create a private file a. touch pages/admin/AdminHome.jsx
Add some content to the AdminHome file

import React from 'react'

const AdminHome = () => {
return (
<div>
<h1>Welcome home Admin</h1>
</div>
)
}

export default AdminHome

Step 2

Creating the Private Route File.

Import React, Route and Redirect a. imr b. imd c. import { Route as R, Redirect as RD } from 'react-router-dom';
Setup the arrow fucntion

Note: We are not using |rafce| here because we are bringing in props. (More to be explained later)

const PrivateRoute = ({ component: Component, ...rest }) = {

   <R
{...rest}
render={props =>
  localStorage.getItem('token') ?
(
<Component {...props} />
):
(
<RD to='/' />
)
  }
[/](file:///)>
   );
  export default PrivateRoute;

Lets Break this down:

Components - let you split and isolate the UI into independent, reuseable pieces they are like JS functions
Props - the inputs that components accept
Render - Display
Ternary - If Else Statement
localStorage - a place where you can store data on a users machine to be used by the site
... - Spread operator - expands a string, object, or array into it's elements

What are we doing?

We are bringing the component property defined on props from our AppRouter file (we will hook this up in a minute) and assinging it to a new location in state called Component.
We are then taking any remaining objects defined on props and collecting them in an argument called ...rest
After this we are setting up a route to render our props to our private componenet IF there is a token in localStorage otherwise, we are redirecting to home.

Step 3

Setting up the AppRouter file to render the PrivateRoute

Open the AppRouter.jsx file and import PrivateRoute a. import PrivateRoute from './PrivateRoute.jsx';
Import the AdminHome Page a. import AdminHome from '../pages/admin/AdminHome.jsx';
Add a Private Route to the AdminHome Page a. <PrivateRoute path='/admin/AdminHome' componenet={AdminHome} />
Add a NavLink to the AdminHome page a. open the NavBar.jsx file b. <NL to='/admin/adminhome/'>Admin Home<NL/>

Step 4

Tying it all together

Run your app a. npm start
Open your developer tools (Chrome) Firefox works too a. right click on the page b. click inspect
Clear Tokens from localStorage if any a. In the top of the developer tool click Application b. To the right click Local Storage c. Open the local storage for the page you are on d. if there is a token delete it (click and press the x)
Try to navigate to AdminHome a. It should not work and redirect you to Home
Add a token a. In the place where we checked for tokens double click the key field and type token (be sure this matches what you are calling from local storage) b. Give your token any value
Navigate to your Admin Home
Add, Commit, Push, and Pull Request your new private route

2020 Setting up React Navigation in a new git repo

Skyler Dowdy — Wed, 26 Feb 2020 18:40:29 +0000

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;