SVGs to Make Your Blog Stand Out

Rate this content

Are dev blogs dying out? No, they're not! Blogs are making a comeback. But sadly, most of them are lacking personal style. So, what can developers do to make their blogs unique and prettier? In this talk, I’ll show you how SVGs (as React Components) can help you take your blog from dull to awesome.

36 min
14 May, 2021


Sign in or register to post your comment.

AI Generated Video Summary

Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.

1. Introduction to SVGs for Blog Design

Short description:

Hello everyone. Today I'm going to talk about SVGs to make your blog stand out. I'll show you how to use SVGs inside your project and give you some ideas. An SVG is an XML-based vector image that supports interactivity and animation. I'll use a blog as an example to demonstrate the use of SVGs.

Hello everyone. First of all, I want to say there is really a pleasure to be here at React Summit Remote Edition and today I'm going to talk about SVGs to make your blog stand out. My name is Elisabet Oliveira and I'm a senior product designer working right now for Elastic. Elastic is a really cool company. We all work distributed. I work from Lisbon, Portugal. I'm currently living in Lisbon, Portugal. I have colleagues from the United States. And I'm basically, right now, helping building the Elastic UI, our design system, and I'm also helping sometimes like helping building Kibana, one of our products.

Today I want to talk about, once again, about SVGs. I've been talking about SVGs before and I've been in other editions of React Summit, but today I want to tell you a little bit like how you can use SVGs inside your project. Why? Because a lot of people, normally, when they see my talks, they say, oh, you know, SVGs are really cool. I wish I could use them inside my projects, inside my products. Actually, you can use SVGs inside your projects and products. Today I want to show you just a few ideas of what you can do. What is an SVG? An SVG is XML-based vector image. This is basically the definition from Wikipedia. It says that the format for two dimensional graphics with support for interactivity and animation. As you can see, when you have an SVG, basically an image, and you open the file, you will see all of this code. And this code, you actually can change the properties, fill, colors, all of these things, and it makes really great if you want to animate or to interact with the SVG.

So I thought for this talk that a blog can be a very good example of how we can use SVGs. So I can give you like an example like last month I started trying to update my blog. I started like researching a lot and I wanted to build my new blog. I wanted to use Next.js. Also I wanted to use Chakra UI, so I started researching a lot and I found I found this blog from Noah and Noah created this blog with Next.js and also with Chakra UI and he made it open source. So one thing that I noticed from Noah's blog, first of all it's like very just a text. It doesn't have a lot of design. This is like the blog part, so this is like the the first page, the home page, and then you have like the the blog and I noticed that okay you have mostly text. You don't have too much of design.

2. Using SVGs to Enhance Blog Design

Short description:

You don't have too much of design. Nowadays, most developers' blogs are just text. However, a good design can help your blog stand out. In this talk, I'll show you how to use SVGs to enhance your blog's design. We'll transform SVGs into JSX, allowing for easy code splitting, animations, and styling. Plus, inline SVGs eliminate the need for HTTP requests.

You don't have too much of design. So I went like to Noah's repo and I saw okay I forked the project and then Noah's said that it took the inspiration from Lee Robison. So I went to Lee Robison's website and this is like his blog and it's also very content based like mostly just text. And I realized okay nowadays most of developers blogs are just text and they don't have too much of design. Normally they have like an icon to change the theme from dark to light or from light to dark. They don't have a logo or they don't have images. And so I thought okay yeah that's okay a blog should be content focused. So there's nothing wrong with these blogs. I know that the content is more important but I think, and actually I'm a designer so that's why probably I think this, that a good design can help your blog stand out. So I started thinking about that and and I thought okay so I'm going to fork Noah's blog. But how can I make it stand out a little bit? So I said okay I can use, I can change a little bit the design you know like put image and all of these things. But I can use SVGs for do that and that's what I want to show you. So for what I'm going to do is basically show you how you can use like SVGs and for this talk we're going to transform the SVGs into JSX. In React you can also import SVG as an image and if you do that you almost can't interact with the content inside the image. So what we want to do is to use the SVG inline. So we're going to transform into JSX and this is actually really good because first of all if you transform the SVG as a React component you transform the SVG into JSX you can easily split the code in different parts. You can have an image that you split in different parts. It's perfect for animations and styling with CSS and you can make use inside the SVG of the props of the state and event handlers like onClick, onMouseLeave, onMouseEnter and all of these event handlers and the best thing is it's inline SVGs so you don't have like HTTP requests. So it's the same as using a normal React component. So right now, let's dig into some code examples.

