React packages can add a lot of great functionality to an application. In this blogpost I am going to highlight some of the React packages I have discovered and implemented in my recent projects. Let’s take a look.

1. React Router

Documentation

Image for post
Image for post

React Router is a package every React developer needs in their toolbox. Router allows you to create custom routes within your react application to navigate to different components. It takes a second to understand the flow and how it operates but it is a must have!

2. React Scroll

Documentation


I am going to show you how you can achieve smooth scrolling in a very simple and fast way with the “react-scroll” package. This is especially useful when creating landing pages and trying to implement smooth scroll interactions. There is more to “react-scroll” than I will be showing so be sure to check out the docs to get the full scope of it.

First, as always we need to install the package

npm install react-scroll *OR* yarn add react-scroll

For a typical home page we can probably assume there will be a home, about, and contact section, so let’s build…


In my last post I covered a simple dark mode toggle with react and tailwind. The toggle was held in state and would reset to light mode upon refreshes and traveling to different routes; not very practical. We don’t want our user to have to continuously select dark mode as they travel through our site. A way we can work around this issue is creating a dark mode theme, stored in our localStorage object. localStorage persists through refreshes so the users’ preference will be maintained while they use the site. If you are at anytime feeling a little lost refer…


Image for post
Image for post

Disclaimer: If you haven’t heard of Tailwind CSS, or have but maybe haven’t experimented with it before; I would recommend checking out the docs. I will not be covering installation and set up of Tailwind so I advise referring to the docs to get set up first. I personally just started learning Tailwind and I think it is absolutely awesome, I recommend trying it out on your next project.

What is Tailwind CSS?

In short, tailwind is a utility-first css framework that allows you write ALL your css with inline styles. You never have to come up with different class names, have your css…


Image for post
Image for post

When applying to Frontend Developer positions, I have been trying to recognize trends and patterns in some of the job requirements/technologies they ask for. It can be overwhelming seeing the long list of frameworks and languages some postings require. I tried narrowing down a few reoccurring frameworks try to satisfy as many opportunities as possible. One term I noticed that was showing up repeatedly was GraphQL. I had seen it before but had never looked too far into it. …


I recently created a project where I had to query a API from a search bar. Building it out was very fun and the practice is quite common, which can only mean one thing: make a blog post on it. Let’s get into my step by step process of building it out.

The Form

Image for post
Image for post

You are going to wan’t to create a form with some sort of input for the user. I created a simple form with a textfield within it. I am using Material UI components. Styling and such here is in the eye of the beholder, the important part is…


I recently had to host a react app and have heard of so many people having issues with it thought I would share my experience with a super easy and quick way to host.

Surge.sh

Surge is a super quick and easy development software that you can host with for free, all from your CLI. To start deploying, first install surge.

npm install -g surge 

After installing surge you are going to want to prepare you project to deploy by running :

npm run build 

Which is built in script that basically packages all of your dependencies, a new folder “build”…


Image for post
Image for post
from ‘Bit.dev’

Last week I started writing about how JS is working under the hood by covering the concept of execution context. One component of execution context that I briefly mentioned is the ‘this’ keyword. This seems to be a concept that has confused many developers, myself included. I know myself as well as my cohort mates in bootcamp struggled to grasp the idea of it so I am going to shed some light on the subject. With this edition of ‘JS Under The Hood’ I will be covering ‘this’ and how it is used.

‘this’

In the simplest explanation possible, ‘this’ refers…


Image for post
Image for post

As I wen’t through my fellowship at Flatiron School, we covered Javascript in 3 weeks. 3 weeks from the fundamentals to the advanced concepts. Immediately after that we were already learning to use JavaScript libraries like React. This extremely fast pace didn’t leave us much time to sit on concepts and really learn the in’s and outs of JS. Since graduating I have been taking the time to learn the inner workings of JS, what’s going on under the hood. While I may know how to use JS and operate a complex JS library to build applications, I needed a…


Image for post
Image for post

In my last post I covered the useEffect Hook. I thought I would continue that theme and cover arguably the most common and important Hook introduced in 16.8, useState. I will touch upon the basics needed to implement the useState hook in your next React application!

useState

useState does just what you think it would: it allows functional components to use and manipulate state. Let’s take a look at an example. In a class component you would creating a state object like so:

With a functional component and useState, the syntax to create state looks a little different:

Here…

Lucas Leiberman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store