DEV Community: Elizabeth Alcalá

React 19: Everything you need to know.

Elizabeth Alcalá — Sat, 29 Mar 2025 02:31:10 +0000

React 19 has been out for a while, and it brings with it a host of new features and improvements that promise to enhance developer experience and application performance. Many of these features have been present in other frameworks, but their integration into React provides new tools for building dynamic and performant applications. Here’s everything you need to know about React 19.

Key Features in React 19

1. Async Functions in Transitions

React 19 introduces support for asynchronous functions in transitions, allowing developers to manage complex state changes and UI updates more fluidly. This is especially useful when dealing with data fetching or animations that depend on external responses.

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();

const handleClick = async () => {
  startTransition(async () => {
    const data = await fetchData();
    setState(data);
  });
};

2. `useTransition` Hook

The useTransition hook has been enhanced to support async transitions. If there are multiple ongoing transitions, React will batch them and only display the final result. This reduces unnecessary renders and improves performance.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setState(newState);
});

3. Actions and `useActionState`

Functions that trigger transitions are called actions. These actions work closely with new hooks like useActionStateand useFormStatus, enabling developers to track the state of async operations. For example, useActionState provides feedback on whether an action is pending, completed, or encountered an error.

import { useActionState } from 'react';

const [state, formAction] = useActionState(async (prevState, formData) => {
  return await submitForm(formData);
}, initialState);

4. Optimistic UI with `useOptimistic`

Actions in React 19 trigger transitions that are asynchronous by nature. However, optimistic updates are synchronous, meaning the UI reflects changes immediately. The useOptimistic hook is designed to help developers create snappy and responsive user interfaces by showing expected outcomes before async actions complete.

const [optimisticState, addOptimistic] = useOptimistic(state);

const handleClick = () => {
  addOptimistic(prev => [...prev, newItem]);
};

5. React Server Components (RSC)

Traditionally, React components were either rendered on the client or the server, using SSR (Server Side Rendering) or CSR (Client Side Rendering). RSC offers a new approach by allowing components to be partially rendered on the server and then hydrated on the client. This leads to faster load times and better SEO.

6. The `use` API

The new use API in React 19 allows developers to handle asynchronous resources—like Promises or Contexts—more seamlessly, especially in Server Components. However, there’s an important distinction: while the use() function is powerful and simplifies async handling, it is currently only supported in Server Components. Attempting to use it inside a Client Component will result in an error.

const data = use(fetchData());

7. Server Actions

Server actions enable developers to offload specific logic to the server without leaving the React ecosystem. This is especially beneficial for operations like data fetching, authentication, or complex processing tasks that might affect the client’s performance.

8. `ref` as a Prop

React 19 introduces the ability to pass ref as a prop, streamlining the process of accessing component instances or DOM nodes. This enhancement makes it easier to handle scenarios like focus management, animations, or third-party library integrations.

import { useRef } from 'react';

function FancyInput({ ref }: { ref: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} />;
}

export default function RefExample() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </div>
  );
}

9. Native Metadata Management

React now supports native document metadata management, eliminating the need for third-party libraries or custom solutions for setting page titles, descriptions, and other meta tags dynamically.

export default function MetadataExample() {
  const post = {
  title: 'Understanding React 19 Metadata',
  description: 'Learn how to manage document metadata with React 19 natively.',
  };

  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
    </article>
  );

10. Stylesheet Support and Preloading APIs

The new stylesheet support in React 19 provides an improved way to handle CSS in applications. Additionally, preloading APIs enhance the ability to manage resource loading, improving performance and reducing the time to first paint.

export default function StylesheetExample() {
  return (
    <div>
      <link
        rel="preload"
        as="style"
        href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
      />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
      />
      <style>{`
        .roboto-mono {
          font-family: 'Roboto Mono', monospace;
        }
      `}</style>
      <p className="roboto-mono">
        This paragraph uses <strong>Roboto Mono</strong>, a monospaced font loaded natively in React 19.
      </p>
    </div>
  );
}

Conclusion

React 19 is a substantial update that not only introduces new features but also refines existing patterns to make development smoother and more efficient.

If you’d like to see these features in action, you can check out my GitHub repo with practical examples:

👉 react19-examples

Create your own blog with Anima and Contentful CMS.

Elizabeth Alcalá — Mon, 01 Aug 2022 14:31:55 +0000

In this tutorial, we are going to build a completely functional blog using Anima’s plugin for Figma and Contentful CMS for dynamic content.

Before Starting

Sign up to Anima
Install the plugin for Figma
Create your first Anima Project on the platform.

Get the code from the design.

With Anima, we can build complete reusable React components from a Figma design. For this tutorial we are going to use this
blog template

Open the Anima Plugin in Figma. Notice that if you create a project before it should be listed here.

Select Preview. You will see this popup window when you can check the responsiveness of this template.

Select the Get Code option and choose React. Anima will generate from this design, a full list of React components.

This process can take a few minutes, but when it is completed successfully, it will open our project in the Anima platform.

As you can see, Anima is generating functional React code for any component you select. You also have the option to change the view to desktop and tablet.

For this tutorial, we will only be working with one breakpoint screen, in this case, the 1440 px screen homepage light. You can navigate to this screen by clicking the dropdown menu in the upper left corner of the platform.

Select Export Code. You will see three different options, select Current Screen and click Download screen as ZIP. Make sure the chosen framework is React.

This will generate a zip file with the codebase ready to open and use in our IDE.

Anima uses Parcel to compile our jsx files, so when your download is ready you just need to install the dependencies with npm install and then run npm start .

If you navigate to http://localhost:1234 our Anima project should be up and running.

Let’s create content in Contentful

Now that we have our blog running is time to create some content for it.

Create an account in Contentful to start.

When we enter the Contentful platform the first thing we need to do is create a new content type, in this case, a new article.

Select Content Model in the navigation and then click on Add content type.

After clicking create it will navigate to our content type settings for adding new fields.

If we review the design we notice that our article has an image, a title, a description, and some other fields. We need to create all of them and select the correct type for each.

After you finish creating all the fields, you should have something similar to this.

