Forem: andersjr1984

Open Sourcing My Large React and Firebase ToDo App

andersjr1984 — Sat, 08 Feb 2020 23:00:15 +0000

I am releasing my baby, Carpe Mea Visio, to the world. I have spent countless hours working on this project in order to help me get a job. I now have a job and am releasing this project to the world to see what kind of monster you can create.

This is a project with lots of awesome things! It includes:

Firebase Functions, Firestore, Extensions, and Hosting
React Hooks and Code Splitting
React Router
HTML5 Image Resizing (client-side image resizing is the best)

Please check it out and let me know what you think. I would like to highlight how I organized and called the Firebase Functions.

I just pushed a reinitialized repo to github for you to check out.

Let me know what you think!

Introduction to the Dev community

andersjr1984 — Thu, 26 Dec 2019 20:48:11 +0000

Although late, I would like to introduce myself to the Dev.to team and describe myself a little bit. I know not many people will read this, but I know its message will resonate. A person who likes problem solving in this day and age will always find a community in the programming world.

Why change careers?

My background is in environmental engineering, where I have built a successful career as a compliance auditor and environmental regulatory expert over the past century and received my Professional Engineers license in the State of Maryland. With a strong background in a successful career, it has come as a surprise to many of my colleagues that I would be looking to change careers, so I would like to provide some background on why I am pursuing a path in software engineering. To summarize below, I started programming and evaluating datasets over 20 years ago, always assuming my career would be heavily influenced by computers. Throughout my career, I have been working to automate processes with different programming languages, which has become my passion.

Programming for a lifetime

I played a lot of computer games as a child. I was hardly a talented gamer, I was more interested in the community aspect of games and what was required to run these powerful 3-D games.

Hardware

As a PC gamer in the 90s and early 2000s, I taught myself a lot about computer hardware in trying to find the perfect computer to run all my games. I knew more about RAM, processors, and GPUs than I do now. I knew how everything worked together, what made one stick of RAM work better than another, and what the best GPU was for the money. My parents were very influential and always made sure I had a computer that made me happy. Before I went to college, they sent me off with an ultra powerful gaming machine that I worked with the local computer shop owner to build.

Web Development

In addition to my introduction to hardware, I was building websites that were detailed guides to the games I was playing. My most successful website as a kid was describing the best trades that could be made in Madden 99. I built several gaming websites afterwards and continued to use simple HTML on a daily basis.

Datasets

Without knowing it, I was evaluating large datasets of player ratings in the games I was playing. Without a built-in way to update player ratings in Madden prior to the mid-2000s, the only way to get updated rosters was to “hack” the ratings files. I hardly assumed this was hacking, I was just trying to find a way to improve the games I was playing. I updated rosters and found different ways of distributing them to the online Madden community.

College

In 2003, I went to college and was sure that I would continue my background in computers by majoring in Computer Science. With my background as a young web developer and programmer, I breezed through the first two years in the CS program. The only problem was that the CS program was not allowing me to implement the advanced math that I also loved, specifically differential equations. I met with an advisor and they recommended looking at environmental engineering, as water treatment required a strong handle of differential equations to evaluate treatment technologies. I loved the coursework of environmental engineering and decided to change majors.

Post College

I came out of college in late 2008, right after the recession started. There were limited job prospects, so I searched everywhere. I found a great job at the United States Army Public Health Command, mostly completing compliance work. I left the Public Health Command in late 2013 to return closer to my home with Parsons Corporation continuing my compliance work. I have always enjoyed this work and the great people I have worked with. I am very fortunate to have such great work experiences.

Although the work atmospheres were always enjoyable, I was missing out on the advanced problem solving I enjoy so much. I found the solution to missing out on the advanced problem solving was through finding different methods of automating processes. Working as a Federal contractor, I was limited by the languages that I was able to use on my work computers. For most processes, I would have to find a way to make Visual Basic do most of the legwork. Visual Basic, for all its limitations, was similar enough to C++ that I was able to do some fairly powerful things. I was able to automate a majority of the routine tasks. One such task was copying and pasting tables from an excel spreadsheet into a template document. The implementation of this task would save me up to two hours on each report I wrote. With over thirty reports a year, two hours a report added up and was a small portion of the processes I automated at Parsons.

