DEV Community: bfemeng

Benefits of React JS

bfemeng — Tue, 14 Jun 2022 19:06:39 +0000

I'm going to be transparent here. I have had some difficulty executing a React App. I do fine with understanding it (or so I think) but when it comes time to apply the knowledge I hit wall after wall. This caused me to alter my way of thinking and how I approach the library. React is convenient, powerful and has many valuable uses. Even as a code newbie that is easy to decipher. This blog will focus on what I believe to be some of it's more advantageous aspects.

What is React?

React.js was released by a software engineer working for Facebook – Jordane Walke in 2011. React is a JavaScript library focused on creating declarative user interfaces (UIs) using a component-based concept. It’s used for handling the view layer and can be used for web and mobile apps. React’s main goal is to be extensive, fast, declarative, flexible, and simple.
React is not a framework, it is specifically a library. The explanation for this is that React only deals with rendering UIs and reserves many things at the discretion of individual projects. The standard set of tools for creating an application using ReactJS is frequently called the stack.

React Benefits

It's popular
Component-Based
Create React App
Documentation

It's Popular

JSX or Javascript HTML is a syntax extension of Javascript. When developers use JSX they do not have to separately code HTML and JS. The declarative HTML syntax allows the browser to HTML documents to display the UI. JSX is also not limited to React.
Being free and open source React is maintained by Meta (formerly Facebook) and many individual developers and companies. This means it is being actively maintained and grows as technology evolves. The sheer volume of developers using the library also almost guarantees you will have many resources available to discuss code and best practices.
Usage. React consistently ranks as the most used library among developers worldwide.

Clocking in at 190K Github stars React's github ranking is easily ranked in the top 10.

Component-Based

According to W3Schools:

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. The minimum requirement for a React component is that it must be a function that starts with a capital letter and returns JSX.

The React website proclaims:

A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

Introduced in ES6 the arrow function is allows function components to be introduced in that syntax.

React Components allow users to take in an input and return a React element that is rendered on the screen. For example we can create a Car.js file.

Now we import the file so the Car component can be used throughout the application.

Your project can present more consistently and are easier to maintain when you apply components. Having your project split into components also makes it easier to find and test bugs saving time.

Create React App

In our current society who doesn't like speed?
Running this one simple command allows you to focus on building your project. One build dependency, automatically optimized bundles, and the option to "eject" from Create React App to edit the config files directly are a major benefit of React JS. Some of the key commands with Create React App are listed below.

Documentation

Some may view the documentation as a disadvantage of React because the library is updated so often. However, using React means you will have a good amount of quality documentation to refer to. When visiting the website you can jump right in with "Get Started"
or you have the option to "Take The Tutorial".

Searching the documentation allows you to touch on many aspects such as Events, Forms, Lists nd Keys, and even how to think in React. Hooks has it's own section and is very detailed in presentation. One of the most essential pieces of React is the State hook and developers can find great information on it in the Hooks section. If you have a concern or issue you can also "raise an issue" to have that concern addressed.

Conclusion

In Conclusion, React JS has many benefits to modern developers. Taking the time to learn the ins and outs of this dynamic library will add a nice feather in your cap. It's popularity, components-based approach, speedy easy to use Create React App feature, and consistent documentation all contribute to why it's the library of choice for many developers.

So you want to be a Software Engineer...

bfemeng — Sun, 23 Jan 2022 05:45:07 +0000

Why, yes, yes I do.

However, it's been a long road to reach this apex where I BELIEVE I can be one.

I graduated high school in 1999. For a Black girl who had never seen a Black woman in her family graduate college becoming a software engineer was basically like walking to Australia. Impossible. Back then there weren't coding bootcamps, Google wasn't what it is today, YouTube didn’t exist, phones were not tiny computers that gave you access to infinite information, and frankly my high school academic career wasn't the best. I was barely a B student. Not to mention I had never ever met a Black woman in the Tech field. So, yes, at that time it didn’t even seem like anything remotely attainable.