3. Splitting the Project and Converting SVG to GSX

Short description:

I'll show you how to split the project and create a folder for SVG components. We'll start with changing the logo, which has two different faces. I'll explain how to export the logo with ID attributes for easier manipulation. Then, I'll demonstrate how to convert the SVG into GSX manually. Now, I have the components ready.

So if I go here, first of all, I want to show you how I split the project. So when I started from Noah's Fork, you basically had all the components here and I created like a new folder called SVGs. So inside this folder, I will have all my SVGs components. So it's like basically GSX React components, but inside these components, you have SVGs. So they live inside this folder called SVGs, okay, components and SVGs.

So first thing that I want to show you is how you can, first of all, you have like an image and let's start like with the logo. First thing that I wanted to do from Noah's blog was to change the logo. So I created my own logo And as you can see, I have like two different faces. One that is called the love struck and the other face that is called the happy face. So I feel like I want to animate these and my idea was to interact with the logo. So when I hover the logo, I want to change the face from happy to love struck.

So what I'm going to do is basically export this logo. I could copy paste. Actually, I could, in Figma, I could copy as SVG. And then I use a lot of this tool from Jake. I could pass the markup and as you could see, I would have like the SVG here. But I don't like to do this way because when I like to export the SVG, as you can see here, I prefer to export and I'm going to export to my desktop. And the reason I'm exporting this way, it's because I want to include ID attributes. Okay. So I want to include ID attributes. So I'm going to my desktop and I'm going to drop it. And now I have SVGs with IDs. As you can see in this option, I'm not cleaning the IDs. And the reason I'm doing this, the reason I want the IDs is because then it's easier when I'm manipulating the SVG, when I'm trying to change properties and interact to the SVGs, it's easier to find the SVGs and all of these things.

So what I do here is I copy and then I pass it here. Actually, I should copy like this and then I use this SVG to GSX. You can use other tools to convert the SVG into GSX. I prefer to do it manually because I can see what is happening and I can optimize it the way that I want. So now that I have this, I can copy. And now, okay, I have it here, my components.

4. Interacting with SVGs and Animating Elements

Short description:

I'll show you how to interact with SVGs and create animations. By using mouse enter and mouse leave events, I can check if the mouse is entering or leaving the SVG. This allows me to show different faces based on the mouse position. The blog also supports changing the light and dark theme, which updates the logo color. I'll demonstrate how to animate the planets in a simple and effective way.

And let's say that I copy that and I would copy and paste here. And now I want to show you. Actually, it's already here. And I want to show you how you can interact and now you can create like, interact like with SVG and create animations and all of this cool stuff.

So first thing that I'm doing here is having like this event on mouse enter and on mouse leave. And I'm using this hook you state to see when it's over. So by setting it's over I can use this variable is over just to check if the mouse is entering the SVG or if it's leaving the SVG. And this is like Sharker UI and this is like the SVG.

And now that I have like these events that I can check if it's over or not. So now what I want to do is as you can see in my SVG, I'm going to change if it's over, I'm just showing that part that face left struck that is like a group and if I'm not over ring I want to to show the face Jave. So basically, if you see that's the reason I exported the icon, the logo with the two faces. And now in my code I just check is it over? So if it's over, I just want to show the left struck. If it's not over, I'm going to show the happy face.

Okay, so now let's see. Now this is how the blog looks like. So as you can see if I over, now the face changes. Actually the logo is not that big, but I think it's a small interaction that it makes your blog looking a little bit better. And you can actually, if you don't have design skills, there are a lot of websites where you can use open source SVGs, you have like flat icon, free pick, and you can just download from there. So this is the first interaction. And then the blog, you can change the light and dark theme. So if I change the dark and light theme, my logo is going to update the color. And the way I'm doing this, is I have like this prop called text color. And from the parent component, I'm checking what is the theme and I'm doing this like with Chakra. So in Chakra, I check what is the actual current theme, is it light or is it dark, and then I update the text color according to the light or dark theme. So basically, that MewKeyMew text, it updates the color to white if we are in dark theme and to dark if we are in the light theme. So basically, that's what this component does.

And then the next components that I want to show you, it's this part. So for creating this part, I actually wanted to just animate a little bit. I didn't want to have a lot of animation. But just to animate a little bit like the planets.