Ultimately, the desire to automate processes and programming was a bigger drive for me than the compliance work. I started taking several free online courses on web development, specifically with React, and data analysis. I became obsessed with solving problems through sites like HackerRank and CodeWars. I built several websites and completed this coursework in addition to a rigorous travel schedule and working a full-time job.

Driven by volunteering

In early 2019, I started volunteering at Code for Denver, part of the Code for America brigade. It was there that I found a project to volunteer for that would show me the power that I could have as a programmer with my knowledge of the environment. A member at Code for Denver had a brilliant idea to visualize water quality data throughout the United States under the title Water Beacon. I was extremely excited when he wanted me to help his project, and I filled the gap in environmental knowledge he needed to build the data sets. I created a psuedo-code equation that was translated into Python that would create a score for each FIP area in the United States. This data would drive our front-end visualization, which was being built on React and D3.js. With the equation built and the visualization ready to be implemented, I asked to be the one to build the D3.js visualization showing the data. Through several struggles, I finally was able to build a quality visualization that is really impactful. Since then, I have implemented D3.js in several other personal projects and consider myself a D3.js and React Hooks expert.

Building Green Owl Compliance

The Code for Denver work started to show me how impactful quality environmental software can change the world. After receiving encouragement from several other Code for Denver members, I was urged to build online environmental compliance software that could provide passive income. I spent months developing the web application, alongside a forum for other compliance auditors and a blog posting site. When ready to deploy, I was very proud of what I produced. I wanted to verify that I would not be infringing on any corporate responsibilities at Parsons through deploying the site and contacted the Parsons’ legal team. I received bad news that even though Parsons does not provide this software, there is potential they could bid on a project to build the software in the future and it would be a conflict of interest for me to deploy and monetize Green Owl Compliance while employed at Parsons.

At that point in time, I was faced with a difficult decision. Although I really loved working at Parsons, I was more interested in continuing to automate processes and build more powerful software programs. I felt it would be unfair for me to continue working at Parsons when my passion was elsewhere. I notified my managers that I would be leaving Parsons at the end of my contract, which was December 3, 2019. It was one of the most difficult decisions I have ever made in my life.

What is happening now?

I am pursuing programming as a career. Although I would love it if Green Owl Compliance was successful enough to support me and my family, it will be an extremely long road until that happens. I still consider this to be solely a passive income stream. I am looking to find a great team to work with and build awesome software. I am a very strong web developer using React and React Hooks, am great at writing problem-solving algorithms, and am a budding data analyst. I am extremely motivated and a quick learner, capable of picking up any new language, syntax, framework, or library.

React eCommerce Site: Hooks, Firebase, and AirBNB Linter

andersjr1984 — Thu, 19 Dec 2019 18:18:52 +0000

I posted a simple text tutorial a while ago on how to create an eCommerce site using React. The feedback was great and I had a lot of people asking me to do a video showing how to integrate hooks and detail how to keep the Firebase functions organized. I have started a video series going through how to build a simple eCommerce site that you can follow along with:

Video playlist:
https://www.youtube.com/playlist?list=PLZW2FMU7HD1HbKrMIYzsPIbjzpYlvSTm3

GitHub Repo:
https://github.com/andersjr1984/the-green-owl

Please let me know if the videos are helpful. I recorded them on my ultrawide monitor, thinking that they would allow people to see both the code screen and the site's render. All that did, though, was make the code look a little grainy. I may have to go back and redo everything on a smaller resolution display.

If you watch a video, thank you! Please let me know what kind of feedback you may have!

Why d3's geoContains function does not work with US county data.

andersjr1984 — Sun, 30 Jun 2019 03:41:42 +0000

This is using d3js.org's US json topography and d3 version 5.9.5. I have posted the solution to the gitHub repo for d3, I wanted to get this out to as many people as possible so no one has to waste time trying to figure it out.

So, I have an issue and a "hacked" solution that worked for me.

I have several (100) cities that I would like to color the county they are in based on a score that they are given in an array.