Click Save and we will have our content type ready to create new articles.

Navigate to Content and select Add Article. Now it’s time to fill up our first article.

Integrate Contentful CMS for dynamic content.

Now that we have some articles created and our React project, it’s time to integrate both to have a completely functional blog with dynamic content.

Let’s create a new .env file at the root of our project to store the contentful keys we will need. You can find your keys on Settings > Api Keys.

CONTENTFUL_APIKEY=m1rONtlZ5DmnwJ5czTy_M3m-n4YAzN7HRehGsu7pDYs
CONTENTFUL_SPACEID=8msh4brl5s3a

We also need to install the contentful dependency npm install contentful

Let’s use a hook to get a list of articles from contentful. Create a new services folder and then create a use-articles.jsx file.

import { useEffect, useState } from "react";
import * as contentful from "contentful";

export const useGetArticles = () => {
  const [client, setClient] = useState(null);
  const [articles, setArticles] = useState([]);

  const getArticles = async () => {
    const response = await client.getEntries({
      content_type: "article",
    });

    const articlesResponse = response.items.map((c) => c.fields);

    setArticles(articlesResponse);
  };

  const initializeClient = () => {
    const contentfulClient = contentful.createClient({
      space: process.env.CONTENTFUL_SPACEID,
      accessToken: process.env.CONTENTFUL_APIKEY,
    });

    setClient(contentfulClient);
  };

  useEffect(() => {
    if (!client) {
      initializeClient();
    } else {
      getArticles();
    }
  }, [client]);

  return {
    articles,
  };
};

We are using the Content Delivery Api to get our articles.

Remember to use the correct content_type to get the entries, in this case, it is article.

Now that we have a service to get our articles we need to pass it to our components. there are some small tweaks we need to do in the code. Follow the repo for a guide. It’s basically cleaning some parts and passing the props properly.

It’s time to deploy.

We are going to use Vercel to deploy our blog.

We have to previously push our code in GitHub, and grant access to Vercel.
After that, you will see the project listed.

Select Import.

Before deploying make sure to add the environment variables that we previously set on development.

Now you can deploy the app.

Boost your productivity with apollo hooks and typescript.

Elizabeth Alcalá — Sat, 27 Jun 2020 00:42:48 +0000

In a world where Typescript is becoming an essential part (almost required) of many web applications, it's very useful to know how to use it with the many libraries that are in our current stack.

If you work on a React app which already uses Typescript, and you also use Apollo, this guide will help to start using Typescript with it, to take advantage of the beautiful work of static typing.

Start our project.

Let's configure apollo in our new app.

yarn add apollo-boost @apollo/react-hooks apollo

Now let's create our Apollo client and use it with the React application.

On the App.tsx add the following code.

import React from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
import './App.css';

const client = new ApolloClient({
  uri: 'https://rickandmortyapi.com/graphql',
});

function App() {
  return (
    <ApolloProvider client={client}>
      <h1>
        Rick and Morty App
      </h1>
    </ApolloProvider>
  );
}

export default App;

Write some queries.

Now that we configured Apollo in our app, let's write some queries to get the data from the API.

Let's create a new file called queries.ts on the root of the project and add our first query to get the characters.

import { gql } from 'apollo-boost';

export const CHARACTERS_QUERY = gql`
  query charactersQuery(
    $page: Int,
    $name: String,
    $status: String,
    $species: String,
    $type: String,
    $gender: String
  ) {
    characters(
      page: $page,
      filter: {
        name: $name,
        status: $status,
        species: $species,
        type: $type,
        gender: $gender
      }) 
    {
      info {
        count
        pages
        next
        prev
      }
      results {
        id
        name
        status
        species
        type
        gender
        image
      }
    }
  }
`;

The query above has some variables to filter the characters and to paginate the list, look the fields inside results, those fields are the one who belongs to the character, there are a few more, but those are most relevant for now.

Now, create a new filled called Characters.tsx, this is where we will use the query and make the request.

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import { CHARACTERS_QUERY } from './queries'

const Characters = () => {
  const { data } = useQuery(CHARACTERS_QUERY);

  return (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  )
}

export default Characters;

Let's break down this to understand it better.

useQuery According to Apollo documentation, this is the primary API for executing queries in an Apollo application, you don't need a High Order Component anymore, just use useQuery and it will return an object that contains loading, error, and data properties.
charactersQuery This is the query we write before, you passed it to the useQuery hook and it will return the data.

Import this new Characters component into the App, and you will see the data from all the characters.

Generate Types.

This is my favorite part, you can generate the types for the queries, this will highly increase your productivity writing code, apollo codegen is a tool that allows us to do exactly that.

Previously we installed the apollo library so now we are going to create a configuration file apollo.config.js on the root of the project.

module.exports = {
  client: {
    service: {
      url: 'https://rickandmortyapi.com/graphql',
    },
    includes: ['./src/**/*.{ts,tsx,js,jsx,graphql}'],
  },
};

Let's also include a new script on the package.json to run it and generate the types.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "apollo:codegen": "apollo client:codegen --tagName=gql --target=typescript types",
    "eject": "react-scripts eject"
  },

The tagName flag is the name of the template literal tag used, in this case, is gql, the target is the type of code generator to use, the final types is the output, the new folder when all the types are going to be.

Check the documentation to know what other options you can set.

So now you are ready to run yarn run apollo:codegen on the console and see what happens.

Check your project and you should see two new folders, we only need the one with the charactersQuery.ts file inside.

Using the types with hooks.

Let's go back to the Characters component, now that we have the types generated the next part is straightforward.

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import { CHARACTERS_QUERY } from './queries';
import { charactersQuery, charactersQueryVariables } from './types/charactersQuery';

const Characters = () => {
  const { data } = useQuery<charactersQuery, charactersQueryVariables>(CHARACTERS_QUERY);

  return (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  )
}

export default Characters;

Import those types and include it on the useQuery hook, and now you're ready to go.

Since we already included the types for the variables, if you tried, this will throw an error.

const { data, loading } = useQuery<charactersQuery, charactersQueryVariables>(CHARACTERS_QUERY, {
    variables: {
      page: "12",
    }
  });

