Game Development with ReactJS, CSS, and React Three Fiber

In this talk, I will share my experience in game development using ReactJS/CSS. We will explore how to make the most out of the component management provided by this library, along with the capabilities of CSS for creating an appealing user interface. Additionally, we will uncover how to leverage the React Three Fiber library to create games with a 3D experience.

Rate this content
Bookmark
Video Summary and Transcription
The video explores the potential of React for game development, highlighting its use in creating various types of games. Puzzle games like Dice Merge demonstrate how CSS and React manage game state and UI, providing smooth gameplay without heavy backend requirements. The discussion also covers isometric games, utilizing CSS and React to create visually engaging experiences such as Lawn Cat and Cozzle. Board games like Parchees showcase the integration of backend infrastructure for real-time multiplayer functionality. The concept of Reactfibre is introduced, illustrating its role in merging React with 3.js for 3D game development, as seen in the bowling game demo. This demo also highlights the use of hooks like use-frame to validate application renders. Resources like 3.js documentation and courses are recommended for those interested in learning more about React game engines and developing games with React and 3.js.

FAQ

Games developed exclusively with CSS and React feature fully styled user interfaces with CSS and game state management handled by React, enabling smooth and responsive gameplay without heavy backend requirements.

Jorge has developed various types of games using React.js and CSS, including puzzle games, isometric games, and board games.

Reactfibre, a real renderer, allows developers to write code in JSX which is then transformed into a 3.js scene, facilitating the integration of 3D graphics into web applications for game development.

Jorge classifies his games into three categories: puzzle games (e.g., Dice Merge, Puzzle Puzzle), isometric games (e.g., Lawn Cat, Cozzle, Hocus), and board games (e.g., versions of Parchees and Jansi).

3.js is a cross-browser JavaScript library that utilizes WebGL to create and display animated 3D computer graphics in a web browser, offering a powerful tool for developers to enhance visual elements and user experience in games.

Jorge Rubiano is a Software Engineer from Colombia with a deep passion for technology and programming, specializing in game development using technologies like React.js, CSS, and Reactfibre.

1. Introduction to React.js and Puzzle Games#

Short description:

Hi, everybody. My name is Jorge Rubiano, a Software Engineer from Colombia. Today, I will share the games I developed using React.js and CSS. The games are classified into three categories: puzzle games, isometric games, and board games. React.js is an open-source frontend JavaScript library for building user interfaces. Let me show you two puzzle games, starting with Dice Merge.

Hi, everybody. My name is Jorge Rubiano. I am a Software Engineer from Colombia. I have a profound passion for technology and programming. I have always believed that the most effective way to learn is by doing and teaching. Feel free to connect with me on Twitter or scan the QR code to explore my personal page. There you will find the games that I will share with you today.

The topic for this conference is game development with React.js, CSS, and Reactfibre. Our agenda is the following. First of all, we are going to talk about React.js. Second, I'm going to share with you the types of games that I have developed with React.js and CSS. I classify these games in three categories. Puzzle games, isometric games, and board games. Next, we are talking about 3.js and Reactfibre. Also, I'm going to share with you some games that I developed with Reactfibre. And finally, I'm going to show you a demo. In that demo, we are going to develop a very simple game with Reactfibre.

Okay, React.js. React.js is an open source frontend JavaScript library for building user interfaces based on components. It's maintained by Meta and a community of individual developers and companies. With React, it's possible to create encapsulated components that handle their own state and turn them into complex user interfaces. Now, my idea is to share with you some of the games that I have developed using only React and CSS.

As I mentioned before, I classify these games in three categories. The first category is puzzle games. A puzzle game is a type of interactive entertainment that challenges players to solve various mental challenges often involving logic, pattern recognition, and critical thinking. These games present players with puzzles or problems that need to be solved in order to progress. Some of the games that I developed in this category are games, for example, Dice Merge, Puzzle Puzzle, and so on. I'm going to share with you two of these games. The first game is Dice Merge. This is a very simple game.