I call geoContains with the following parameters: geoContains(county, points). When mapped, several counties now "contain" New York City (pretty much the "rust belt" and along the northern border).

I dug through the code posted here and noticed the following issue when comparing it to Json topography data:

geoContains line 37: This is where the coordinates of the polygon are passed to the polygonContains (object.coordinates);

polygonContains line 2: This takes the length of the polygon array that was passed in (object.coordinates). For all polygons in the above-referenced Json file, the length of this array is 1 and it contains another array that has all the coordinates to create the polygon. This is where the error occurs.

I've gotten around this by passing the correct coordinates array into the polygonContains function rather than the array that holds the array or going through the geoContains function. It works beautifully.

I wanted to point this out as an issue and also give people the cause and eventual solution to the problem. I'm just a newb programmer (less than 6 months programming, self taught, and one week working in d3), so I am not sure if I am doing this correctly. I spent a lot of time combing the internet trying to figure out what was wrong, so I'm hoping the above helps someone else out.

Firestore Database Structure and Security:

andersjr1984 — Wed, 20 Mar 2019 16:26:52 +0000

This is a quick explanation on how I structured my NoSQL database in Firebase's Firestore in a way that allowed me to secure my user's data and not allow the user to change certain data in a simple photography commerce site. I am a newbie programmer, so Firebase's Firestore was a great solution for me due to its simplicity and the quality of documentation and YouTube tutorials. Speaking of YouTube tutorials, this is just scratching the surface of what Mr. Todd Kerpelman discusses in the YouTube series Get To Know Cloud Firestore. If you want a description on how a person who has been programming for three months utilized the videos to secure their database, read on! If you want a detailed discussion, view the videos because they rock.

For those of you who want to see the security rules in action, please visit Green Owl Photography.
For those of you who want to give me a job, please visit my Portfolio.

Data Structure
Firebase Security Rules and Testing (Super Awesome Stuff!)

Data Structure:

Firestore allows you to store a Collection on the root level, then Documents in each sub level. A document can either store an object or a Collection. This means that each odd node on your database is a collection and each even node is a document. Does that confuse you? If so, let me show you a simple get request that pulls from a User's collection, then checks the orderData subcollection.
After the first time you authenticate on my site, a Document is created under your specific User ID that is generated by the Firebase Auth system. I'll go ahead and show you what is created when an anonymous user logs in for the first time. The items that are in your cart are set in the "images" document and your "userInfo" is set with an empty object for previous orders and default address.
As you step through my site, you will be adding images, entering a shipping address (if you are following along, feel free to enter a fake shipping address, make me laugh), and creating an order. This is just a portfolio project, so it doesn't create an order, it just creates a random 5-digit order ID to simulate creating an order using the Pwinty API. All this data is stored in the CurrentOrder subcollection. There are a couple of documents that are created here, such as images (aka the cart), shipmentInfo (aka shipment information), and the orderData (aka where I store any returns from Firebase Functions or API call, like a pwintyId). Remember that orderData is only stored from Firebase Functions, that information will be important to remember when I get to security rules. Here is how the data structure looks when you are finished:
Once you "Promise You'll Pay", the relevant data for your order is sent to the Previous Order's page via Firebase Functions and Firebase Functions resets the Current Order information, which includes deleting the shipmentInfo and images portion of the db. The 5-digit order ID is used as the key for this document object. I'll let you take a look at the db data of previousOrders after I complete an order:
My app has a listener for previous orders that updates the state of the app's Account page on any update to a user's Previous Orders on the database. Here is the code and the Account page after completing this example order:
I hope this shows you how I structured my data. I will now be delving in how I secure this data!

Security Rules and rule testing:

Security rules are significantly more robust than what I present here. As I noted earlier, the Firestore Security Rules video is super rad and is a must view for any Firebase developer.
I'll start off by showing you all my security rules, then I will discuss each specific rule.
Lets start at the top and discuss the prices and skus. The price data and sku data are required to create any order, so we need to be able to read this information before the user logs in. This data is updated through Firebase Functions, so we don't want to allow the client to do any writes or updates. This is why we only allow reads. To make sure we can't update the prices, lets enter the simulator and see what happens when we simulate an update on the prices. We get a friendly "Simulated Write Denied" message, phewwwwww. We also want to make sure we can run a get command, so lets test that!
Lets think back to the PreviousOrders document we discussed earlier. Once a user is authenticated in our site, we create a blank previous order object for their account. As you see in the rules, we allow read and create, but all updating is done through Firebase Functions. Future versions of this site will likely move this to Firebase Functions, we don't want to give any leeway to the client to create a PreviousOrders object populated with fraudulent previous orders, but I wanted to keep it for this write-up. I have boxed the simulated userId, which I have also entered in the userId authenticate section.
Now lets look at the CurrentOrders/orderData. As I noted earlier, the orderData is information we receive from Firebase Functions API calls, such as the Pwinty Order Id. We don't want the client to be able to do anything but read this data. If you look at the fifth rule, though, it allows any read or write to any document in the CurrentOrder collection. What do you think will happen if we try to update the orderData? Let's run a quick update test to see.
Oh no! The user is allowed to update the orderData information. How can we fix that? By disallowing any writes on orderData. Lets look at it again after adjusting the rules. I have added line 14 to not allow any writes, as well as updated the wildcard in line 16 and boolean statement in line 17 to make sure that the orderData is not the document that is updated. Other orderData, such as shipmentInfo and images can still be created and updated in the client app. This still allows the client to read orderData.
We removed the wildcard in line 16, but we want to make sure shipmentInfo and Images can be created and updated. Lets run a test to make sure. Wahoo! It works.
And lets look at the Default Address to make sure the user can read, create, and update their default address.
Now we want to make sure mal1 can't access uid1's sweet data and lets use wildcards in the simulator!

That wraps up the simple security rules that I have created for my app. Thanks for stopping by!

React and Firebase eCommerce Site Walkthrough

andersjr1984 — Thu, 14 Mar 2019 22:45:21 +0000

eCommerce Site Walkthrough:

I posted a couple weeks ago with a simple shopping cart in React and Firebase. Since that time, I have been working at completing the site and now it is a mostly-functional photography commerce site. Instead of providing a tutorial, I thought it would be better to show you the path an item takes from being added to the cart, to being purchased, and finally creating a photo order utilizing Pwinty’s API along with all the relevant code. I’m still new to this, so if you have any comments or suggestions, please feel free to chime in on the discussion. The site is not complete yet and you will not be creating any actual orders, so please feel free to follow along with each step described below (and let me know if you hit any snags). For the newbie, like I am, this post will help you if you are trying to accomplish any of the following:

Pass state from child components to parent components
Authenticate users and save their state for subsequent login events.
Create a simple back-end database for a site using Firebase’s Firestore
Trigger back-end Firebase Functions on database updates
Choosing the right function to use

For those of you who want to see the cart in action before reading, please visit Green Owl Photography.
For those of you who want to give me a job, please visit my Portfolio.
If you are interested in the Shopping Cart Code, this is also posted on GitHub.
The Firebase Function that is called on any DB update can be seen here, it is long and heavily commented, so I didn’t want to break the flow and put it inside the walkthrough.

I don’t want to get into too many details on the Firebase Functions for creating a Pwinty Order, that deserves a post on it’s own. Once I have integrated Stripe payment into the sandbox, I’ll be making a whole post on using Firebase Functions to create the Pwinty order and process payment! If you want, you can go to my site and follow along with each list item and see if you can break something (if you do, please tell me).