Type 'string' is not assignable to type 'number | null | undefined'.ts(2322)

Conclusion

Generally, I tried to use Typescript for all my projects and having the types for the queries and mutations saved me a lot of time, I hope you find it useful.

What is the JAMstack?

Elizabeth Alcalá — Fri, 08 May 2020 03:42:10 +0000

If you are like me, maybe you have heard the term, or maybe you are overwhelmed by the many static site generators and don't know what exactly they are and what problems they solve.

In this article I want to learn like you, what is the JAMstack, why it's so popular nowadays and what are its benefits.

The JAM

JAMstack stands for Javascript, APIs, and Markup.

Javascript handles the dynamic functionalities. You can use plain javascript or any framework you want.

APIs, the actions that you typically handle on a backend server are now abstracted into reusable APIs, accessed over HTTPS with Javascript.

Markup, static HTML files. This is prebuilt at build time, usually using a Static Site Generator.

These concepts seem very generic because they aren't applied to specific technologies like MERN (Mongo, Express, React, Node), for example.

What is not considered a JAMstack app?

Applications build on top of technologies like MERN are not considered JAMstack, that's because those apps use a web server to generate more of the HTML at runtime.

According to jamstack.org, apps built with a server-side CMS like WordPress or Drupal are not built with the JAMstack either.

In general any app that needs a server to run or it relies on a backend language it's not considered as a JAMstack app.

Content Delivery Network (CDN)

JAMstack apps don't depend on web servers, they extract markup and assets into static files that you can serve from a CDN. This provides better performance and a faster application. Now you may be asking how I can generate those static files for my app?

Static Site Generators (SSG), are exactly for that, Gatsby, Next.js, Nuxt, and many other options around, help to develop an app with your favorite Javascript framework and then generate at build time a complete structure of static files that you can serve from a CDN.

There are many options also for you to deploy those static applications, the most common ones are Netlify, AWS S3, Vercel, Firebase.

If you want to dive into static generators, and how to choose the right one for your needs, check this post.

But since all the content is static, how can we get dynamic data?

That's when the APIs part comes into play, we can make a request or handle authorization with APIs. Let's take as an example an e-commerce app, you are using a static site generator to develop the markup, but how we can get the products data?

There's an interesting concept known as headless CMS where we can store and update the products so that later we can access them into our JAMstack app. Now you may be asking how is this different from a traditional CMS like Wordpress, let's explain that.

A headless CMS makes your content accessible via Graphql or Rest APIs, it doesn't matter where your data get displayed, this headless CMS just store and then deliver that data. On the other hand a traditional CMS like Wordpress stores not only the content but the frontend part of the app to render that particular content.

Like SSG there are plenty of headless CMS options, according to your needs, choose the right one for your app.

A headless CMS is not the only way to handle dynamic data in your app, you may need custom work for your app, even if you want to store some input from the user. You may be thinking that you need a server and a database, but not exactly. We can manage those features with serverless functions and DBaaS (Database as a Service).

Advantages

Since we talked about how the JAMstack works, and what are the tools you can use, let's get right into the advantages of this way of building websites.

Performance: Since we served static files, these are incredibly fast.
Cheaper: Hosting those files is cheaper.
Security: With the processes abstracted into APIs, areas for attacks are reduced.
Developer Experience: More focused development for frontends because we remove the need to maintain a separate stack.

I hope you find this article useful, personally I'm trying Gatsby and it has been great. If you are looking for a new way to build your next app, try the JAMstack.

How to use Graphql fragments.

Elizabeth Alcalá — Fri, 01 May 2020 02:12:17 +0000

Let’s imagine you developing an app and you need a user to login to access some features.
This app has a page when you show a list of all your users and for that, you need to get the user's data in order to render some UI.
Also, if someone clicks on a single user you need to show the data from that particular user.

query User {
  user {
    id
    firstName
    lastName
    username
    email
    URL
    thumbnailUrl
    occupation
  }
}

query Users {
  users {
    edges {
      node {
          id
          firstName
          lastName
          username
          email
          url
          thumbnailUrl
          occupation
      }
    }
  }
}

How can we avoid writing these fields every time we need the user data?

Fragments are a reusable piece of a query. You can use them to avoid repeating code in some cases.
According to the Apollo documentation, one of the principal uses for fragments are Sharing fields between multiple queries, mutations, or subscriptions.

DRY: Don’t Repeat Yourself.

Let’s see how we can use fragments on a .graphql file.

fragment userAttributes on User {
  id
  firstName
  lastName
  username
  email
  url
  thumbnailUrl
  occupation
}

The component after the on, in this case User is the type we are selecting the fields from.
In order to use this fragment in a graphql file, we must import it in this way.

#import "./userFragment.graphql"

query User {
  user {
    ...userAttributes
  }
}

query Users {
  users {
    edges {
      node {
        ...userAttributes
      }
    } 
  }
}

That reducer our code significantly.
Let’s see the way to embed the fragments in our queries if we use the gql helper.

const userFragment = gql`
  fragment userAttributes on User {
    id
    firstName
    lastName
    username
    email
    url
    thumbnailUrl
    occupation
  }
`;

const userQuery = gql`
  query User {
    user {
      ...userAttributes
    }
  }
  ${userFragment}
`;

const userListQuery = gql`
  query Users {
    users {
      edges {
        node {
          ...userAttributes
        }
      } 
    }
  }
  ${userFragment}
`;

If we need to get more data about the user, it’s as easy as adding new fields to our fragment.

Let's talk about estimation.

Elizabeth Alcalá — Tue, 21 Apr 2020 03:29:03 +0000

I struggle a lot with estimations in my two years as a developer. And I'm not the only one, most of my coworkers struggle with this too.

But why it is so difficult?

I think it's because nobody teaches you how to estimate when you become a developer. You just learn it along the way, coding more and more until you can give a more accurate estimation of how long it will take you to complete a task.

Take your time.

When you are assigned to a project or task, take your time to know exactly what is required. Maybe it's a long project that can take months, or maybe it's a task that only takes a couple of hours.