2. Dice Merge and Pulse or Puzzle Games#

Short description:

In this game, we drag and drop dice into a grid and merge those with the same color and value. The game is developed using only CSS for the UI and React for state management. Another game is the pulse or puzzle, where we move balls of the same color between containers. It's developed using CSS and React as well.

The idea of this game is that we need to drag and drop dices into this grid, and we need to merge the dices with the same color and value. For example, I'm going to—we have this value 1. And here I'm going to merge this value, this dice with this dice. And you can see here that this dice is in this case the value 2. For example, if I drag this here, the next value should be 4, and so on.

As I mentioned before, one important point here is that this game is developed using only CSS. The whole UI, as you can see here, I'm using CSS. And to manage the state of our game, we are using React.

Other game is the popular pulse or puzzle. Basically, the idea of this game is that we need to move balls that have the same color to one container to another container, as you can see here. It's very simple. Basically, we need to know how we organize this information. For example, here I made a mistake. I can move this here. I can move this here. And here. And now we solve that level. Again, this is developed using only CSS for the UI. All the UI is with CSS. And also React.

3. React, Isometric Games, and Board Games#

Short description:

With React, we manage the state of our game. The second type of game that is possible to develop with React and CSS is isometric games. In this category, I developed three games: Lawn Cat, Cozzle, and Hocus. These games utilize the isometric perspective and are developed using only CSS and React. Another type of game that can be developed using CSS and React is board games. I created versions of Parchees and Jansi, which use a backend infrastructure for real-time multiplayer functionality. These games demonstrate the possibility of creating simple yet engaging games using CSS and React.

With React, we manage the state of our game. The second type of game that is possible to develop with React and CSS, at least from my opinion, is isometric games. An isometric game is a table for your game that employs an isometric projection for its graphics, representing a three-dimensional environment in a two-dimensional plane. This perspective creates the illusion of depth and allows players to navigate and interact with the game world from a fixed diagonal viewpoint.

In this category I developed three games, such as Lawn Cat, Cozzle, and Hocus, taking advantage of the isometric perspective. For example, I'm going to show you, in this case, the game named as a Cozzle. Cozzle, this is the game named Cozzle. Basically, as you can see here, we are taking advantage of the isometric perspective. Here, the idea is that we need to move this box from one point to another point, even we have some portals, as you can see here. But again, I want to reiterate that these games are developed using only CSS. All the UI that you can see here was built using CSS, and we managed this type, of course, again, with React.

The other type of games that is possible developed using CSS and React is board games. A board game is a tabletop game typically playing on a flat surface, often with a pre-designed board and pieces of tokens. Board games offer the opportunity to engage in a strategic gameplay, often involving dive roles and card management. The games that I developed, or the board games that I developed with React and CSS, are a version of Parchees and a version of Jansi. Another particular note here is that these games use a backend infrastructure because we can also play in real-time versus other players, in this case using, for example, web sockets. I'm going to share with you these games. The first game is Parchees. With Parchees, we can play to players, for players in real-time, or even we can play offline, in this case, versus a bot. Basically, as you can see here, we have the board that we have for Parchees, but the difference here is that this board is developed using CSS. All the elements, the tokens, the dices that we have here are developed using CSS. But again, all the state for our game, in that case, we are using React. Here we apply the same rules that Parchees has, and we can apply the rules using React. As I mentioned before, I want to show you this because I want to reiterate that it's possible to create these games that are simple games compared with other games using only CSS and React. The other game is a version of Ojansee. As I mentioned before, this game also has, for example, Ojansee, the capability of playing online versus a friend or creating events in private rooms. For example, the idea of Ojansee is basically we have this board and we have five dices. We need to have five dices of the same value to have Ojansee. But if we don't have Ojansee, we can use the combination of these dices to, I don't know, to select one value from our board. For example, I can select this value because I have three dices of the same value.

4. Introduction to WebGL and 3.js#