To get yourself familiar with the structure of the project, there is a main app that acts as the store, an order processing page that guides you from login to payment, and all the pages necessary to get you to checkout. OrderProcessing.js and all the pages that route you to submission of your order are on GitHub.
Go to either Large Format or Small Format pages and add a couple items to your cart. This just updates a global state in the app that will be passed as a prop into the OrderProcessing.js file.
Go to the cart section of the page, this is where you will be asked to login. Choose the login method of your choice. If you want to learn about OAuth using Firebase, I recommend checking out Firebase’s YouTube video here. The code is super easy, see below!
Behind the scenes, the app is listening for the Authorization state to change. Once this happens, it updates the Firestore database with your cart information.
The first page you come to is the “Shopping Cart". Here you can choose the size, type, and quantity of the items you selected above. Each change is immediately sent to the DB for updating, it is kind of a waste, but I don’t think sending a little bit of text will ruin bandwidth. The inner workings of the shopping cart have a post on their own, with sharing of the state between the child components with their parents and grandparents. Because the shopping cart can go over the page, I have implemented a scroll lock on the single page scrolling that can be turned on by clicking inside the cart, and unlocked by clicking outside the cart.
Any changes to your cart will call the Firebase Function to see if anything needs to happen. If only images are added, removed, or adjusted, Firebase will not call any functions!
Once you have updated all your products, you are sent to a review order page that will let you go back to the cart, if necessary. This page also shares the subtotal of the items in your cart. Here is the render component:
Your next page will be where you add shipment details. The validation of the form is pretty rough, it only checks to see if the user left anything blank. I would likely spend more time bolstering that if I deploy this out of the sandbox. One cool thing I did is allow the user to update their “Default" address. I did this by sending a Boolean value that is true if you click the lower button to update default.
Once the DB sees that you have entered shipment information, it will create your Pwinty order. On the front-end, I will not let the client show the Payment page until the parent state receives your Pwinty Order ID. I had some pretty wild errors when I was moving too fast and sometimes it can take a couple of seconds to create your Pwinty order. The full code can be seen in the OrderProcessing.js file on GitHub.
Oh boy, now you are here. After a moment, the waiting on the clouds page should disappear and you should be seeing your Pwinty Order ID at the top of the page and a “Promise You’ll Pay" button. Once you click that button, your order is validated and the order is processed on Pwinty. This is where your images are sent to Pwinty, I don’t want to send images before this point because I don’t want to wreck Pwinty’s bandwidth.
Once I implement payment, I will only update the validation of your order once payment is verified on the back-end . Based on my uneducated opinion, updating and allowing for this item to be validated on the front end is asking for trouble.
For the purpose of this walkthrough, I have disabled the Pwinty function calls. I don’t need them to get mad at me for having (hopefully) hundreds of calls to their DB. Instead each order is returned with a random number for an order ID after a five-second timeout.
Now that you have completed your order, you are rerouted to the Review Orders page. If you wait a short minute, details of your order will be displayed.

React Shopping Cart Tutorial and Code

andersjr1984 — Tue, 26 Feb 2019 19:16:47 +0000

Edited to add demo of cart working upon request.

How I built a functional shopping cart:

TLDR: A react shopping cart! Code is on github here.

Shameless plug for my digital portfolio.

See cart in action (site under construction).

I know there are probably some easier ways to do things, but I couldn't find a shopping cart that just worked, so I decided to build my own. I am still really new to using React and programming in general, so any input or suggestions is greatly appreciated. This little project taught me a lot about callback functions, which are fun!

My app calls the shopping cart with a list of items the user has chosen, via an "Add to Cart" button with event handler.
I started with a stateless component which has a sole purpose to show my stateful components.
To display each item, ProductDisplay took in the list of items, then mapped them on another "Display" Component.
ProductDisplay has a state component that created a product list with default size, type, and quantity once mounted. This list will later be sent to checkout.
The Display component shows each image and gives you the opportunity to change the type of print, size of print, and quantity to order.
I created a size array and a type array to capture all the size and type options.
We will retrace to the callback functions in a moment, but I want to quickly show the selectors change event handler. Type selector just renders the type by iterating through the Type Array.
Do the above steps for any other options that require user input, such as size and options!
As you can see, this initiates the props.callback function, which sends the child's state data to the parent. Here is the parent, the Display component, callback function.
Another callback function, this time to ProductDisplay. Here is ProductDisplay's callback which updates the array that was created in step 4.

There you have it, if you do the above, you'll have a shopping cart. Feel free to steal my code and improve upon it. I'd also love to hear how you think it can be improved.

Firebase Functions: React users need to stop storing sensitive API keys in .env files!

andersjr1984 — Sat, 23 Feb 2019 00:37:34 +0000

This is a tutorial from my digital portfolio/blog. Please stop by and take a look, then criticize me in the comments. Haha.