Whatever the case, you can have an estimation in minutes or it could take you days. Make all the questions you have about the project, make sure the workflow is completed, if you have a design, ask the product team how this will look like in every possible scenario.

What if the requirements are not fully defined?

These are probably the most difficult projects to estimate. If you receive a text from a client who says he wants an e-commerce app but he's not sure about what payment gateway he needs, or the product team delivers a web design for desktop but not for tablet and mobile (this drives me nuts), you probably feel stuck.

It's important to point out that you can't give a precise estimation because you need more information, and that the time you define can be extended due to lack of information.

Split the process.

When you start working, always keep in mind the scope of the project; with that in your head, try to split the process into little tasks and go forward one by one. This will help you to maintain order and to be aware of what have you done and what is left to do. Many apps like Trello and Jira can help you with that. You can estimate this little task also, and that will help.

It's easy to get distracted.

The longer the project takes, the more difficult it is. I remember that I started coding a new feature, and I go back to an older component I made and thought Uhm, I think this needs a refactor. I spent 3 hours on that component, the refactor was done but I loose 3 important hours in something that was out of scope.

Don't get me wrong, there are moments when refactor or tweaking are necessary in order to continue with the task, but for the feature I've been doing it was not. If you want to try a new library or maybe change tons of code, think twice, Is this really necessary?

Communication.

It's key in a team. If you don't understand something, ask, if the product team gives you a design that it's not clever to you, ask the necessary questions.

And most important, when you feel the task or project you are working on is going to take you longer, don't wait until last day to announce this to your manager, yeah I know, we tempted to think that we are going to make it, even when there are two days left until the deadline and there is a lot of things to do, things that normally take you four or five days, we want to finish them in two. That's not possible, or maybe it is, but it will demand a lot of your time, you'll feel stressed, and chances are you won't finished either.

But if I ask for a deadline extension, I could lose my credibility.

There are times when you can't pass a deadline by one or two days and it's not really a big deal, but if a project it's very important, and many areas are going to be affected is this postponed, you need to communicate effectively and detail why this take longer than agreed. This will not take out your credibility, it will reflect your compromise to deliver excellent work.

If you choose to end a project in a hurry, maybe it works or maybe not, maybe it's buggy or you missed something important on the flow. If that is the case you could lose your credibility to deliver a task that didn't complete the requirements.

I really hope you find these recommendations useful and could improve your performance in any task assigned to you. Remember that, you never stop learning, it could take some time to know how to deal with estimations, and maybe you are going to fail in the process but learn from that for the next one.

Comics from here.

Start a new Electron app with React and Typescript.

Elizabeth Alcalá — Thu, 16 Apr 2020 01:13:07 +0000

What is Electron?

Electron is a framework for creating native applications. It's open-source and cross-platform. If you already know Javascript, HTML, and CSS you can build an application with electron.

In this tutorial, I'll show you how to start an electron project from scratch using webpack, react, and Typescript.

Start with Electron.

Let's start by creating a new folder and a new npm project.



mkdir electron-react-ts
cd electron-react-ts
npm init -y

Now install these dependencies.



npm install --save-dev electron \
webpack webpack-cli webpack-dev-server \
babel-loader @babel/core @babel/preset-env \
@babel/preset-react @babel/preset-typescript

Create a tsconfig.json file. This allows you to specify the configuration for the typescript compiler.



{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "es2016",
      "es2017"
    ],
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
  }
}

Create a babel.config.js and an index.html file at the root of our app.



module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
}



<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Electron App</title>
</head>
<body>
</body>
</html>

Let's create a new file called webpack.electron.config.js on the root of our app. This webpack file will compile our electron app into a dist folder.



const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devtool: 'source-map',
  entry: './electron/main.ts',
  target: 'electron-main',
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
  },
};

This looks like a normal webpack configuration for typescript, except for the target. The target is the specific environment that webpack will compile for. In this case it's electron-main.

Create an electron folder, then inside a main.ts file with the following code.
This file should create windows and handle the systems events for your app.



import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

let mainWindow: Electron.BrowserWindow | null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL(`http://localhost:4000`);
  } else {
    mainWindow.loadURL(
      url.format({
          pathname: path.join(__dirname, '../index.html'),
          protocol: 'file:',
          slashes: true
      })
    );
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);
app.allowRendererProcessReuse = true;

The BrowserWindow module will create a new window and render our react app.

Now let's add a script in the package.json file in order to run electron. Also, we have to change the main field for the path that has our electron app compiled.



{
  "main": "./dist/main.js",
    "scripts": {
    "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron ."
  },
}

Now run npm run dev:electron in the console.

Note: If you are using Windows, chances are you'll face an error, this is because NODE_ENV is not recognized as a command. You have to install crossenv and place the command before NODE_ENV.

Add a React app.

Now that we have our electron app running, let's set up a react app to run within this electron context.

We need to install a few dependencies.



npm install react react-dom @types/react @types/react-dom

npm install --save-dev html-webpack-plugin

Create a new webpack.react.config.js file.