Short description:

When creating 3D games on the web, we can utilize WebGL, a powerful technology. One popular library for working with WebGL is 3.js, which allows for the creation and display of animated 3D graphics in a web browser.

And again, this game is, the UI of this game is only CSS, and with React, we manage the state of our game. Okay, but when we need to start creating games with 3D, with the 3D experience, as you know, on the web, we have a very popular or very powerful technology, in this case, it's WebGL. If we as a JavaScript developers want to start working with WebGL, we have also different options and different libraries. And one of the most popular libraries to work with WebGL is 3.js. As you know, 3.js is a cross-browser JavaScript library and application programming interface, using to create and display animated 3D computer's graphics in a web browser using, in this case, WebGL.

5. ReactiveFiber and Game Development#

Short description:

ReactiveFiber is a real renderer that allows us to use React and 3.js together. It was created by Paul Henschel, the founder of PointMandris. I developed two games using ReactiveFiber: a movement-based game and a color-changing game. These games demonstrate the power of ReactiveFiber and 3DJS. Now, let's move on to a demo of a bowling game using ReactiveFiber, starting with the score component.

But I wonder if there was a way to use both React and 3.js together. The answer is ReactiveFiber. ReactiveFiber is what is referred to as a real renderer. The concept behind a renderer is that we write code in JSX and think the data is transformed into something else. In our case, a 3.js scene. ReactiveFiber was created by Paul Henschel, also known by this handle on Twitter. Paul is the founder and manager of PointMandris, this is a collection of open source developers.

Now, my idea is to show you two games I developed using ReactiveFiber. The first game is this type app. This is a very secondhand game. The idea here is that, as you can see here, we need to move over characters. But, for example, the box is in a different place that our character is. As you can see here, I can rotate the whole scenario, because in this case we are using ReactiveFiber to achieve this. And the idea is that we need to move this box to the green floor. Again, for example, we can achieve this because we have the power of ReactiveFiber and also 3DJS at the same time. The other game is a simple game. The name of this game is Colored. The idea is that we need to change the color for the floor. As you can see here, this box has the green color, and we need to change the color when the face of that box is down. And yes, we need to paint the floor. In this case, it's a very simple game, but with this game, the challenge was to validate, first of all, the rotation for our cube, and also to validate when the, in this case, the face is down or is up, basically.

Okay. This is the two simple games that I developed using ReactiveFiber. Now, the idea is to show you a demo. In that demo, we are going to develop a very simple game. In that case, we are going to develop a version, a bowling game, using ReactiveFiber. For this demo, we are going to develop a bowling game. The first component that I'm going to add to game is the, in this case, sorry, the score component. The score component, we need to pass a couple of props. The first prop that we will require is the information for our players.

6. Bowling Game State and Components#

Short description:

We have several variables for the game state, including the current tour and the ball force. We also have components for showing the state of the pins, displaying game messages, and showing the final results. These components require information about the players and the game over status. Additionally, we add the Scene component, which includes a canvas element and camera configurations. We also add lights to the game.

We can extract that information for the game state variable. Also, we need to know what is the current tour. That is why we have the tour variable as well. And finally, we need a variable that indicates if the ball falls at the end of the bowling lane. That is why we have a ball force variable. This is a boolean, basically.

The other component that we require is a component that shows the state for our pins. That is why we have the state pins. And also, we have, in this case, a drop-in pins variable. This variable basically is a list of pins that show what is the pins that are visible and what are the pins that are not visible. OK.

The next component is a component that shows the different messages for our game. Messages such as, for example, if we have a turkey, if we have, for example, a strike and so on. The next component is the component that shows the final results for our game. That is the gaming statistics. This shows, for example, who was the winner and so on. To do that, we require the information for our players as well. As you can see here, in this moment, we are shown with this component. But we only need to show this component when the game is over. That is why, again, we have the game over variable here. And using conditional rendering, we can validate that this component is only visible when game over is, in this case, true.

Now it's time to start adding the different components for reactive fiber. The first component is the Scene component. Basically, as you can see here, we have a canvas element. This is a component from reactive fiber. And we have a couple of configurations for our camera. And also, we are enabled shadows in our scene. Okay. Now, it's very important we are going to add a couple of lights to our game. Here, we are using two lights.

7. Bowling Game Setup#

Short description:

We are going to use models and suspense in this game. The ball and pin models will be used, along with the physics component from Rippier. We will load the bowling lane model and add the pins, providing necessary information such as a key and event. Additionally, we will add a component for repair and orbit controls to manipulate the camera. Now, we have the basic setup for our game.

A directional light with solid configuration and also an ambient light. Now, because we are going to use some models, we are going to use suspense. Remember that when we are using suspense, we can, in this case, pass a 4-ball.

For this particular game, we are using three models. We are using the ball and finally, our pin. Now, inside this, we are going to add the physics component. The physics component is a component from Rippier. With Rippier, we can manage everything related to physics and collisions.

Now, here, I'm going to load our first model that is related to the bowling lane. Also, I'm going to add our pins. And here, for our pins, we require a couple of information. The first thing that I'm going to pass is a key. With this key, we know if it's necessary to restore our pins in our game. Also, I need to know the information to know if the ball falls at the end of the bowling lane. And also, we require an event. With this event, this event returns the list of pins that are not visible or the list of pins that we are dropping down.

Okay. Now, I'm going to add another component for repair. That's the component. With this component, we can see the different colliders that we have in our scene. Also, I'm going to add orbit controls from Drave. With orbit controls, we can manipulate our camera. In this case, we can control the camera. As you can see here, we have the bowling lane. And, also, at the end of our bowling lane, as you can see here, we have our different pins. If I rotate here our model, as you can see here, we have our pins. As you can see here, we can add different colliders as well. Now, these yellow lines are the different colliders that we have in our scene. Okay. We have now the basic for our game.

8. Adding Player Component and Second Player#

Short description:

Now, let's add the player component, which requires props for the current turn, game over status, and ball falling event. Since the player controls the camera, orbit controls are no longer needed. The score, state pins, game messages, and game statistics components are rendered in the DOM, while the components inside the canvas element handle rendering. I can throw the ball, observe collisions with the pins, and see the game messages component in action. Now, I'll add a second player and change the ball's color.

But now, it's necessary to add one of the main components here. That is the player component. For our player component, we require a couple of props. First of all, we need a prop that indicates if the current turn for that particular user ends. Also, we need to know if the game is over. That is why we pass the game over a value. Again, this is a boolean at the end of the day. And also, we require an event that returns if the ball falls at the end of the bowling lane. That is why we have the event and the ball falls.

Now, because our player is going to control the camera, we don't require our orbit controls anymore. And also, I removed the information related to the debut component. As you can see here, this is the basic for our game. Meanwhile, I'm going to remove these comments because it's not necessary anymore. And now as you can see here, we have everything. In this case, that's the good thing about working with components. As you can see here, we can understand everything that is working here. As you can see here, we have the information for the score. Here we have the score, the information for our state of the components for our state pins, is this. Our messages, we are going to see what is the game messages component. The game statistics, these components are components that render into the DOM. At the end of the day, these components are HTML. But the component that we have inside is seen, are the components that render inside a canvas element.

Now, as you can see here, I throw the ball, and we have, in this case, a collision between these elements, between the ball and our pins, and here this is the game messages component in action. As you can see, I can move the ball to the right and to the left if I want. And, also, I can throw the ball here. For example, in this case, I have a spare because all the pins are now visible in two turns. But, now, as you can see here, I'm playing alone. The idea now is to add a second player. To do that, I'm going to add... first of all, I'm going to change the color for our ball.

9. Adding Second Player and Passing Props#

Short description:

I'm going to add a second player, a bot, with a red ball. I pass the necessary information to the player component using React props. I extract the current turn and isBot property for each bot. I also pass the bottle color property. Finally, I reload the page.

