Frontend Access Control Using Digital Assets

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

We'll delve into the intersection of web development and NFT (Non-Fungible Token) technology. As the digital landscape continues to evolve, developers are constantly seeking innovative ways to enhance user experience and security. From authentication to user permissions. NFTs offer a decentralized and secure solution that can reshape the way we interact with web applications.

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

FAQ

Blockchain is a chain of blocks connected using cryptography. It is a distributed ledger that maintains a continuously growing list of records called blocks, which are linked by cryptography. This makes blockchain secure, transparent, and immutable.

Smart contracts are computer programs that are published and executed in a blockchain environment. They are immutable, meaning their code cannot be changed once published. Smart contracts facilitate, verify, or enforce the negotiation or performance of a contract without needing intermediaries.

NFTs, or Non-Fungible Tokens, are a type of smart contract that represents a unique digital asset. Each NFT has a unique identifier and resides in a collection within a smart contract. NFTs can be used to prove ownership and access to digital content or assets.

Blockchain ensures data security and transparency through its decentralized nature and cryptographic linking of blocks. Each transaction must be validated by multiple nodes in the network, making it extremely difficult to alter past data without consensus from the network.

Traditional user access relies on centralized systems and credentials like passwords. NFT-based access uses a digital wallet containing NFTs, which serve as proof of ownership and access rights. Only the wallet owner can access the NFTs, enhancing security and ownership control.

Blockchain offers data immutability, transparency, and decentralization, making it tamper-proof and secure. Traditional databases can be altered by those with access rights, while blockchain transactions are recorded permanently and require network consensus to be changed.

The example application was created using React, Next.js for the user interface, Viem for connecting the front-end with the blockchain, Metamask as the web wallet, and Solidity to write the smart contract. The smart contract was deployed on the Sepolia testnet for Ethereum.

Examples include Forbes using NFTs to provide access to exclusive content, VFriends offering access to unique characters and experiences, and the NBA's dynamic NFTs that update based on game points.

The deployment process involves writing the smart contract in a language like Solidity, using an environment like Remix to deploy it to the blockchain, and confirming the transaction via a blockchain wallet such as Metamask. Once deployed, the smart contract has a unique address on the blockchain.

Costs are incurred when creating and updating transactions on the blockchain. The fees depend on the network's current activity level. Reading data from the blockchain is typically free, while writing or updating data requires a transaction fee.

Solange Gueiros
Solange Gueiros
27 min
14 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Blockchain technology and NFTs provide a decentralized alternative to centralized systems for identity and access control. Smart contracts are immutable programs executed on the blockchain, while NFTs offer unique identifiers and ownership through wallets. Developing the user interface involves using React, Veeam, and Solidity. Deploying smart content requires Remix and a web wallet like Metamask. Integrating smart contracts with React can be done using the Vim library and creating a wallet client. Blockchain technology ensures transparency, trust, and tamper-proof transactions.

1. Introduction to Blockchain Technology and NFTs

Short description:

Imagine your favorite social network being blocked without notice or having a social fake account. This can happen due to centralized systems where your identity is dependent on them. I'm here to teach you a different way using blockchain technology and NFTs for digital access. This is the most important slide.

And let's start. Imagine if you have your favorite social network blocked without no notice. Or if you have a social fake account. Or someone asking money to your friends or telling your mom that you are in trouble. This has happened to me more than once. And my mom knows exactly what to do. And she knows that it was never me.

And if she had some doubts, she would call me. But this is annoying. And this is a bit complicated. But this can happen. And sometimes it's so difficult that you are you.

This can happen because some systems are centralized and they have the decision by themselves. And it's not that really you have your identity in that system. It depends on them, not on you. And we can do this in a different way. And I'm here to teach you how to do that. And I'm creating this live with you. So we are starting accounts using blockchain technology here.

And imagine that even the digital access is always evolving. We start with passwords. And now I can use my finger. I can use my face. Or even I can use some identity related to blockchain as well. And in order to use that, we are using NFTs. And I will explain why we are using NFTs during the talk as well. If you'd like to have the presentation, this is the most important slide for you. Because I have this. I have other QR codes, other links in the middle. But if you have this, you have everything.

2. Introduction to Blockchain Basics

Short description:

We will start by covering the basic concepts of blockchain, smart contracts, and NFTs. I will demonstrate how to create and publish a smart contract on the blockchain and use it to unlock content and prove identity. Blockchain is a distributed ledger that maintains a continuously growing list of records, linked by cryptography. It is transparent, secure, and immutable. Transactions are stored in blocks, which contain transaction details, timestamps, and a cryptographic hash. Changing anything in the past requires convincing everyone on the network. Blockchain operates as a state machine, where each state represents a photo and transactions change the state.

So I'll give a minute to you. And this is, we are starting first doing some really, really basic concepts. What's blockchain? What is smart contract? What is NFT? Then I'm creating a smart contract live here. I'm publishing in the blockchain in a network. After that, I will get my smart contract published and use in a front-end that I developed. It's local on my machine now. And you can see how I can use that smart contract, that's the NFT itself, to unlock some content and to prove that it's my identity over there. So it's just that I just told you now.

Let's go forward. First of all, what is a blockchain? This is really, really basic. Blockchain is a chain of blocks. And the blocks are connected using cryptography. And we can say as well that the blockchain is a distribute ledger. And this maintains a continuously growing list of the records. And we call that the blocks itself. And all of these, remember, are linked by cryptography. So this is a security way to link this related to hash because you cannot change nothing in the past without changing everything that happened later. And because this is decentralized, we have copies of the blocks in different places with different nodes. If we try to change something in the past, you must convince everyone that this is right. And this is so hard. So we used to say that the blockchain is transparent and also it's secured and immutable because of that. And yes, we have the blocks in the blockchain.

The block has the transactions, the timestamp, you have the order of this. The hash is the cryptographic part and a special number here. So talking about the transactions itself, when we talk about blockchain, we are talking about a state machine. So each state is like a photo. This is the first photo, and we can have some balances, some information. If I'd like to go to the other state, I must do a transaction to change the photos, to change the state. And this is what's happened on blockchain. The transaction will be inside the block.

3. Smart Contracts and Updates

Short description:

Smart contracts are computer programs published and executed in a blockchain environment. They are immutable, and updates to them occur through transactions.

So we can have the world state updates using the blockchain. And with validation of everything that's happened.

Talking about the smart contracts themselves. So smart contracts, they are not smart. They are not contracts. They are computer programs. And they are published and executed in a blockchain environment. Because you already know that the blockchain is immutable, so the smart contract, the code, the source code itself is immutable as well. And we don't have no one in the middle that can stop your smart contract if it's designed to not be stopped at any time.

One thing important related to the smart contract itself, remember, the source code is immutable. You cannot change it. But inside your smart contract, you can have information that you'd like to update the information itself. Each time you are updating an information, it's a transaction.

4. NFTs: Smart Contracts and Access

Short description:

NFTs are smart contracts with unique identifiers in a blockchain. NFTs provide ownership and access through wallets. Examples include Forbes using NFTs for content access and dynamic NFTs in NBA related to game points.

And, okay, NFTs are smart contracts. They are a kind of smart contracts. We have some standards to define an NFT. And a NFT is a smart contract.

The collection of NFTs is a smart contract. And each NFT in that collection, in that smart contract, are unique. Because they have a unique identifier. And each smart contract in a blockchain, it's unique as well. It has your own address. So you can really say that an NFT is a unique piece that you can own and prove that it's yours.

And when you talk about the difference between the traditional user access versus the NFT-based access, NFTs will be on your wallet. And the wallet can be on a web browser or your phone or whatever. But the wallet is a set of keys, a public key and a private key. And the NFT will be in our wallet. And only you have access to this wallet. So you are the owner and you can prove that.

Some examples for you, like using NFTs to give you access. Like Forbes do this to have some access to their content. Or we have these VFriends that are cute. And also you can have access to the characters or something related to that. NBA has a collection of NFTs. And this is interesting because they are dynamic. The NFT is not only a photo. You can update your NFT. And they are dynamic. And they were changed related to the points in games. So another one, I think, is this. I can go a bit forward to almost our quote. Is this. It's time to build it.

5. Building the User Interface and Smart Content

Short description:

I'm using React with Next.js for the user interface. Veeam is used to connect the front-end with the blockchain. Solidity is the language for creating smart content published in the Sepolia blockchain, a testnet for Ethereum. Accounts can be stored using blockchain, and a QR code is provided for step-by-step guidance. The smart content is defined using the Solidity language and an ERC-721 standard library.

This is what I'm using here. I'm using React and especially Next.js. This will be the user interface. I'm using Veeam. This is a library to connect my front-end with the blockchain. If you look for a web extension that is a wallet.

And I'm using Solidity. This is the language to create the smart content itself. And the smart content will be published in a blockchain. I'm using Sepolia blockchain. This is a testnet for Ethereum. It means that it's not a real blockchain. It's a copy of a blockchain where we can do everything without having any concerns, any costs related to money or pay something or do something wrong.

So, how to store the accounts using blockchain? If you'd like to do this later, you already have the other QR code. This is a QR code to a Gitbug where you can do step-by-step everything. Create the wallet, create the smart content, create the front-end. Now here, I have less time, so I have some parts late. This is the smart content itself. So, what do I have here? Smart content and the language can change. It depends on the version. This can have different behavior.

So, in the first line, I'm defining what is the version of the Solidity language that I'm using. Then, I'm importing a library. This is a standard called ERC-721. A standard is not an obligation. It's a suggestion to you to use that so that people talk the same language. If I'm using this standard, I know what kind of function I should have in my smart content. This library brings the code of the NFT itself for me. The content itself, it's my content.

6. Creating and Deploying Smart Content

Short description:

The content itself will be called Open Access. Grant Access function creates an NFT in the collection, allowing access to something. Remix is an online environment for deploying smart content. Deploying smart content in the blockchain is done through Remix and a web wallet like Metamask. The address of the smart content is unique.

The content itself, it's my content. It will be called Open Access. I have only a number to have the unique identifier. I have this function called Grant Access to create a piece in that NFT collection, to create an NFT in the collection. This is the safe mint function. It means that if you have this NFT in your wallet, you have access to something. Let's see what it will be. I will come back later to talk about this.

Let's go to the practical part first. This is Remix. It's an environment to deploy smart content. It's online in your browser. You don't need to install anything here. This itself is my smart content, open access.sol. This is exactly the same that I showed you before in the slides, the presentation. Here we are. I'm going to the deploy and run transactions. Here, I can deploy my smart content in the blockchain. I am already connected to a web wallet. My wallet is this, the Metamask wallet. We are connected. If I scroll down, I can deploy my content live now with you. Here we are. Confirm. Now, I'm waiting for this transaction to create the content. It's in a waiting area. We are waiting for some validator in the network to get my transaction, add it in a block and then add this block in the blockchain. It's done because it's confirmed now.

If I come back here and scroll down, I have here the address of my smart content. Each smart content is unique in a network.

7. Connecting Wallet and Granting Access

Short description:

I'm going to my application, pasting the address of the content, and saving it. After connecting my wallet, you can see the final result. I don't have access, but the grant access button allows me to mint the NFT for my wallet without any restrictions or extra fees.

This is the address. What I'm doing now, I'm going to my application. This is my frontend. I have an environment variable here that is the address of the content. This, I did in another day. I don't have this now. I pasted the address that I just got on my smart content. Let's save this. I will show the result and then come back a bit to what more we have here.

Let's see the result of this. This is running now. If I come back here and go to this local, you can see that I don't have anything here. No sign. Let's connect my wallet first. This is the only thing that... Oh, but this is the final result. This is the old one. I didn't update it yet. Let's update this. Refresh. Connect my wallet again. Yes. Now, yes. I already showed you the end. Okay. Now, you can see that I don't have the access and I have this button grant access. This button grant access is calling this function grant access. It means that I'm minting the NFT for my wallet. I don't have any restrictions to do that. I'm not paying nothing extra to do that.

8. Integrating Smart Contracts with React

Short description:

I'm paying a small fee to add the transaction in the blockchain. Once confirmed, the NFT will be in my wallet. I now have the VIP image exclusively for NFT holders, granting access to special content. When creating the smart contract, I pay for the transaction. Checking for the NFT in a wallet is free. Integrating smart contracts with React involves using the Vim library and the create wallet client.

I'm paying a small fee to add the transaction in the blockchain. It's only this. Again, we are waiting this transaction. Be confirmed. Be confirmed. When it's confirmed, the NFT will be on my wallet.

Yes, it's confirmed. If I come back here again, if I refresh, I must connect my wallet again. Okay, let's connect. But when I do that... Why not yet? Yes. When I do that, now I have the VIP image that is exclusively for the people who have the NFT only. In the same way that I have this VIP image, I could have that content from Forbis, or I could access a special blog, a special content, and go to some kind of application that only the members can have that. This is another way that you can authenticate to go to some application.

Let's understand the code a bit better now. Remember that I came here. So, it'll be better to go here because I summarized this. Well, before that, sometimes people ask me about the costs of this. When I'm creating the smart contract, yes, I pay to create the transaction, to create the smart contract. Every time I'm giving access, I'm creating a transaction as well. It's paid. But when I'm checking if that wallet has the NFT or not, I'm not paying nothing. The read is always free. Only when you are doing a state change, you are paying something. Okay?

This is how I'm integrating the smart contracts with React. I have this library, the Vim, and I have this create wallet client. Here I'm using, defining that I'm using the Sepolya chain. Here, it's like the so-called way that we used to do that. We are looking for this window.ethereum. If you have that, it means that we have a wallet, a web extension in our browser that's a wallet.

9. Connecting with Wallet and Access Controller

Short description:

If I have that, I will try to connect with that wallet. In order to access any smart contract in a blockchain, you must have the address of the contract and the definition of the functions. After connecting with my wallet, the only component I created is the access controller view. You can learn more about it by visiting our developer hub or participating in our bootcamp.

If I have that, I will try to connect with that wallet. I must get authorization of the wallet. After that, the front-end itself, I get the wallet connection, and I have the control access token. This is the address of my NFT.

In order to access any smart contract in a blockchain, you must have two things. One, the address of the contract itself. Two, the definition of the functions that you have in that smart contract can be the inputs and outputs. We call that the ABI. Here I have the address, and I have the ABI that I already defined.

I'm connecting with my wallet. After that, the only component that I created is the access controller view. This component depends if it has the NFT, it's true or false. If I have the NFT, it will have a different behavior like you saw before. You also have access to this. This code is published as well. If you install ABI Wallet, you can try to buy it yourself later as well.

You have an overview here. How can you learn more about it? If you go to our developer hub, and by the way, the NFTs are standard, but I work at Chainlink Labs. Chainlink is a company which focuses on connecting the smart contracts with any kind of information that is not in a blockchain. We have the blockchain being a trust environment, a mutable environment, but we have all the rest of the world. Chainlink has different services to do these kinds of connections. You can check out how to do this with NFTs and other points as well. If you are really a beginner, maybe you'd like to start from zero. The bootcamp is to do that. This year, we already did two bootcamps with two weeks. Each bootcamp, two hours per day in different languages. English, I am from Brazil, so Portuguese, Spanish as well. We have other in Turkish, Mandarin. And you can learn from zero. Create your wallet, create your first smart contract, create your first NFT, and use different Chainlink services.

QnA

Introduction and Deployment Speed

Short description:

And this is me. I am Solange Gheiros, a Developer Relations Engineer at Chainlink Labs. I came from Brazil to attend this amazing conference. Regarding the question about speeding up deployment, the speed is determined by the transaction cost on the blockchain. Depending on the network activity, it can be cheaper or more expensive. You can update the fee to speed up the transaction, but once it's sent, you cannot pay less. Let me share a funny story about this from 2021.

And this is the presentation again. If you didn't get it in the beginning, you have the chance now to get the presentation. And this is me. You can call me Sol, but my name is Solange Gheiros. I am a Developer Relations Engineer at Chainlink Labs. So these are my contacts. Feel free to contact me. And yes, I came from Brazil. I'm here in Europe to this conference. It's really amazing. I love this conference.

