Photo by Dave Phillips on Unsplash

In a previous post, I spoke about how I used to keep track of changes, and update components with said change. Here, I’ll dive a little deeper into what is going on behind my code.

So what is ? is similar to and in the sense that it runs after the first render and after each update. With each run, executes the function passed into it. Let’s take a look at this example:

const [logoColor, setLogoColor] = useState("#FEFEFE")const location = useLocation()useEffect(() => {    switch (location.pathname) {        case "/about":            setLogoColor("#636363")            return logoColor        default:            setLogoColor("#FEFEFE")

Photo by Ricardo Gomez Angel on Unsplash

What are SVGs? According to the MDN:

Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. As such, it’s a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

For my React portfolio, I decided to use SVGs for my logo instead of importing them as images to save memory. …


Photo by Crissy Jarvis on Unsplash

When I first started learning how to code, FizzBuzz was a mystery to me. But as I continue to practice coding, the problem has become as simple as 1 + 1 to me. I thought it would only be right to return to the new devs who come after me to walk through how I solved FizzBuzz.

You are given an integer (n). Print 1 to n, but if the current number is divisible by 3, print “Fizz.” If the current number is divisible by 5, print “Buzz.” If it is divisible by both 3 and 5, print “FizzBuzz.” …


Photo by Franki Chamaki on Unsplash

What is the difference between arrays vs objects? Both store a collection of data, but with a couple of differences.

Arrays

Arrays are a sort of object that are indexed in numerical order, starting at 0. Arrays are surrounded by square brackets.

[1, 2, 3]

Objects

Objects, or hashes, have key-value pairs. They are unordered, and are surrounded by curly brackets . Object keys are always strings.

{"zero": 0, "one": 1, "two": 2}

When should we use which?

It all depends on your data and what you’re doing with it. If the order of the data is constantly changing, having an array…


Photo by Annie Theby on Unsplash

This is a quick installation guide for Sass with React! After going through the install instructions on the Sass website, I was still not able to start using Sass with React. But then came Google to save the day! This is what worked for me:

// in the console, enter:
npm install node-sass — save
// double check that Sass was installed
sass — version
// then
npm i sass-loader@latest
// and restart the terminal!

That’s it! If you had the same problem as me, I hope this solution helped you as well!


Photo by Anne Nygård on Unsplash

With the addition of Hooks in React 16.8, we were blessed with the convenience of being able to use state and other React features without having to write a class, or converting our function components to class components. Instead, you can add state right into the function component! Let’s take a look at the examples shown on the docs.

Without Hooks

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

With Hooks

import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

We…


Photo by Dim Hou on Unsplash

React’s is a sort of helper component that helps us write less bug-prone code. It does not render visible UI, but runs checks on its descendents in development mode.

To usee , simply wrap your code in the component. In the example below, I’ve called in my file.

import React from 'react';import ReactDOM from 'react-dom';import Wrapper from './components/Wrapper';ReactDOM.render(    <React.StrictMode>        <Wrapper />    </React.StrictMode>,    document.getElementById('root'));

Now, my console will warn me if a component is not following some of the recommended practices, if I am using deprecated methods, or of any other potential risks.

is particularly useful in wrapping suspicious code blocks while debugging. The next time you are debugging in React, try it out!


Photo by marianne bos on Unsplash

React gives us and components, which both allow us to navigate through different routes. But what differentiates them from the anchor tag, and when should we use what?

Anchor

The traditional tag also allows to navigate through webpages, but refreshes the page each time. We specify the destination with the attribute.

Link

The component does not refresh the entire page — only specific components get re-rendered when it navigates to an existing route defined by the component.

Below is an example of both and .

import { Link } from 'react-router-dom';function MobileNavbar() {    return (

Photo by Franck on Unsplash

Psst, this is a continuation of my previous blog post, Invalid Authenticity Token.

JSON Web Tokens, or JWT, are a modern solution to transferring secure information between parties. Each token is signed using the unique identifier of the sender, cross-checking for any alterations.

JWT saved me from having to rewrite an entire frontend in Rails just to ensure user security. All I had to do was implement it with an expiration to guarantee further protection. Below, I’ll go through how I implemented the gem!

Installing

Installation is simple — just add to your Gemfile and run in…


Photo by Christopher Jolly on Unsplash

Psst! This blog is a continuation of Facing the CSS: Padding! Feel free to check it out if you haven’t yet.

Another week, another CSS lesson. This time around, I’ve been familiarizing myself with the property. What is ? Let’s look to our lord and savior, W3 Schools, for some guidance.

The property specifies the display behavior (the type of rendering box) of an element.

To start using the property, we would use the syntax:

css selector {
display: value;
}

Here are some of the popular values and their examples below:

none

The value completely removes…

Chindalath Traymany

Laotian-American woman pursuing my passion for mentally stimulating and complex problem-solving through programming.

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