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” that contains your project ready to deploy will show up in your project directory. …


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 to the object executing the current function(execution context). Let’s look at some examples to make this clearer. …


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 better foundation of the basics and an understanding of what is going on behind the magic of Javascript. As I go through these concepts I will be sharing them in a series, “JS Under The Hood”. …


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 we are creating our state variable “message”, and also establishing a function responsible for changing/setting state which I am calling “setMessage”. useState takes in one argument and that is the initial state value(“hello”). In all, we have created a state variable of message with an initial message of “hello”, and are able to change this message with the setMessage function. …


Image for post
Image for post

In React 16.8, Hooks were introduced to functional components to allow them to maintain state and other React features. Functional components can now utilize the logic previously restricted to class components making them very dynamic. Since their introduction, Hooks have become widely adopted as they leverage more control, with less code. If you want to dive into a detailed overview on Hooks see here. In this article I will be going over one of the React hooks that I have recently been experimenting with: useEffect.

useEffect

If you have been using class components when building your react applications, I’m sure you have used lifecycle methods before such as componentDidMount or componentDidUpdate to perform side effects like fetching to API’s and such. If you are not familiar with lifecycle methods just know that they are different functions available to use at different times during a components’ lifecycle. With the introduction of useEffect, it can perform all these lifecycle duties with more control, and less lines of code. …


I graduate from Flatiron school in a week and thought I would share a few tips with people that are embarking on their bootcamp journey.

Image for post
Image for post
  1. You are going to probably going to feel dumb…and thats OK.

During my bootcamp experience at Flatiron school(3.5 month program) more often then not I felt like I didn’t understand the material. I would get frustrated easily when code wouldn’t work and it would stress me out. When you are in the moment it’s hard not to feel incompetent and frustrated, but I’m telling you if you can understand that this feeling is normal and happens to everyone learning to code(besides geniuses), the better off you will be. It will save you stress, time, and it will help you problem solve more efficiently. You have to be comfortable with feeling like you know nothing because you are going to feel that way quite often. Then, finally, something starts clicking and then another thing and you feel like you are grasping it and then BOOM… you are just as confused as you were a day ago when the teacher introduces something new. …


Active model serializers are a super important feature when retrieving data from your rails backend. They allow you to specify and customize the data from your models. You can explicitly express attributes and relationship data through your serializers which is extremely useful. In this blog I am going to show you an example of working with serializers to extract data from the backend.

Image for post
Image for post

Here is an example of a serializer for an event model. As you can see I list out the attributes that I will be using on the front side of the application.


If you are new to learning React, you may have become a little confused seeing react components written in multiple ways. There is a lot of pieces that put together a functional react application. When learning a new library or framework, seeing things written in different ways can just add to the confusion you are already trying to eradicate. For me, I kept seeing components written in two different ways, sometimes I saw class declaration components, and other times I saw components written like functions. It wasn’t for a few days that I understood the nuances between class components and functional components, and when you might want to use one over the other. …


Image for post
Image for post

Have you ever wondered how people make those fake celebrity tweets you see all over the internet? I know I have. I always imagined you had to be a photoshop magician of sorts but it turns out, you don’t. With a little but of HTML knowledge and DOM manipulation, the world of memes can be at your finger tips. I recently began learning the nuances of manipulating the DOM, so I thought I would share the interesting and fun concept of creating fake tweets.

What is the DOM?

The DOM or Document Object Model, is an interface for HTML and XML documents. It displays the page in a way so that programmers can use languages like Javascript to modify the style, structure, and even the content of the page; hence our topic of fake tweets. You don’t have to be an outstanding developer to access and manipulate the DOM, just follow these simple…


Image for post
Image for post

A popular mantra when learning Ruby is to be D.R.Y(Don’t Repeat Yourself), we do this in order to avoid looking like our friend Clint Eastwood up above. When building up a Rails application, you find yourself repeating code statements often; especially in your model controllers. Let’s take a look at a few CRUD actions in a controller for a post model within a blog application :

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