5. Using React Spring for Interactive SVGs

Short description:

And to do that, and to do that, so I exported like the that illustration. I'm using React Spring. You can change the team here with this icon. You can also interact with this illustration. If you click this illustration, you can update or change the current team. I'm using Chakra UI to see the current color mode. I have a toggle color mode button with all the SVGs inside. On click, I update the team. I use React Spring to create the interaction on hover. The animation is better when you try it yourself. I use Translate 3D and update the X and Y values according to mouse movements. You can try it yourself. You can add another SVG in your project, like this button.

And to do that, and to do that, so I exported like the that illustration. And I'm going to show you. So I have here, it's called the own illustration. And for do this, I'm using React Spring.

So one of the things actually that I'm also doing is you can change the team here with this icon. But you can also interact with this illustration. And if you click this illustration, you can also update or change the current team.

So to do this, I have like two, I'm using Chakra UI to see what is the current color mode. And then I have this toggle color mode. And with the toggle color mode, I have like a box from Chakra UI that I'm using like a button. And inside the button, I have all the SVGs. And what I'm doing is on click, I just update the team. And then I have two objects. One is the colors for the light team. And other object is the colors for the dark team. So what I do is I check if it's the light team. And if it's the light team, I update all the colors to use these colors of the light team object. And if it's the dark team, I update all the colors to use the colors dark from this object.

And then the other thing that I do is I use the React spring to create to create that interaction on over. So whenever the planets update a little bit, the computer seems a little bit slow because I'm just recording. And actually, the animation is a little bit better than you can try by yourself. So I use the react spring to to do that. So basically, what I'm doing there is just I'm using the Translate 3D and updating the X and Y values according to the mouse movements. So you can try to do this also by yourself. It's really easy. Actually, there's a demo and the React Spring website. It's basically almost a copy paste from there.

So, other things that you can add like another SVG in your project is this button. So, I wanted to create like a different type of button so the block could stand out, as I said, and instead of using like a normal button, I wanted to use my own. So, to do this, I have like this button.

6. Using SVGs in SharkUI

Short description:

With SharkUI, you can customize button properties, including the SVG aspect ratio and accent color. The color can be updated according to the theme. For cards in the dark theme, an SVG is used to make them stand out on hover. The panel background, part of the card, changes color on hover using React Spring. Lastly, the love button component, also using an SVG, is showcased.

So, basically, with SharkUI, I have all of these button properties and then that's my SVG, where I say where I'm not preserving the aspect ratio because I want the SVG to grow with the text. So, I'm just passing as a prop the height that I want and then the aspect ratio, the width, it goes to like 100% And then I'm passing also the accent color. It's this color. I could also update the color according to the theme. In this case, it works well. It works very well for the light and dark themes. So I don't need to update the color, but I could do the same as the text from the logo or as this illustration. The color could be updated according to the theme.

And other thing that I'm doing here is these cards. And for these cards, the idea for these cards is when we are in the dark theme and we hover the cards, I can't see the shadow. It's very difficult. So I needed a way to make the cards stand out. So I thought okay, if I have, like, what if I put like an SVG here and on hover, I update, like, the color. So that's what I did. And so I call the panel background. And the panel background, it's part of that card. And it's really easy. So I check if it's over. And it's over. It's coming from the parent. So I check it's over. I have like a fill color and another color for when we're hovering the card. And then for this one, I'm using, again, React Spring. So basically, what I'm doing here, if it's over, the over fill is the one that we see. And if you're not over, the animated pad is just with the fill color. So it's also really easy. So when we're over, you can see this effect.

And the last component that I want to show you, this is actually using an SVG, but the last one that I want to show you is this component. And it's like, it's what I call the love button. And the love button...

7. Creating Interactive Love Button

Short description:

For the love button, I'm using React Motion and Framer Motion to create an interactive experience. By scaling the button on hover and using variants and animations, we can achieve a unique effect. The background moves up, creating an engaging visual effect. I hope you enjoyed the talk and feel inspired to enhance your blog's design. If you have any questions, feel free to reach out to me on Twitter. Thank you!

For the love button, I'm actually using React Motion and Framer Motion. And I could use also React Spring. But for this one, I decided to use Framer Motion. More like to show you that you can use the library, that you feel more comfortable. And it's really easy to create this type of interaction with Framer Motion.

