Forem: Daniel Pescador

What level of React are you in?

Daniel Pescador — Tue, 24 May 2022 05:23:49 +0000

Hey there!

I was trying to figure out where do I stand from a React learning perspective? to set my next learning goal. But I couldn't find anything specific to where to draw the line between a beginner, intermediate and an advanced React developer.

So, I made a list of topics related to React and some other stuff I'd like to learn, then grouped them into those three categories. These topics are not 100% React. Those fall into foundation topics that you need or libraries/tools that you will face at any point in your career.

For the grouping part, I thought: "If I wanted to learn from scratch React today, what would be the order I'd need them?" With that in mind, this is the list I came up with:

Beginner:

Basic HTML and CSS knowledge
CRA setup
Basic JSX syntax
Component creation (functional and class components)
Props and Children
State (useState and useEffect hooks)
Conditional render
Router

Intermediate:

Lifecycle methods
Error boundary
Using one state management library (Context, Redux, Zustand, etc.)
More state (useMemo and useCallback hooks)
Controlled and Uncontrolled components
Typescript
Testing components (React Testing Library, Jest or both)
Adding a CSS Framework (TailwindCSS)
Customizing component styles (SASS, Styled-Components or JSS)
Bundler configuration (Webpack)

Advance:

Create your custom hooks
Storybook
React Suspense and Lazy
Mocking services for tests purposes (like overwriting the render to add a ThemeProvider - React Testing Library)
Server-side rendering
Rewiring React
Frameworks like NextJS or Gatsby
Creating your own component's library

After creating this initial list, I gave them a score. Mostly because their learning difficulty is different. It's not the same to learn how to pass props to a component, as learning how to implement Redux! Also because I thought it would be cool to have a small app that will do this for us! And that's how I ended up creating this!

React Knowledge Check

Please, be aware that this list comes from my own experience working on different companies as a React developer, and is probably (if not extremely) incomplete. If you guys have any suggestions, let me know what topics you'd like to see reflected in the list.

What was purpose of this, again? right! the goal:

It's going to be Suspense and Lazy!

Creating an expandable profile card

Daniel Pescador — Sat, 14 May 2022 05:15:50 +0000

Hey there!

Last month, I was assigned to create an expandable component at work, something that could be repeatable, and it should show/hide more data on click. Something easy to achieve by using hooks, the old show and hide game! But, my inner designer couldn't resist the temptation of animating it. And now, I'll just show you how the results!

Design by Thremulant

Let's begin!

The first step is the setup. This is the stack I used:

Create-React-App
Typescript
TailwindCSS
Framer-Motion (Animations)
Poppins Font

Highlighted code

The component is not complicated, although there are some parts that need to be clarified:

The AnimatePrescence it's wrapping only the bottom content of the card. The reason is that those are the only pieces that are unmounted.
Components like this one, are the reason why I prefer to use await instead of using then. Nesting all the animations will be a living hell!!

   await bottomTexts.start("close");
   await bottomButtons.start("close");
   await bottomContainerControls.start("close");

There are timeouts in the open and close functions. The reason is to avoid some animation issues while changing the flex-direction. Without them, the image's width will only grow to a third of the card, stop, and then re-start the animation to get the full width.

The result

Here's the full solution. Feel free to fork and work on it!

What's an acceptable time to develop a landing page in React?

Daniel Pescador — Sun, 01 May 2022 05:16:04 +0000