For example, for this particular user, it could be green. And now, I'm going to add our second player. To do that, I'm going to copy and paste this and change the name. For example, player 2, the color could be red, but I'm going to say that this is a bot. That means that we are going to play versus the machine. Okay, I save here. And now, I need to pass this information to our player component. Again, here is only using the thing that we know about React. In this case, we can pass a couple of props. And here, I can extract the information for each bot for the game state variable. Here, I need to know what is the current turn. And here, I extract the information. In this case, the isBot property. Okay, now I can do the same thing for our bottle color. In this case, I can copy and paste here. I indicate the property that, in this case, is the bottle color property. Here, I need to pass this information here. I save, and now I'm going to reload the page again.

10. Game State Management and Complex Components#

Short description:

In this game, I manage the state without using any libraries. The ball movement and bot's actions are random. The player component is the most complex, with validations and the use of the Ray library's Rigibody component. The ball component is loaded inside the player component, and we also use the use-frame hook.

Okay, this is all about the game. For example, if you are curious, this is how I manage the state. You know that sometimes we can use some libraries to manage our state. For example, we have reduce, we have a voltio, we have a different options. And for this particular case, because it's a very simple game, I'm not using any library for that. I use a parent component and, from that parent component, I control the different components.

Okay, now, as you can see here, we have our ball. In this case, the ball, as you can see here, is green. I can swipe here, OK? No? OK. Wow! We have a strike, in this case, because we drop all the balls. Now it's the turn for our bot. As you can see here, I am not moving nothing. In this case, the bot takes the decision what is the movement that the bot wants. But, to be honest, this is a random movement. This is not that I'm using something related to artificial intelligence or something like that. No. Because in this case, everything is I'm using 100% random values.

I'm going to show you very quickly what are the most complex components, in my opinion. In that case, it's the player component. As you can see here, inside of the player component, we have a couple of validations. Here, this is the render. In the render, as you can see here, we are using another component from Ray. That component is Rigibody. With Rigibody, as the name implies, we can apply the different information for that particular Rigibody. One of that information is, for example, the collider. Another information related to the mass. And here, as you can see here, I have a ball component. The ball component, at the end of the day, is a component that we are loading inside of our player component. Okay. The other thing that I want to show here is that, for example, we are using a use-frame hook.

11. Reactive Fiber and Game Development Conclusion#

Short description:

Use-frame is a hook from reactive fiber that allows us to validate the render of our application, such as the camera position. This demo showcases how easy it is to create games using reactive fiber. You can play the final game by scanning the provided QR code. Reactive fiber is an emerging option for game development, and it's recommended to familiarize yourself with 3.js before diving into it. Additional resources include the documentation for 3.js, reactive fiber, and relevant courses.

Use-frame is a hook from, in this case, a reactive fiber. With this hook, we can validate everything related to the render of our application. For example, here, I'm validating, for example, the position for our camera. As you can see here, our camera follows our player. As you can see here, we validate that action here. And yes, this is a very basic game built using reactive fiber.

My idea with this demo is to show you how easy it is to create these types of games using reactive fiber. If you want to play the final game, you can scan this QR code and play it on your mobile device or even on desktop.

Some conclusions. This kind of games can be developed using various libraries, exclusively react.js. I mean, we can use, for example, 3.js with Vue or, for example, with Spelt. Before diving into reactive fiber, it's recommended to familiarize yourself with how 3.js works, as they share similar concepts. Also, reactive fiber is emerging as a promising option for game development. Some resources, for example, the documentation for 3.js and reactive fiber, and a couple of courses that I think are very important to learn more about React and reactive fiber and 3.js.

Yes, that was my presentation. I want to say thank you so much for your attention. Yes, thank you so much.

Jorge Rubiano
Jorge Rubiano
22 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

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

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
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.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
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.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
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 🤐)
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
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 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 WorkshopFree
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.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
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