So if I copy this and copy and search for motion. Basically, one of the things that I'm doing with Framer Motion is just almost like the stylet components, motion.svg. And then while over, we scale a little bit. So whenever we're scaling a little bit, we also have the same interaction as the logo. So it checks if it's over or not and the face changes. And then what we also do it here is we have a variant and we animate. So every time we click, we update like the variants. So we go from zero to one, two, three, four. So when we animate we change the variants. So we go from the variant zero, variant one, variant two, three and four. So basically we just translating And so it starts like empty in the 44 pixels. And then when we go to the first variant that is the 44 pixels and then we translate to 33, 22, 11 and zero, and it creates like this effect. So it's basically there's a background that is going up, up, up, up and that's basically what I'm doing.

So here we are again. And that's it. I just wanted to show you the things that you can do with SVGs to make your blog stand out a little bit. I'm going to share the code and you can see the way that I'm doing the code. And you can also use this is like an open source project and that's it. That's basically the talk and I hope you like the talk. And if you have questions there's my Twitter. You can make any questions and after that you can also talk with me and do all your questions. And okay, that's it. Thank you once again and I hope you enjoy it and I hope now you have inspiration to make your blog with more design and more creative. And that's it. Thank you.


Benefits of Using SVGs in React Components

Short description:

Looks like music without lyrics is the top one which makes a lot of sense. I feel like that's a little bit less distracting than some other types of music. The first question is, since SVG is valid JSX inside React components, is there any benefit to keep the SVG that I get from designers in separate files? No. It's better to use the SVG in line. If you're going to animate the SVG or change properties, colors, it's better to transform the SVG into React components. If you're not going to change anything, just import it as an image. The next question is, is it better to use SVG always as a React component? It depends on your use case. If you want interactions and customization, using SVG as a React component is better.

Looks like music without lyrics is the top one which makes a lot of sense. I feel like that's a little bit less distracting than some other types of music.

Awesome. Yeah, but I actually listen to the same song over and over.

That's awesome. So, let's do the Q&A. So, we got some amazing questions from our discord. And so, let's see what people were asking. So, the first question is, since SVG is valid JSX inside React components, is there any benefit to keep the SVG that I get from designers in separate files? And this is from Aprilion.

So, can you do the question again? Yeah. So, since SVG is valid JSX inside React components, is there any benefit to keep the SVG that I get from designers in separate files? No. I think it's better if you use the SVG in line. But I think it also depends what you want to do. If you're going to animate the SVG, if you're going to change properties, colors, and all of this is better if you transform the SVG into React components. If you're not going to change colors or anything, you can just import it as an image because you don't have any benefit of putting in line. So, why would you transform? Yeah, one of the benefits with BEO, you won't have an HTTP request, but I think it depends on your case. If it's just an image that you don't change anything, just import as an image. If you're going to animate it or you want to change colors based on React props, I think it's better to transform into a component.

Awesome. The next question is from Vladislav. It's always fun to read people's usernames because it's like how do you pronounce this? So is it better to use SVG always as a React component? That's it. It depends. I like to use as a React component, but because normally when I think I'm going to use an SVG is because I want to change properties, change the feel, animate, and also have the best quality because it's like a vector image. So, I think if your use case is you're going to have interactions, you want to let's say you have an icon, and the icon is an SVG, and maybe you want to make the icon really customizable because in one part of the page you want to use that icon in dark color, but maybe in other page you want to use that icon with a different color. So, you just need to pass a prop with the color. If you are importing an image, the SVG as an image you would have to export in red and import, and then you would have to export again with another color, import as an image, and do this over and over again. So, if you want to make use of the customization, I think it's better to transform into React component.

Cool. Awesome. Two questions from Habma.

Implementing SVGs as Responsive React Components

Short description:

To implement an SVG as a responsive React component, you can set the width and height to 100% and not preserve the aspect ratio. Pay attention to the aspect ratio when working with SVGs. For accessibility, you can use the SVGR library to transform SVGs into React components. Use the title tag or aria-label to provide context. Chakra UI allows you to get the preferred color theme, darker or light, from the user agent or navigator.

So, the first one is, how would you implement an SVG as a responsive React component instead of defining width, height, and view box? Yes. So, actually, that button that I created was responsive. And what I did with, one thing was, I don't preserve the aspect ratio because I want it to grow. And the other thing is, I say that the width is 100% and the height is also. And so, it always grow. But you could do the same with other images. You can use like the width. And also, you have to pay attention to the aspect ratio because with SVGs, you only have that. And yeah. But you can make it responsive.

Cool. And what are the points which we as a developer should keep in mind while using SVGs to make it accessible? Are there any tools or libraries for automatically checking accessibility for SVGs? Yes. Actually, there's the SVGR that you can create your own script and transform the SVG into React components. And where I work at Elastic, we use this SVGR. And when we do, actually, inside SVGs, if you use the title for accessibility, so, if your SVG is just doing nothing, it's just an image that it doesn't say anything, you can use like hidden true. But if your SVG is like an icon that says something that is important for the context, it's better if you pass a title. And with SVGR, you can also do that automatically. And so, yeah. I would use that. There's a title tag, and you can it's better if you use the title tag. Or you can also use aria-label.

Cool. Cool. And then from Vlad S., can we get preferred color theme, darker light, from the user agent or the navigator? With Chakra UI, yes. I think you can have. By default it peaks. If you run it properly. If you install Chakra UI properly, you can say that according to the user preference, it opens in darker light. Chakra UI is one of my favorites to use as well. I'm using it for everything.

SVG Performance and Animation

Short description:

For the card hover, using CSS would be better for performance than using an SVG. Depending on the complexity of the SVG, CSS can be simpler and more efficient. The tool for changing SVGs to JSX is called When using React SVG animations, performance issues may arise, especially when running resource-intensive tasks simultaneously. JavaScript-based animations can slow down websites, and CSS animations may be a better alternative.

It just looks so good by default, and it's easy to use, too. Cool.

Thomas B. asks, for the card hover, was using the circular SVG and changing the color, is this more performant than just using a div with border radius and the background color? I think probably using the CSS would be better for performance than that SVG, because I think if your SVG, sometimes if you do it properly, if you know what you're designing, when you export it, it's really simple, but sometimes if we use especially like this type of software, like Figma or Sketch, and you export like a square or a triangle, it creates a lot of paths. Sometimes, if you know to create byte code, you could just say circle, or it could be a very simple SVG, and sometimes it's like over-complicated SVG, and for that reason, I think sometimes CSS is just, and Adib is much better. In that case, I think I did it that way because I just wanted to show where you can create with SVGs, and maybe in that example, yeah, I think Adib would be better.

Cool. Another one from Stevie R. What was the tool for changing SVGs to JSON? To change SVG to... To JSX, sorry. Yeah. So the name of the tool is... Let me check in here. It's called Aptly named. Yeah. Does exactly what it says. Yeah. Yeah. That's awesome. So this one's from Im Sardon. Question. Have you issued any performance issues while playing with React SVG animations that we should be aware of? Yeah. Actually, one of the examples that I was showing when I was overring that hero illustration, it was really slow. And it was because I was running Zoom and recording the talk. And doing this at the same time, it showed this performance is really bad. I think sometimes having this type of animation with JavaScript makes your websites slower. And sometimes it's better if you just had like CSS like on over. This happens with CSS.

Pros and Cons of CSS vs SVG

Short description:

Using JS libraries makes it easier to work with SVGs if you're not proficient in CSS. CSS is challenging for creating unique illustrations, while SVGs offer more flexibility and ease of use. When the design is complex and requires uniqueness, such as icons or logos, SVGs outperform CSS. Thank you for the talk and answering questions.

But I can say that also using this JS libraries, if you don't know CSS properly, it's much easier to do that. Awesome. Cool. I think you've pretty much answered this one. But from what are the pros and cons of CSS versus SVG? I think if you want to create something that is very unique, let's say you want to create that illustration, where I have that small cartoon. With CSS it would be really difficult to achieve that. But a lot of people do that. Like on CodePen, you see people designing things with CSS, but it takes time and it's like a div, and position the div in that place. And with the SVG it's just, you designed it and you export it. But I think in that example of the card, I didn't need that round corner with SVG. So I think we really have to know when you should use an SVG. And in this case I think when your design is complex and you want something that is unique, like an icon, it's very difficult to have that icon or a logo with CSS. So SVG would perform better for that. And it's easier just to achieve better results.

Awesome. Well, thank you so much for both the awesome talk and then also for answering all these questions where I put you on the spot here.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.
In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick
easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data
use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time

React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
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 Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
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 Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
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.

React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
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
- 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