const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    mainFields: ['main', 'module', 'browser'],
  },
  entry: './src/app.tsx',
  target: 'electron-renderer',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist/renderer'),
    historyApiFallback: true,
    compress: true,
    hot: true,
    port: 4000,
    publicPath: '/',
  },
  output: {
    path: path.resolve(__dirname, '../dist/renderer'),
    filename: 'js/[name].js',
    publicPath: './',
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

Our package.json file now should look like this.



{
  "main": "./dist/main.js",
    "scripts": {
      "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
      "dev:react": "NODE_ENV=development webpack-dev-server --config webpack.react.config.js --mode development"
    },
 }

In order to try this app, let's create a new folder src with anapp.tsx file inside.



import React from 'react';
import ReactDom from 'react-dom';

const mainElement = document.createElement('div');
document.body.appendChild(mainElement);

const App = () => {
  return (
    <h1>
      Hi from a react app
    </h1>
  )
}

ReactDom.render(<App />, mainElement);

Now we are ready.
Run npm run dev:react in one console, and npm run dev: electron on other one.

Check this repo for the code.

3 Tips to write better react components

Elizabeth Alcalá — Thu, 09 Apr 2020 00:23:21 +0000

Get rid of code smells.

One of my tasks for this sprint was to implement a new feature in a very complicated form, with dynamic questions and a logic to jump between them. I estimated 5 hours for this task, the only change I need to do, was to add an extra validation at the moment to send.

I was still thinking this until I saw the component I need to update. This component has more than 300 lines of code, there was a giant piece of JSX markup that took like 150 lines, and the logic…, there were many setState in this component and useEffects with many dependencies.

I was surprised and also ashamed because I wrote this code, but it turns out into a giant monster that I don't understand at all. You know, like those times when you are staring at your screen for fifteen minutes thinking what on earth this function was for.

Code smells

You might hear this before, if you don't, code smells are practically what I describe before. It indicates weakness in your code, they are not bugs, because the web app works fine, but it can increase the risk of bugs or failures in the future.

So, how do you deal with a code like that?

I followed these tips to refactor the component I describe before, and I hope it could help you too.

useReducer instead of useState

I mentioned that this component has multiple useState, this was difficult to read because I have to look for all the setState to know which part of the component updates a certain state.

Yeah, I know, it looks bad. If you end with a code like this, you must consider doing a refactor. Many of these states where related, so I can create a reducer to handle the possible scenarios for this form.

This also increases your knowledge of the effects that these reducer actions have. When you separate your logic in actions you are aware of what action affects certain fields of the state. This gives you more control of the state, and implementing a new feature is easier.

Separate logic.

In this form, I need to fetch some data from an API on graphql. I use apollo and @apollo/react-hooks. When I get the data I need to update some state. Instead of having the data fetching in the same component, I can create a custom hook that returns just the state I need.

If I need to use a mutation or add an extra query, I could write that logic in this hook also.

I recommend you to follow the separation of concerns principle for data fetching, you can create a separate file for the logic related to the data and just return the state that will be rendered in your component. This could also apply for your UI, creating a presentational component when it's needed will let you understand better how your app works.

Split it into smaller pieces

The UI of the monster component I wrote has more than 100 lines of code. There were div after div and it took me more than two minutes to know what exactly I was doing. In all this div universe there were conditional renders, and I literally have to scroll down for a while to know where this end.

Look at the code above. That currentForm boolean it's wrapping a big piece of JSX markup. It could be more readable if we move this UI into another component.

So much better, I can split this big component into smaller ones, so the next person that comes, and sees this code would know exactly where is everything.

Conclusion

There is no perfect way of writing code, different teams follow different patterns, but if you feel the way I feel when I saw that code, it probably needs a refactor too. Keep in mind:

If you are using multiple useState, try to change it to useReducer. You'll have better control and a wide vision of what is happening to your state in every action.
Separate logic that can be reused. You can create a custom hook for data fetching or create util functions that can be used on other parts of your app.
Split your component into smaller pieces. Extract pieces of JSX markup into a different component to improve the readability of your code.

Start a component library with Storybook, Tailwind, and Typescript.

Elizabeth Alcalá — Thu, 02 Apr 2020 02:46:47 +0000

Build components faster for your React project.
Take a look at the final result

What is Storybook?

Storybook is a tool for developing UI components in isolation, this means we can have these outside our main app, make the necessary changes, and import them in our app knowing how they look.

Design systems have become an important part of any product development process, and chances are that you already work with one. This system delivers a style guide for designers and developers to follow. You have many UI components with different patterns and variations. This is a perfect scenario to use Storybook.

The advantages of Tailwind

Tailwind CSS is a highly customizable, low-level CSS framework. It's not a UI kit like many other frameworks, it gives you full control over how your website looks, all through CSS classes.

Setup a react app and install tailwind.

I will start a project from scratch with create-react-appp.

npx create-react-app storybook-ts --template typescript

Let's install the dependencies.

npm install tailwindcss postcss-cli autoprefixer

Create a new file called postcss.config.js on the root of the app with the code below.

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

We will process tailwind with postcss, and autoprefixer will parse the CSS and add vendor prefixes for browser support.

Now add this script in the package.json file.

{
    "scripts": {
        ...
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss"
  },
  ...
}

Create a new scss folder inside src. I will use sass files because I will use base.scss to write more classes, but you can use css.

If you decide to use sass don't forget to install node-sass.

Create a base.scss file inside the scss folder with this content.

@tailwind base;
@tailwind components;
@tailwind utilities;

Run this command on the console and the tailwind file will be generated.

npm run build:tailwind

Place the generated tailwind file in your App component.

// App.tsx

import './scss/tailwind.scss';

For this tutorial, we are going to work with the default configuration of tailwind, feel free to adjust it to your needs. Run this command npx tailwind init and a tailwind configuration file will be generated, you can add the values that work better for you. This is tailwind's default configuration, take it as a reference.

Create a new components folder insider src and add a button.tsx file.

import React, { FC } from 'react';

type ButtonTypes = {
  /**
   * Label of the button
  */
  label: string;
  /**
   * Boolean value to define the button style 
  */
  outlined?: boolean;
  /**
   * Button click action
  */
  onClick(): void;
}

const BASE_BUTTON = 'rounded outline-none shadow py-3 px-12 font-normal uppercase tracking-wider text-lg'
const CONTAINED_BUTTON = `${BASE_BUTTON} bg-teal-400 border border-teal-400 text-white`
const OUTLINED_BUTTON = `${BASE_BUTTON} border border-teal-400 text-teal-400`

export const Button:FC<ButtonTypes> = ({ onClick, label = "Some label", outlined }) => {
  return (
    <button
      onClick={onClick}
      className={outlined ? OUTLINED_BUTTON : CONTAINED_BUTTON}
    >
      <span>{label}</span>
    </button>
  )
};

Let's dive into Storybook

In order to process typescript files with Storybook we need to extend the webpack configuration. Let's create a new folder at the root of our project called .storybook and create a main.js file inside.

But first, let's install the dependencies that we need.

npm install --save-dev @storybook/react @storybook/preset-create-react-app babel-loader react-docgen-typescript-loader @storybook/addon-actions @storybook/addon-info @storybook/addon-knobs @storybook/addon-notes @storybook/addons

We are going to use the addons to enable advanced functionality to our stories.

On the main.js file add the following code.

module.exports = {
  stories: ['../src/stories/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-notes/register',
  ],
  webpackFinal: async config => {
    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [require.resolve("babel-preset-react-app")]
            }
          },
          require.resolve("react-docgen-typescript-loader")
        ]
      }
    ],
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

