Learning the latest Frontend frameworks for free. Javascript, HTML, CSS and more!
React HOOKS!
React Hooks - USE REDUCER

Use reducer is part of the additional HOOKS api. It should be used when components have complex state logic that involves nested values or when the next state depends on the previous one.

React Hooks - changing themes through useContext

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree..

Quick Tips
Quick JS Tips - Tagged Template Literals

A tagged function allows to change the output of template literals.

Gatsby JS #1 - First Steps

Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Let's see how to start with it!

Gatsby JS #2 - Layout Component

This is the second video of the series about Gatsby.

Gatsby JS #3 - Querying the Filesystem with Graphql

This is where things are getting more insteresting. Let's see how to render information about our filesystem using graphql!

Gatsby JS #4 - Rendering Markdown Files

Let's render the markdown files in React using the gatsby-transformer-remark

Gatsby JS #5 - Graphql Schema Custom Props

Let's inject some custom props (the url slug) in our schema

Gatsby JS #6 - Templates for Markdown files

Now that we have slugs for each markdown file, it's time to create the templates to load them.

Gatsby JS #7 - Inject props into Markdown templates

Let's inject markdown data into our template!

React Libs
Recompose - React libs - Frontend Topics

Today we are going to see how to get rid of class based components using the Recompose lib.

React Patterns
React Custom Hooks - Frontend Topics

Building your own Hooks lets you extract component logic into reusable functions. The idea of this video, is to show how powerful custom hooks are, creating an usePagination hook.

React Hooks - useState and useEffect - Frontend Topics

After react's conf we're all pretty excited with the hooks API. Today we're going to see how to use the most basic ones, useState & useEffect.

React Children as Render Prop - Frontend Topics

Render prop is a common pattern for sharing logic. Last time we saw how to do it using named props. Today we'll see how to use the children as a render prop.

React Render Props - Frontend Topics

Render prop refers to a technique for sharing code between React components using a prop whose value is a function.

React HOC connect function - Frontend Topics

Following the HOC pattern, let's create a connect function to refactor two components which share the same logic for getting data from a DataSource.

React Higher Order Component (HOC) - Frontend Topics!

Higher-order component is a technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

React Composition & Specialization - Frontend Topics!

We're going to talk about the React composition model and why it is recommended to use composition instead of inheritance to reuse code.