I did a brief stint in the Army. I was injured and that ended that career path. I ended up going to college and studied Sociology and Psychology. It was during a senior Sociology course that a professor told me that I needed to attend Graduate school. She said based off my coursework and my senior project I’d make an excellent candidate. The thought had never crossed my mind. Me? A graduate student? How is that possible when I had never seen it before? Again, not a single Black woman at that point in my life had been the recipient of a graduate degree. I loved learning. I loved college. I thrived in the higher education environment. It was the complete opposite of my 12th grade and under education. School didn’t feel like a job or a chore. I considered what the professor told me and went for it.

I will be the 1st to admit.

I despised graduate level courses. There was so much writing. It did feel like a chore but I graduated with a Master’s degree in Public Administration. During both my undergraduate and graduate programs, I worked in Early Childcare. I loved the 4 year old age. Those children made my day and by Monday morning I missed them. I enjoyed the work but knew it wasn’t anything I’d pursue as a long-term career. I married someone just shy of my undergraduate graduation. He joined the Air Force shortly after we were married. We went on a journey moving from Charlotte, NC to California where he was stationed for his 1st assignment. Sacrifices were made and I thought we had a great life. Unfortunately, he did not agree because I found out 2 years into our marriage that he had a child with someone else during our marriage. After that marriage ended, I moved to the DC area. I worked for the Department of Defense coordinating educational programs. It was work, it paid the bills, but I felt unfulfilled.

Fast forward to 2015. An old friend from middle school urged me to move to Florida. I felt like at that point I had nothing to lose. It was just my dog, and I, freezing most of the year. I moved to Florida...

...and the old friend became my husband a couple years later.

I found a position at one of the top 4 financial services firms in the world shortly after the move to Florida and felt like I had finally found a career that didn’t feel like a burden. 30 days after my husband and I were married he collapsed on the way to work in our bedroom floor. At 37 years old he ended up suffering 2 strokes within 2 days. He lost the ability to talk, walk, use his right hand, and even at times he didn’t know who I was or where he was. I inherited 3 stepchildren when my husband and I married. His daughter was 9 years old and her sole responsibility fell on me overnight. My husband lived in a rehab facility for a month. During that time, he regained most of his ability to walk and talk. It was discovered that he had a hole in his heart as well, so he ended up having heart surgery shortly after he returned home from the rehab facility. During this time my current employer was so caring and unbelievably supportive. I had worked from home since I started working there but that flexibility was vital once he was home. I was his full-time live-in nurse and a full-time mother to his daughter. He couldn’t drive so everything fell on me. He is an Army Veteran and I cannot say enough for how the VA provided top notch care for him since his strokes. He is disabled and unfortunately will never be able to work again but he lives a good life despite the deficits he faces every day.

We welcomed our son in 2019.

Then our daughter in 2020.

So, at the time of writing this I am now 40 years old with a 1 year old and a 2 year old.

I am the busiest I have ever been in my life. I am still working from home for the same financial services firm, I care for 2 toddlers that are the light of my life but run me to sheer exhaustion, and I am still responsible in many ways for my husband. He is capable of doing things, but he still needs help (even if he doesn’t think so).
A few months ago after the kids went to bed and all was quiet I was following some tech news as I often do. I saw an article about Flatiron School and how they can take a person with no experience and turn them into a Software Engineer. After doing some research I went to their website and decided to apply because what could it hurt? They may deny me. I may bomb the admissions test, but I can know I tried.
A few days later I received the shocking news that I not only did well on the test but that I also did very well. Even more shocking was when I was offered a slot as a student that could start as soon as that month. I could not believe it. Me? Potentially a Software Engineer! I wasn’t swayed I could do it. Who was I to think a busy mom of 2 toddlers at 40 years of age who works full time can possibly succeed in a program like this? I needed another sign that enrolling was the right move to follow. I applied for their Women In Tech scholarship and actually was granted a few thousand dollars to go towards tuition. I was really stunned at this point but I knew this was my path. No matter how hard or impossible it seemed. I didn’t know where I would find the time but I figured this was my sign to go after my dream. The idea that I would be making room in a space where Black women are severely underrepresented wasn’t lost on me either. Black women make up only 3% of Software Engineers. 3%. That stat was not lost on me. If I was going to pursue this the odds were going to be wildly stacked against me. On the flip side if I did this and actually succeeded I would make it so another Black girl starting out could say "Hey, She is a Software Engineer. Maybe I can pick her brain about how I can become one too". With that, my decision was concrete.

