Best of React — January 2021
- 1
- 2
LogRocket·5y
Top 10 VS Code extensions for 2021
Visual Studio Code is one of the most widely used code editors in the developer community. One of the reasons for VS Code’s popularity is its many extensions that speed up the development process. In this guide, we’ll explore the 10 VS Code extensions every web developer should know in 2021.
- 3
Hashnode·5y
Refactoring old code
A colleague asked me to write an extension on an old codebase. The old code was using loops and wasn't really efficient with the tools we have nowadays. I decided to use the Map method to map the data into the desired format. The last thing we need is to have the array sorted based on the number variable.
- 4
- 5
freeCodeCamp·5y
7 React Projects You Should Build in 2021
Reed Barger is the co-founder of React, a social media company based in San Francisco. Barger has worked on a number of React projects, including one that is set to open this year. He is also the founder of React's parent company, React North America.
- 6
The JavaScript Skills You Need For React (+ Practical Examples)
Reed Barger is the co-founder of React and the author of The React Manifesto. He has written several books about React, including a book on how to use it in the real world. Reed has also written a book about how to work with React in the Web.
- 7
How I built my own productivity app
With #christmashackathon, I decided to build my own productivity app. The idea was quite simple. All I wanted was a bunch of productivity tools like a Pomodoro clock, a to-do list, sticky notes altogether. The biggest challenge was turning a react app into a chrome extension.
- 8
keycdn·5y
Top Frontend Frameworks
The right frontend framework simplifies, streamlines and speeds up the website design and development process while still giving you the flexibility and features that you need to produce exceptional results. React is a popular JS framework that focuses on user experience. As of December 2020, mobile traffic has surpassed desktop traffic with 55.73% of traffic coming from mobile devices.
- 9
The Startup·5y
Redux/Context API for State Management in React.
Redux is a JavaScript library used to manage the state of applications (mainly popular with React) Context API provides a way to expose a shared entity called “state” that can be used by the components without having to explicitly pass a prop through every level of the tree. Prop Drilling is the process by which data from one part of the React tree to another by going through other parts.
- 10
React Status·5y
React's creator leaves Facebook
React's original creator, Jordan Walke, has left Facebook. This comes after ten years with the company where he put an indelible stamp on both React and Reason. In announcing his departure he simply said he is “starting a new company” but also goes to say that he will also be investing in startups in the React/Reason ecosystems.
- 11
- 12
DEV·5y
6 tips for better React performance
React is an amazing JavaScript library for building user interfaces. It is well suited for developing large and small apps built to get the highest performance possible. But sometimes we as a developer end up doing things that result in the poorly performing app. In this post, I have put together React-specific best practices to boot runtime performance.
- 13
JavaScript in Plain English·5y
Intro to React Server Side Rendering
How to build a React SSR app without any tooling or framework. We will use React, webpack, and Express to build an app that works as follows: Browser sends HTTP request to server to load a page. Server receives request and turns React JSX into HTML markup. Browser renders the HTML, downloads the client-side JavaScript bundle, and “hydrates” the HTML.
- 14
CSS-Tricks·5y
Components: Server-Side vs. Client-Side
Web components are reusable bits of HTML code that are written in JavaScript and made functional by the browser. Server components are also reusable, but are compiled into HTML before the browser sees them. Both types of components are still relevant and can help us build super awesome websites. Let’s explore how client and server components differ from one another.
- 15
DevDojo·5y
React Testing Library 🐐
React Testing Library provides guidance to test UI components in a user-centric way. This light-weight library produces tests that use components closer to the way a user would, giving the developer more confidence that their application will work when it goes out to real users. We’ll be taking a high-level view at this library, just to get you started from scratch.
- 16
daily.dev·5y
🔥 What's Hot in Web Development? — Weekly Picks #164
We also cover the upcoming Ubuntu 21.04 release, a React roadmap, and a few more interesting articles. If you are not familiar with ReScript yet, we have two articles this week that will help you with your first steps. We will come back with another list of interesting development posts next week.
- 17
Kent C. Dodds·5y
Wrapping React.useState with TypeScript
I made a useDarkMode hook that looks like this. It powers the "dark mode" support for all the Epic React workshop apps (for example React Fundamentals) I want to call out a few things about the hook itself that made things work well from a TypeScript perspective. Let's clear out all the extra stuff and just look at the important bits.
- 18
5 React Shortcuts That Will Instantly Boost Your Productivity
5 React Shortcuts That Will Instantly Boost Your Productivity. Reed Barger shares his tips on how to get the most out of your React. Read on to find out how to make the most of your new-found skills. Back to the page you came from.
- 19
Product Hunt·5y
Divjoy 2.0 — React codebase & UI generator
Divjoy makes it ridiculously easy to start your next React project. Pick all the things you need in your codebase (UI kit, auth, database, payments, etc), choose a beautiful template, then export a complete React codebase. Everything just works. Embed Collect
- 20
Smashing Magazine·5y
From Design To Developer-Friendly React Code In Minutes With Anima
Anima is a design-to-development tool. It aims to turn the design handoff process into a continuous collaboration. Designers can use Anima to create fully responsive prototypes that look and work exactly like the finished product (no coding required) Developers can take these designs and export them into developer-friendly React/HTML code.
- 21
Serverless SaaS — Building SaaS apps faster with React
A SaaS kit that might be the perfect starting point for your next React project. Save time and skip implementing features like authentication, payments, teams, and more so you can focus on building your SAAS. Embed this code into your site and share it with your friends and colleagues.
- 22
The Tao of React
There are no universal best practices, says the author, but there are certainly principles and attitudes that will take you a long way in productively building resilient React apps. Alex Kondov shares quite a few of his findings here. The Tao of React: Design, Architecture & Best Practices is published by MIT Press.
- 23
useStateInCustomProperties
React and Vue could automatically map the state they manage over to CSS Custom Properties. The hook returns a component that is the Custom Property “boundary” and any state you pass it is mapped to those custom properties. The idea is that you could flip one custom property and have a whole block of styling change.
- 24
Theming and Theme Switching with React and styled-components
I recently had a project with a requirement to support theming on the website. We’re going to use React and styled-components. All the source code used in the article can be found in the GitHub Repository. Let’s get into building exactly that.
- 25
Document Your React Applications The Right Way
Document Your React Applications The Right Way Step by Step Introduction Guide Mohammad Faisal. When Documentation Becomes Important? You have multiple teams working on the same project. Good documentation can sometimes work as a style guide for others. There are many ways today we will be using react-styleguidist.