Wow, Solange. Thanks a lot. That was really great. First question is for me. I noticed that when you were deploying, there was a button in the Metamask plugin to speed up. Why would we not always want that? Why is it an option to speed up? You always want the fastest deployment, right? Yes, the speed is related to how I'm paying to have the transaction in the blockchain. So imagine that in the moment that I send the transaction, the network doesn't have too many transactions in that moment. So it's cost less. In the moment that we have more transactions, it's like more movement in the network, it could be more expensive. So imagine that you send the transaction in a moment that was not so expensive and then the fee is higher now. So you can update the fee to pay a bit more to do that and speed up your transaction. So it's a cost thing. Yes. And can you also then pay less and just say, tomorrow's fine? After you send the transaction, no, because if you try to pay more and in that moment it's cheaper, you are already paid. But it's only if you'd like to pay less. And I have a fun history related to this. Imagine that in a moment, like it was 2021, now all the fees are so good. But in 2021, I did a transaction and I decided that no, I pay only this.

Transaction Stuck and Wallet Terminology

Short description:

In 2021, I had a transaction stuck in the main pool for three months. Blockchain technology has become more stable, with improvements on Ethereum and the emergence of layer 2 solutions. As for wallets, they serve as an online version of our physical wallets, storing access passes and tickets. The incentive for using a payment-based access control solution is that there are options for free access or having fees paid by other institutions.

But in 2021, I did a transaction and I decided that no, I pay only this. Only a few. My transaction was in the waiting area, we call it the main pool, for three months. Three months? Yes, exactly. And you pay more about it. Exactly. But this is like in the past, the blockchain used to have more problems related to prices and the costs. Now it's more stable related to that. We have some improvements in the blockchains to do that, especially on Ethereum, that is the main blockchain that we have as much content where the smart content started. Also existing some layer 2s that they are second blockchains based in the main blockchain. And they can, a transaction in a layer 2, it's a fraction of cents, like it's almost zero. And you don't care more about this.

Next question is, I think for me, blockchain has a bit of an image problem. Because people associate it with crypto. And if you're not interested in crypto, people don't look at it. And what I noticed is you're basically logging in to access hidden or paid content, but you need to connect a wallet. And what do you think about the terminology of wallet? Because it doesn't make sense to me that it feels like, it feels a bit weird. I'm just logging in, right? Yes, but today, do you have the Google wallet? And can you have access to some conference with the QR codes stored in your wallet? This is possible today. So the wallet is bringing this kind of things now that's not only related to money, but we used to have our identity in our wallet, our physical wallet. If you have a ticket to a game, you put in your wallet. It's the same concept, but it's online. Yeah, so it's an access pass and just like your bus pass that you have in your physical wallet.

What is the incentive of using an access control solution where payment is necessary when well-tested and free solutions are already available? Well, first of all, you can have this kind of access without paying because there are some concepts that are account abstractions or where other institutions can pay the fees for you. So you really don't pay nothing more, depends on the system.

Access Control Solutions and Blockchain Advantages

Short description:

Using an access control solution with payment provides the option for free access or having fees paid by other institutions. Decentralized systems allow ownership control and selective sharing of identity. Blockchain ensures transparency and trust by recording transactions and requiring network approval, making information tamper-proof.

Okay. Then I get the terminology. Thank you.

Next question. What is the incentive of using an access control solution where payment is necessary when well-tested and free solutions are already available? Well, first of all, you can have this kind of access without paying because there are some concepts that are account abstractions or where other institutions can pay the fees for you. So you really don't pay nothing more, depends on the system. But remember that I started my talk talking about the ownership of things. So the ownership of your account in some systems. And some systems, they are the owner of you in that system, and you don't have the other choice. If you can have your ownership outside in a system that is decentralized and you have the control of this, you can choose where you'd like to use your identity and which part of your identity you'd like to share with that system.

Next question. Yeah, we have time. What is the advantage of using blockchain to grant user permissions rather than just using a visual database such as Postgres? Usual database, not visual. Yeah, it's almost what you said before. But talking about the difference between a blockchain and a non-blockchain, a normal database, we are talking about how you can trust the information, how easy it is to update a normal database. If you have the right access, you can do that for sure. How you can update a blockchain. Only creating a transaction. This transaction will be recorded, so it's transparent. If you'd like to see, any person can see that the transaction happened and you must have an approval of all the nodes or a great part of the nodes in that network. It means that you cannot have a transaction to do something that is wrong. And in a normal database, you can do that. So I think this is the most difference related to have information that are tamper-proof.

Okay. Well, thanks a lot. That's all the time we have for our Q&A round.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced 2021React Advanced 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
TypeScript and React: Secrets of a Happy Marriage
React Advanced 2022React Advanced 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up