Many of you are reading this because you are an awesome Front-End Developer with a sick idea, but don’t quite know how to secure some of the necessary API calls without a full back-end environment. You hop online and everyone is telling you to put your API keys in an .env file then blah blah blah and rest easy. Well, if you have sensitive API keys and you follow the .env advice, you are putting yourself at a high risk.

Here is why a .env file doesn’t protect you in production:
The background is that when React creates the production build, it jumbles everything up into a chunk.js file. If you have a react project with some API keys, do me a favor and go to the page, then inspect it using the DEV tools. Go to Sources, then go to the static folder, then go to the js folder. There is a weird filename that you probably don’t recognize that ends with chunk.js. Open that file up and copy the contents to a word processor (I tried searching in the inspect tool, but it was suuuuper slow). Go to your sacred .env file and copy one of your “secure” API keys, then jump back into your word processor. Try a find on your API key. What is that you say, your key is in this PUBLIC file?

Well, you have some work ahead of you, but fret not, you can use Google Firebase to act as a back-end server and save your back-end from API fraud and ending up like this guy. I’ll line out how I did it and if I can do it, you should be able to. You do need to be on the Blaze plan for this to work. If you make a lot of external API calls in a month, you could end up paying.

Start a Firebase account, then create a project for this little activity. I trust you can figure this out using google.
Install Firebase tools (npm install -g firebase-tools), login (firebase login) and initiate the functions while you are in your project's folder (firebase init functions). Follow the instructions.
Now you have a nifty little folder in your app that holds your functions and an index.js file that holds the first function you will be using. Just uncomment the helloWorld function! But ugh, what kind of weird language is that written in?
We are going to have to make this work in React. First off, you are going to have to make it an onCall function if you are using React and you can't send your response back using response.send. . . This needs a return:
Create a firebase.js file in your src directory. Secure the config information in your precious .env file so it provides a little difficulty to steal. And now you are thinking that I just told you that your API Keys need to be secure. The Firebase API is slightly different. If you are using secure API Keys, listen to this man on how to secure them!
Find an inconspicuous place in one of your exported components and create a variable that points to your firebase function. You can then call your function using this variable, then log the value to the console. The data comes in as an object, so you will have to dig one step deeper, into the 'data' key.
Push your functions to firebase using the command firebase deploy --only functions.
The results are in!
Firebase currently uses Node.js 6, which is a pain when trying to write async/await functions. These are typically much easier to understand than promise.then functions for many of the junior developers I talk to. Fortunately, you can make firebase accept Node.js 8 as its master opening your package.json file in your Functions folder and adding the following line:
Write your API function in the index.js of your Function folder: I'm not going to go through all the trials I had in writing my API call to Yelp. I'm just going to give you the code and you can reapply it to most API calls that use Headers. If you are a master at React API calls, you'll notice Authorization is in quotes. Took me a long time to figure that out. You'll see that my API call only returns tacos, that is because I think tacos are the only thing that are important. You'll have to adjust your req call to add additional variables.
What does the following line mean? functions.config().yelp.key calls your API key from the config file of your functions library. You save it by using your command prompt in the functions folder and typing firebase functions:config:set someservice.key="THE API KEY" someservice.id="THE CLIENT ID".
Get out your console.log hat and test stuff out till you get something similar to the following code to work. Also, aren't async/await functions beautiful.

I know, you are blown away and hungry for tacos. Feel free to comment or send me an e-mail or give me a job.

Most Loved React Site Features

andersjr1984 — Thu, 14 Feb 2019 17:19:17 +0000

Got a website you love going to? Tell me what your favorite site features are and why you keep going back! There are things I love about some sites that I have attempted to implement into my personal site and I always love finding more. Here are a few examples:

-AirBnb.com: The page greets you with a beautiful image that takes up the full screen. I wanted this for my home page. Getting the image to only show on my home page was a bit of a chore, but I figured it out because React is amazing.

-instacart.com: This goes along with my introductory banner. I love how the page scrolls right over the banner. This one was pretty simple!