Let's create our first story.

Create a stories folder inside src, and a file called button.stories.tsx. We are going to add some addons, to change the props of the button directly from storybook.

import React from "react";
import { Button } from '../components/button';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean } from "@storybook/addon-knobs";

export default {
  title: "Button",
  decorators: [withKnobs]
};

export const primary = () => {
  const label = text("Label", "See now");
  const outlined = boolean("Oultined", false);
  return (
    <Button onClick={action('clicked')} outlined={outlined} label={label} />
  )
};

Let's add a script on the package.json file to run storybook.

{
    "scripts": {
        ...
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss",
    "storybook": "start-storybook -p 5000"
  },
  ...
}

Now if we run npm run storybook we will see something like this.

It's our button! but without the styles. Let's fix that by creating a new Layout component. All the files that we are creating from now are going to be inside .storybook folder.

import React from 'react';
import '../src/scss/tailwind.scss';

const Layout = ({ children }) => {
  return (
    <div className="px-20 py-10">
      {children}
    </div>
  )
}

export default Layout;

Create a preview.js file.

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Layout from './Layout';

addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
addDecorator(withInfo({
  inline: true,
  propTablesExclude: [Layout]
}));

If you run storybook again, our story now looks like this. The info addon generates the source code and a proptypes table.

Notes:

If you face problems importing the tailwind file, you need to add a sass-loader to your webpack configuration on main.js.
If you can't see any proptypes, check your component file. Be sure to destructure the react imports or import React like this. Or try to not use export default for your component.

  import * as React from 'react'; 

  import React, { FC } from 'react';

  export const Button = () => {} //don't use export default.

Dark mode.

Our app looks great, but do you know how can we make it look better? Yes, with dark mode.

First, create a manager.js file and add the following code.

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

This will add the dark theme to your storybook app.

On the previous preview.js file, add this to change the styles for the info.

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Layout from './Layout';

addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
addDecorator(withInfo({
  inline: true,
  styles: (base) => ({
    ...base,
    infoBody: {
      ...base.infoBody,
      backgroundColor: '#303030',
      color: 'white',
    },
    source: {
      h1: {
        margin: '20px 0',
        padding: '0 0 5px 0',
        fontSize: '25px',
        borderBottom: '1px solid #EEE',
      },
    },
  }),
  propTablesExclude: [Layout]
}));

We almost have it. But now the text on the proptypes table doesn't look good.

Create a preview-body.html and add this code.

<style>
  .info-table, .info-table td, .info-table th{ 
    color: #fff;
  }
</style>

Run storybook again.

Now you have it, storybook is up and running on dark mode with your tailwind components and typescript support.

Check the code in this repo.

React Context with useReducer and Typescript.

Elizabeth Alcalá — Sun, 22 Mar 2020 19:00:00 +0000

Just the code?

There are many options to handle state in react applications. Obviously you can use setState for some small logic, but what if you have a complex state to manage?

Maybe you will use Redux or MobX to handle this scenario, but there is also the option to use React Context, and you don't have to install another dependency.

Let's see how we can manage a complex state, with the Context API and Typescript.

In this tutorial we are building, a product list with a shopping cart counter.

First, create a new React project with create-react-app.

npx create-react-app my-app --template typescript
cd my-app/

Next, create a new context.tsx file inside the src directory.

/*context.tsx*/

import React, { createContext } from 'react';

const AppContext = createContext({});

You can initialize a context api as simple as that, with any value you want, in this case, I'm using an empty object.

Now let's create an initial state, with an empty list of products and the shopping cart counter to zero. Also, let's add some types for this.

/*context.tsx*/

import React, { createContext } from 'react';

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type InitialStateType = {
  products: ProductType[];
  shoppingCart: number;
}

const initialState = {
  products: [],
  shoppingCart: 0,
}

const AppContext = createContext<InitialStateType>(initialState);

Every product inside the product list is going to have an id, name, and price.

Now we will use reducers and actions to create and delete a product, and also increase the shopping cart counter by one. First, create a new file called reducers.ts.

/*reducers.ts*/

export const productReducer = (state, action) => {
  switch (action.type) {
    case 'CREATE_PRODUCT':
      return [
        ...state,
        {
          id: action.payload.id,
          name: action.payload.name,
          price: action.payload.price,
        }
      ]
    case 'DELETE_PRODUCT':
      return [
        ...state.filter(product => product.id !== action.payload.id),
      ]
    default:
      return state;
  }
}

export const shoppingCartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_PRODUCT':
      return state + 1;
  }
}

A reducer function receives two arguments, the first one is the state, that we are passing when using useReducer hook, and the second one is an object that represents that events and some data that will change the state (action).

In this case, we create two reducers, one is for the products, and the other one for the shopping cart. On the product reducer, we add two actions, one for creating a new product and the other one to delete any product. For the shopping cart reducer, the only action we add is to increase the counter every time you add a new product.

As you can see, for creating a product we pass, the id, the name, and the price, and return our current state, with the new object. For deleting one, we just need and id and the return is the state but without the product that has this id.

Now let's change the context file to import these reducer functions.

/*context.tsx*/

import React, { createContext, useReducer } from 'react';
import { productReducer, shoppingCartReducer } from './reducers';

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type InitialStateType = {
  products: ProductType[];
  shoppingCart: number;
}

const intialState = {
  products: [],
  shoppingCart: 0,
}

const AppContext = createContext<{
  state: InitialStateType;
  dispatch: React.Dispatch<any>;
}>({
  state: initialState,
  dispatch: () => null
});

const mainReducer = ({ products, shoppingCart }, action) => ({
  products: productReducer(products, action),
  shoppingCart: shoppingCartReducer(shoppingCart, action),
});

const AppProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  return (
    <AppContext.Provider value={{state, dispatch}}>
      {children}
    </AppContext.Provider>
  )
}

export { AppContext, AppProvider };

There's is a mainReducer function, that combines the two reducers that we are going to have (product reducer and shopping cart reducer), each one manages a select part of the state.

Also, we create the AppProvider component, and inside this, the useReducer hook takes this mainReducer and the initial state to return the state and the dispatch.

We pass these values into the AppContext.Provider, doing this we can access the state and dispatch with the useContext hook.

Next, add these types for the reducers and actions.

/*reducers.ts*/

type ActionMap<M extends { [index: string]: any }> = {
  [Key in keyof M]: M[Key] extends undefined
    ? {
        type: Key;
      }
    : {
        type: Key;
        payload: M[Key];
      }
};

export enum Types {
  Create = 'CREATE_PRODUCT',
  Delete = 'DELETE_PRODUCT',
  Add = 'ADD_PRODUCT',
}

// Product

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type ProductPayload = {
  [Types.Create] : {
    id: number;
    name: string;
    price: number;
  };
  [Types.Delete]: {
    id: number;
  }
}

export type ProductActions = ActionMap<ProductPayload>[keyof ActionMap<ProductPayload>];

export const productReducer = (state: ProductType[], action: ProductActions | ShoppingCartActions) => {
  switch (action.type) {
    case Types.Create:
      return [
        ...state,
        {
          id: action.payload.id,
          name: action.payload.name,
          price: action.payload.price,
        }
      ]
    case Types.Delete:
      return [
        ...state.filter(product => product.id !== action.payload.id),
      ]
    default:
      return state;
  }
}

// ShoppingCart

type ShoppingCartPayload = {
  [Types.Add]: undefined;
}

export type ShoppingCartActions = ActionMap<ShoppingCartPayload>[keyof ActionMap<ShoppingCartPayload>];

export const shoppingCartReducer = (state: number, action: ProductActions | ShoppingCartActions) => {
  switch (action.type) {
    case Types.Add:
      return state + 1;
    default:
      return state;
  }
}

I take this approach from this post, basically we are checking wich action.type is used, and according to that, we generate the types for the payload.

NOTE

Another approach you can take is to use Discriminated unions like this.

type Action =
 | { type: 'ADD' }
 | { type: 'CREATE', create: object }
 | { type: 'DELETE', id: string };

In the previous code, all of those types have a common property called type. Typescript will create type guards for discriminated unions and will let us now according to the type we are using wich other properties the object type has.

But for this tutorial we are using two common properties for our actions type and payload, and the payload object type changes according to the type, so discriminated union types won't work.

Now, let's import the types we define into the context file.

/*context.tsx*/

import React, { createContext, useReducer, Dispatch } from 'react';
import { productReducer, shoppingCartReducer, ProductActions, ShoppingCartActions } from './reducers';

type ProductType = {
  id: number;
  name: string;
  price: number;
}

type InitialStateType = {
  products: ProductType[];
  shoppingCart: number;
}

const initialState = {
  products: [],
  shoppingCart: 0,
}

const AppContext = createContext<{
  state: InitialStateType;
  dispatch: Dispatch<ProductActions | ShoppingCartActions>;
}>({
  state: initialState,
  dispatch: () => null
});

const mainReducer = ({ products, shoppingCart }: InitialStateType, action: ProductActions | ShoppingCartActions) => ({
  products: productReducer(products, action),
  shoppingCart: shoppingCartReducer(shoppingCart, action),
});


const AppProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  return (
    <AppContext.Provider value={{state, dispatch}}>
      {children}
    </AppContext.Provider>
  )
}

export { AppProvider, AppContext };

Don't forget to wrap your main component with the AppProvider.

/* App.tsx */

import React from 'react';
import { AppProvider } from './context';
import Products from './products';

const App = () => {
  <AppProvider>
    // your stuff
    <Products />
  </AppProvider>
}

export default App

Create a Products component and inside this add the following code.

/* Products.tsx */

import React, { useContext } from 'react';
import { AppContext } from './context';
import { Types } from './reducers';

const Products = () => {
  const { state, dispatch } = useContex(AppContext);

  return (
    <div>
      <button onClick={() => {
        dispatch({
          type: Types.Add,
        })
      }}>
        click
        </button>
      {state.shoppingCart}
    </div>
  )
}

export default Products;

Everything it's strongly typed now.

You can check the code here.

Sources.

https://medium.com/hackernoon/finally-the-typescript-redux-hooks-events-blog-you-were-looking-for-c4663d823b01

A new React project with Typescript, Eslint, and Prettier

Elizabeth Alcalá — Sat, 14 Mar 2020 02:44:17 +0000

In almost every new project I start with React I always ask myself if I should use create-react-app. To small apps, this is a pretty good option but if you want to configure your app a little more and maybe change the babel and webpack configuration, you should start a project from scratch.

Let's create a new directory and initialize a default npm app.

# Make a new directory and move into it 
mkdir new-react-app && cd new-react-app

# Initialise a new npm project with defaults
npm init -y

Now our application has a package.json file.

Let's start with webpack and babel setup.

   # Install webpack 
   npm install --save-dev webpack webpack-cli webpack-dev-server

   # Install the html webpack plugin
   npm install --save-dev html-webpack-plugin

   # Install babel
   npm i --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript

A babel preset it's a tool to add support for a certain language.

@babel /preset-env, @babel /preset-react and @babel /preset-typescript : Allow us to add support for the latest features of javascript, react and typescript.

Let's create a webpack.config.js file on the root of our app.

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');

   module.exports = {
     entry: './src/app.tsx',
     resolve: {
       extensions: ['.ts', '.tsx', '.js'],
     },
     module: {
       rules: [
         {
           test: /\.(ts|tsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
           },
         },
       ],
     },
     devServer: {
       contentBase: path.join(__dirname, 'build'),
       historyApiFallback: true,
       host: '0.0.0.0',
       compress: true,
       hot: true,
       port: 3000,
       publicPath: '/',
     },
     devtool: 'source-map',
     output: {
       filename: '[name].bundle.js',
       publicPath: '/',
       path: path.resolve(__dirname, 'build'),
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: path.join(__dirname, 'index.html'),
       }),
     ],
   };

