Search

Nalezeno "react": 502

A Dark Mode Toggle with React and ThemeProvider


I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including YouTube and Twitter, have implemented it already, and we’re starting to see it trickle onto many other sites as well. In this tutorial, we’re...

Thinking in React Hooks


Amelia Wattenberger has written this wonderful and interactive piece about React Hooks and details how they can clean up code and remove all those troubling lifecycle events: React introduced hooks one year ago, and they've been a game-changer for a lot of developers. There are tons of how-to...

Filtering Data Client-Side: Comparing CSS, jQuery, and React


Say you have a list of 100 names: <ul> <li>Randy Hilpert</li> <li>Peggie Jacobi</li> <li>Ethelyn Nolan Sr.</li> <!-- and then some --> </ul> ...or file names, or phone numbers, or whatever. And you want to filter them...

Web Developer Search History


Sophie Koonin blogged "Everything I googled in a week as a professional software engineer," which was a fascinating look into the mind of a web developer and what they need to look up during day-to-day work. We all joke that we just Google stuff (or StackOverflow stuff) we don't know off the...

Hamburger Menu with a Side of React Hooks and Styled Components


We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off screen, particularly on mobile where every pixel of space counts. CSS-Tricks is all about double...

Model-Based Testing in React with State Machines


Testing applications is crucially important to ensuring that the code is error-free and the logic requirements are met. However, writing tests manually is tedious and prone to human bias and error. Furthermore, maintenance can be a nightmare, especially when features are added or business logic...

Using requestAnimationFrame with React Hooks


Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR: Pass an empty array as a second parameter...

React Slider with Parallax Hover Effects


Walk through the build of a React slider and learn how to implement a parallax hover effect. React Slider with Parallax Hover Effects was written by Ryan Mulligan and published on Codrops

Draggin’ and Droppin’ in React


The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide...

Using Immer for React State Management


We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState. Since states are not meant to be updated directly (because React’s state...

Fetching Data in React using React Async


You’re probably used to fetching data in React using axios or fetch. The usual method of handling data fetching is to: Make the API call. Update state using the response if all goes as planned. Or, in cases where errors are encountered, an error message is displayed to the user. There will always...

Run useEffect Only Once


React has a built-in hook called useEffect. Hooks are used in function components. The Class component comparison to useEffect are the methods componentDidMount, componentDidUpdate, and componentWillUnmount. useEffect will run when the component renders, which might be more times than you think....

What I Like About Vue


Dave Rupert digs into some of his favorite Vue features and one particular issue that he has with React: I’ve come to realize one thing I don’t particularly like about React is jumping into a file, reading the top for the state, jumping to the bottom to find the render function, then following...

Using GraphQL Playground with Gatsby


I’m assuming most of you have already heard about Gatsby, and at least loosely know that it’s basically a static site generator for React sites. It generally runs like this: Data Sources → Pull data from anywhere. Build → Generate your website with React and GraphQL. Deploy → Send the site to...

Build a Chat App Using React Hooks in 100 Lines of Code


We’ve looked at React Hooks before, around here at CSS-Tricks. I have an article that introduces them as well that illustrates how to use them to create components through functions. Both articles are good high-level overviews about the way they work, but they open up a lot of possibilities...

The Many Ways to Include CSS in JavaScript Applications


Welcome to an incredibly controversial topic in the land of front-end development! I’m sure that a majority of you reading this have encountered your fair share of #hotdrama surrounding how CSS should be handled within a JavaScript application. I want to preface this post with a disclaimer: There...

React Starter: Editor Tools


Before we move into more coding with React, let's talk about the tools that can help us streamline our React development. We want to go into our React development as well equipped as possible!

Hey, let’s create a functional calendar app with the JAMstack


Hey, let's create a functional calendar app with the JAMstack I’ve always wondered how dynamic scheduling worked so I decided to do extensive research, learn new things, and write about the technical part of the journey. It’s only fair to warn you: everything I cover here is three weeks of research...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace