DEV Community: Raúl Sánchez

Named Imports/Exports for React Components

Raúl Sánchez — Fri, 30 Jul 2021 13:47:01 +0000

Why named imports/exports?

Easier to find references to components
Autocomplete
Prevents typos

What does a named import look like?

import { Counter } from './Counter';

What does a default import look like?

import Counter from './Counter';

How to export a connected component?

export const _Counter () => {
   ...
}

export const Counter = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
)(_Counter);

Destructuring with an alias

Raúl Sánchez — Thu, 18 Jun 2020 20:41:04 +0000

Short and simple.

 const bar = {
    x: 5,
 };

 const { x: foo } = bar;
 console.log(foo); // 5

This can be useful when you need to destructure a value that has a similar or same name as an existing variable. E.g.,

const cars = [{
   car: true,
   van: false,
   make: 'Honda',
   year: 2001,
   color: 'Red',
}, {
   car: true,
   van: false,
   make: 'Nissan',
   year: 2000,
   color: 'Blue',
}];

cars.map(car => {
   const { car: isCar } = car;
   console.log(isCar);
});

Advice for an introvert jr dev who wants to give talks at local meetups?

Raúl Sánchez — Sun, 09 Feb 2020 16:09:50 +0000

Two Projects That Helped Me Get My First Dev Job

Raúl Sánchez — Sun, 09 Feb 2020 16:00:03 +0000

RemoteInterns

Stack:

Frontend: React.js, Redux, & Styled-Components
Backend: MongoDB & Node.js

TryAdora

Stack:

Frontend: React.js, & Redux
Backend: MongoDB & Node.js

What I Learned

These projects taught me so much. It was the first time I built full-stack apps on my own. Throughout the projects I learned the importance of reading documentation. For example, when I started on RemoteInterns I had no idea how I was going to scrape sites like Angel.co and LinkedIn. Along the way I faced challenges that I felt were impossible for me a beginner to solve. One particular challenge that gave me immense happiness when I solved was figuring out the search mechanism the site was going to use. Another important thing I learned was that the more you practice the better you get. I know you hear this all the time, but really, practicing and coding everyday really made my React skills improve.

My Advice

Plan on adding projects to your resume that you know will be out of your comfort zone. This will push you to learn new technologies. Also, don't overlook the documentation. I know it's tempting to browse StackOverflow in hopes of finding the exact answer to your problem, but reading the documentation is not so bad, and is a skill within itself.

Please feel free to ask any questions. I know the it's a struggle to get that first job so keep on working hard.

Next.js and Styled-Components: style loading issue

Raúl Sánchez — Sun, 09 Feb 2020 15:29:49 +0000

Have you tried using Styled-Components with your Next.js app but can't get the styles to load properly? This is because the server-side rendering does not fetch the styles before rendering the page. The Styled-Components documentation mentions this very briefly and it is easy to miss. What we actually have to do is inject server-side rendered styles to the head so it can render the page and its styles correctly. Next.js has the exact file you'll need to make this possible. Within the Next.js Github repo you can find _document.js. Within your Next.js project inside the pages folder create a file called _document.js and copy and paste all the code from the _document.js from the Next.js Github repo. This should fix your problem. Remember to restart the server to apply all changes.

-__tests__
-components
-pages
   -_document.js
   -index.js
-public

Double Equals vs Triple Equals in JavaScript

Raúl Sánchez — Fri, 22 Mar 2019 04:31:05 +0000

Unlike other languages JavaScript has two ways to determine equalities. It can be rather confusing for people like myself who come from typed languages like Java or C++. My goal is to explain both == and === in a clear and concise manner through definition and examples.

TRIPE EQUALS (STRICT EQUALITY)

The triple equals compares the two values for equality. No extra work is done, it simply checks if the both values have the same type and if they do it then checks whether the two values are the same. If the types are not the same it returns false. If the the types are the same, but the values are different it returns false. Here are some examples:

7 === 7     //true
7 === '7'   // false

DOUBLE EQUALS (LOOSE EQUALITY)

The double equals comparison works by first converting the both values to a common type and then undergoing a strict comparison as === does. Let's look at an example to make the explanation a bit more comprehensible. The code below is comparing a Number and a String. The double equals comparison first converts both values to a common type (in this case a Number) and then runs a strict comparison (i.e., it checks if 17 and 17 are the same type and are equal which is true since in the previous step it converted both values to Number).

17 == '17' // true
17 == 17   // true

CLOSING

It's hard to forget the difference between the two. With that being said, I recommend you write code that allows you to use triple equals rather than double equals. Using double equals can cause unwanted conversions producing inaccurate results.