-zillow.com: Embedded image opener. This is one that I wrote a tutorial for. I wanted to keep users on my site and expand images for their viewing pleasure. This one took a bit of logic for initial setup, but now that it is working, it would be very easy to recreate!

-React app's initial page: How they got the atom to rotate was brilliant and very simple to implement just using CSS! I wanted to add that to my site for a "Taco Locater" API example. Who doesn't love a spinning taco?

How I created my Zillow-like Image Display component in React.

andersjr1984 — Mon, 11 Feb 2019 21:30:02 +0000

This came from my digital portfolio, which you can check out here!

When building my inital portfolio, one of the most common comments I received was that it was a pain to be redirected away from my site when trying to view an image. I set out thinking about the problem in hopes of coming up with a solution, similar to what Zillow does when they open up images in the current display window. I think my solution is fairly simple and I'd love to present it to all my bestest dev friends. Of course this isn’t the exact process I took, there were several mistakes and some painful debugging, but it works now and this is how I would do it in the future! I know some of the code below will make some of you shudder, but it works and I want to hear why you shudder, please reply!

I want this functionality to be throughout the site and not restricted to any one page. The only thing I don’t want to show expanded is my banner. This is great because my pages are displayed through another component, my PageDisplay component. In my main App class, I put PageDisplay in it’s own div called “Content” and put an onClick event handler to run the showImage function. I’ll show you this code after step 2.
Below my PageDisplay call I put a new component call for an ImageDisplay component that will display if the App’s showImage state was true. I also made an onClick event handler for ImageDisplay to make it disappear. Hopefully any confusion will be alleviated with the code:
I then wrote the two event handlers, showImage and hideImage. Show image will only run when the tagName is an image and hideImage will reset the state back to it’s initial values along with changing the showImage bool value:
These functions needed to be binded to the App component and the new states had to be added to the constructor.
Now, I created the ImageDisplay component. This was very simple! In order to give the images a full-page black background, I had to place them in a container div, which I called imageContainer. I’ll give you the CSS in a second.
Then I wrote the CSS to make my images perty.
Then came the point I had reached a couple times before, only to realize I had made a mistake somewhere, testing. Only this time, something was different and it worked!

React Navigation Bar!

andersjr1984 — Fri, 08 Feb 2019 17:53:26 +0000

I started learning react about a week ago, taking a Code Academy course, so please be patient with my potentially very ugly code below. I recently finished working on my portfolio and one of the most exciting elements that I created is the navigation system. I developed the navigation method with little to no guide, just the knowledge that I gained from my Code Academy courses. I wanted to make an easy to follow guide so that people new to React can make their own navigation bar, just like me! The code may look ugly to the React pro out there, but I also want to hear critiques of my code, so please feel free to comment!

The first thing I did was create a static navigation bar with “Home”, “About Me”, and “Hobbies” in the main navigation list, then created a sub navigation list under “About Me” and “Hobbies”. This was simple HTML and CSS and there are about a million examples, so I will not be showing you my specific code. A good source on how to build a nav bar can be found at the w3schools.com website.
In the initiating ul tag I placed an event handler for an “onClick” event that sent you to the internal function this.handleClick.
I gave each clickable element a specific id that will later be evaluated to determine the page to show.
I wrote the handle click function to send that specific id as a property to the parent element, but only if the associated element had an id. I had to use e.target.id to pull this information. I think I should have used a value instead of id, but for some reason I couldn’t get this to work.
I created the constructor and binded the handleClick function. Still not sure why these steps are required, I’ll need to continue doing research.
I rendered the NavBar in the header of App.js, then assigned the function this.changePage on a click event.
I wrote the changePage function to take in a newPage element, then reset the page if the new page requested was different then the current page. I’ll show the code along with the constructor below.
I built the constructor and set the initial state to be the Home page, as well as binded the changePage function.
Below the header, I created a new element to hold the contents of my page. Inside of this element, I called a function that will display my page.
I built the PageDisplay function on several if-else statements. One for each page, but I will only show you a couple because it is a lot of the same code (again, I can probably clean this up with more than a week’s worth of experience).
I’d like to show you the whole code, but it is mostly straight forward, except what I did in the App component. Here is the App component for your viewing pleasure. Please let me know what you think!