This webpack configuration it's basic but it does the work.

Let's create an index.html file on the root.

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>My app with Typescript and React</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
       <div id="root"></div>
     </body>
   </html>

Now let's create a babel.config.js file.

   module.exports = {
     presets: [
       '@babel/preset-env',
       '@babel/preset-react',
       '@babel/preset-typescript',
     ],
   };

In our package.json file, we have to add some script to run our app, and to compile it in a build folder.

   // package.json

   {
     "scripts": {
       "start": "webpack-dev-server --mode development",
       "build": "webpack --mode production",
     },
   }

Typescript and react.

Typescript is a programming language developed by Microsoft. It's a superset of javascript, which means it has some additional features, like static typing and support for object oriented programming options. Today is one of the most popular languages.

   # Install typescript
   npm install typescript

   #Install the react dependencies
   npm install react react-dom @types/react @types/react-dom

@types/react y @types/react-dom: These packages add the types for react and react-dom.

Let's create a src folder on the root, and inside an app.tsx file.

   mkdir src
   cd src
   touch app.tsx

Our app.tsx can be like this for now.

   import React from 'react';
   import ReactDom from 'react-dom';

   const App = () => <p>hello world</p>;

   ReactDom.render(<App />, document.getElementById('root') as HTMLElement);

Now let's create a tsconfig.json file. This file has all the rules for typescript to work on our app. You can change it according to what you need. See the full list of options here, https://www.typescriptlang.org/docs/handbook/tsconfig-json.html.

   {
     "compilerOptions": {
       "allowSyntheticDefaultImports": true,
       "noImplicitAny": true,
       "moduleResolution": "node",
       "baseUrl": "./",
       "sourceMap": true,
       "module": "esnext",
       "target": "esnext",
       "jsx": "react",
       "allowJs": true,
       "noEmit": true,
       "noImplicitThis": true,
       "strictNullChecks": true,
       "lib": ["es6", "dom"],
     },
   }

Better development experience with Eslint and Prettier.

Eslint is a linting tool for javascript. It analyzes our code, looking for syntax errors, saving us a lot of development time.

Prettier is a code formatter. It enforces a consistent style across our app.

   # Install eslint and prettier
   npm install --save-dev eslint prettier

   # Install plugin and presets needed for our app
   npm install --save-dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser

eslint-config-prettier: It's important to use this package to avoid conflicts between eslint and prettier rules.

@typescript-eslint/eslint-plugin y @typescript-eslint/parser: These plugins add support for typescript.

Let's create a configuration file for Eslint called .eslintrc.js on the root of our project. You can change these rules according to your needs.

Here is the list of supported rules for eslint-plugin-react: https://github.com/yannickcr/eslint-plugin-react

   module.exports =  {
     parser:  '@typescript-eslint/parser',
     extends:  [
       'plugin:react/recommended',
       'plugin:@typescript-eslint/recommended',
       'plugin:prettier/recommended',
     ],
     parserOptions:  {
       ecmaVersion:  2018,
       sourceType:  'module',
     },
     plugins: ["prettier"],
     rules: {
       "prettier/prettier": [
         "error",
         {
           singleQuote: true,
           trailingComma: 'all',
         }
       ],
       'react/prop-types': [
         1,
         {
           ignore: ['context', 'tracking'],
         },
       ],
     },
     settings: {
       "react": {
         "version": "detect",
       },
     },
     overrides: [
       {
         files: ['*.ts', '*.tsx'],
         rules: {
           'react/prop-types': 'off',
         },
       },
     ],
   };

Now if we are using VS Code, we can enable the option to format our code on save.

Let's create a .vscode folder on the root, and create inside a settings.json file with this content.

   {
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "Babel Javascript",
       "typescript",
       "typescriptreact",
     ],
     "eslint.alwaysShowStatus": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
   }

Now when we run npm start we should see our application run on localhost:3000.

DEV Community: Elizabeth Alcalá

React 19: Everything you need to know.

Key Features in React 19

1. Async Functions in Transitions

2. useTransition Hook

3. Actions and useActionState

4. Optimistic UI with useOptimistic

5. React Server Components (RSC)

6. The use API

7. Server Actions

8. ref as a Prop

9. Native Metadata Management

10. Stylesheet Support and Preloading APIs

Conclusion

Create your own blog with Anima and Contentful CMS.

Before Starting

Get the code from the design.

Let’s create content in Contentful

Integrate Contentful CMS for dynamic content.

It’s time to deploy.

Boost your productivity with apollo hooks and typescript.

Start our project.

Write some queries.

Generate Types.

Using the types with hooks.

Conclusion

What is the JAMstack?

The JAM

What is not considered a JAMstack app?

Content Delivery Network (CDN)

But since all the content is static, how can we get dynamic data?

Advantages

How to use Graphql fragments.

How can we avoid writing these fields every time we need the user data?

Let's talk about estimation.

But why it is so difficult?

Take your time.

What if the requirements are not fully defined?

Split the process.

It's easy to get distracted.

Communication.

But if I ask for a deadline extension, I could lose my credibility.

Start a new Electron app with React and Typescript.

What is Electron?

Start with Electron.

Add a React app.

3 Tips to write better react components

Code smells

useReducer instead of useState

Separate logic.

Split it into smaller pieces

Conclusion

Start a component library with Storybook, Tailwind, and Typescript.

What is Storybook?

The advantages of Tailwind

Setup a react app and install tailwind.

Let's dive into Storybook

Dark mode.

React Context with useReducer and Typescript.

Sources.

A new React project with Typescript, Eslint, and Prettier

Let's start with webpack and babel setup.

Typescript and react.

Better development experience with Eslint and Prettier.

2. `useTransition` Hook

3. Actions and `useActionState`

4. Optimistic UI with `useOptimistic`

6. The `use` API

8. `ref` as a Prop