I considered the self-taught route, but I knew I wouldn’t follow through. I knew I needed deadlines with a set curriculum and an instructor to ask questions when I was stuck. Flatiron also offers Technical Coaches so you can reach out until midnight if you need help.

It has been one of the single handedly most difficult subjects I’ve ever had to learn. I started in November 2021 and it is now January 2022. I have submitted my first project. The material does make sense now in a way it did not just a month ago. I try and code every single day yet I have to be honest. Some nights I am utterly defeated by the time my kids go to bed lol. I’ve found I do not code well when I am exhausted. I am mostly doing well according to the feedback from my instructor, but I struggle tremendously with Live Coding. I receive a problem and I struggle with where to start. I am hopeful that will improve with time. On my LinkedIn an alumnus from Flatiron told me “keep your legs going and your brain will catch up”. So I am doing just that. I have a long road ahead until I can say I am a Software Engineer. I will blog my journey so I can one day look back and say, “remember when...".

Newbie Simple Web App Project

bfemeng — Sun, 16 Jan 2022 04:36:25 +0000

When I first began brainstorming for my Phase 1 Project at Flatiron School I knew my ideas were more advanced than my skills. I realized almost immediately that I would have to scale back my process to fit my skill set. What I didn’t know is I knew more than what I gave myself credit for. Imposter syndrome was very heavily present in my thoughts as I realized I had no idea how to build a web app from scratch.
This lead me to restructure my program around something I would like to find useful. I have been a TV and cinema fan for as long as I can remember. I even took a few college courses geared towards the field when I was in my undergraduate program at UNC Charlotte. I figured I would build an app that would allow you to search for a tv show. I chose this specifically because I cannot recall how may times I’ve heard someone say “I can’t remember the show name but it had the word ____ in the title”. That is how “TV Information Base” was born.
After building the necessary files in Visual Studio Code I realized I had no idea how to begin. This had been the bane of my existence since beginning at Flatiron. I read through the material, feel like I have a grasp of the ask, and boom! I have no idea where to begin. I have since realized that you just have to start. It doesn’t have to be pretty. It doesn’t have to be extremely long or drawn out. It doesn’t even have to be right! Just start. I knew I needed a main page, a home page, and to be able to search for the tv show. That is how I built my 3 const.

Then I proceeded to build my function to search the show. After researching public API’s TV Maze seemed to be the best choice to build my project. A list for the results would be easy to read and bullet points break up the information. After fetching the URL I made a new const that would produce the list that I needed to display on the screen. The term iterate was not a foreign term before entering the Software Engineering program. However, it was lost on me for much of the beginning of Phase 1. For some reason I could not quite understand it but after building the app I understand what it means to “iterate through the results”. Doing so and using forEach allowed the results to be shown in the way I wanted them to. According to MDN Web Docs, “The forEach() method executes a provided function once for each array element.”.

Once that was complete I created a button that would allow users to click on it to show they have watched a particular show in the search results list. This button also have an event listener that would alert them with a message. That message was a simple “You’ve seen this before”. Adding some level of interactivity aside from entering a search parameter was a feature I added later after having further thoughts on the length of my project. It was a stretch goal as I had no clue how to add the feature. It turned out adding the code in wasn’t too far off from what I entered. I reached out for assistance and realized I didn’t pass in “button” to appendChild. Once, I did that the page my stretch goal was accomplished.

The rest of the code involved hiding the search list once the page was reset from clicking on “TV Information Base”, resetting the search form, hiding the “Watched” button once the page is reset, and having a home page set.

My favorite part of the project was being creative with the HTML and CSS. I found a few gifs from some of my favorite shows and added them onto the left side of the screen. Later on I may try and move the images around and add more images.

Although the Web app is not the most detailed project I’ve seen. I am proud of what I built. It is a fully functioning web app that I constructed 100% from my own work. I had help along the way from my instructors, but I had to put in the work and not be afraid to seek help. Asking for help seems like such an easy concept to reach but it can be very difficult when you want to figure things out on your own. I am excited to see how I can build onto the concepts from Phase 1 as we head into Phase 2.