237 Stories To Learn About React

Let's learn about React via these 237 free stories. They are ordered by most time reading created on HackerNoon. Visit the Learn Repo or learnrepo.com to find the most read stories about any technology.

Reteaching people basic web skills since 2013.

1. Using a React 16 Portal to do something cool

React 16 is here, and one of the more interesting additions is ‘Portals’.

2. How to use componentWillMount with Functional Components in React

Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal.

3. How to Deploy a React Application With Firebase Hosting

In this blog, I am going to discuss how we can deploy react applications within a few minutes by using Firebase.

4. How 'displayName' Helps In Testing React Using Styled Components

How to get rid of the weird styled component names in test snapshots

5. How to Create Toast Notifications in React Applications

In this article I will show you how to use Tailwind to add some stylish design elements.

6. 3 Practical Tasks for Your Next React Interview

Here are 3 React tasks to check your coding skills, way of thinking, and ability to create good understandable code.

7. Building An Infinite Scroll Using React Hooks

There are a lot of React pre-made components out there that promise infinite scroll functionality. The problem with that is that sometimes they are not tailored to fit your specific needs, especially if you are using the newly featured React-Hooks to create functional components all across your application. These pre-made components work well with class components, but they have not been updated to work with the state-of-the-art functional hook-components.

8. Data Visualization Using Chart.js and Gatsby

Data visualization helps you transform your unorganized data in an organized and valuable way that conveys the right message to your audience without words.

9. Having (More) Fun Creating Components with the Lightning Design System for React

Check out how easy it is to create a custom component using the Lightning Design System for React and some very detailed blueprints

10. React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook

When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. However, we can use the technique of DOM recycling to solve the troubles.

11. How to Setup Tailwind CSS Framework with React

Tailwindcss provides a modern spin on writing css. And unlike bootstrap, it allows us write css without predefined classes i.e we can create our own custom styles without external opinions on how things should look.

12. Using Core Node JS Modules in React Native Apps

Here’s a problem you might run into while using React Native: Let’s say you want to use the crypto module to create some hashes. It might seem natural to do something like this:

13. React Hooks 101: useState and useEffect

React components are simply functions. Some are created with classes, better known as stateful and / or class components, and the others are created with functions only, also known as stateless and/or functional components.

14. The RTK Query, API Splitting Approach, and the Nuances of "Making Life Simpler"

RTK Query is definitely a cool library however it’s sadly not applicable to all of the use cases possible with an API.

15. Simple Breadcrumbs in React with Reach-Router [Tutorial]

One of the things that you end up developing in one point or in the other is a breadcrumbs navigation system. I've seen some posts across the web touting how to achieve it in React and Reach Router by providing complex looping mechanisms. In this post, I show you a simpler, non loop way that displays breadcrumbs in Reach-Router.

16. React forms with Formik and Unit Testing with react-testing-library

Setup

17. Creating a Library of React Components using Create React App

UPDATE: You can use the npm package create-component-lib to automate all the steps described in this blog post.

18. How CORS (Cross-Origin Resource Sharing) Works?

If you are a web developer, you must have seen the ‘CORS’ error appearing often on your screen when you try to call the API. But, Why does it happen?

19. Introducing An Open Source Backend Server for Mobile & Web Developers

Appwrite is a new open-source, end to end backend server for frontend and mobile developers that allows you to build apps a lot faster. Appwrite goal is to abstract and simplify common development tasks behind REST APIs and tools, to help developers build advanced apps way faster.

20. Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’

With the release of React 16.3, some new lifecycle methods have been introduced, and release of React 17 will deprecate some lifecycle method.

21. Svelte: Communication Between Components

In this mini-tutorial we are going to see two different ways of communication between components in Svelte 3: a callback passed as prop and event dispatcher.

22. React Functional Components are the future

React Functional Components grabbed all the attention after the introduction of Hooks. They sidelined Class Components to become the main hero of React apps.

23. Angular vs React vs Vue: Which is the Best Choice for 2019?

24. Conditional Rendering in React

When we are developing a React application, we often need to show or hide an element given a certain condition. Be it a user interaction, the presence of data coming from a request, or even permission levels. This is called conditional rendering, and we’ll look at different approaches to handling those cases.

25. 5 Best JavaScript Frameworks in 2017

JavaScript popularity continues its rising. In 2016 we’ve witnessed such great changes, as AngularJS entire upgrade and introduction of Angular 2, ultimate dominating of jQuery that is applied on 96.5% of all JS sites, evolution of ECMAScript, two updates of Node.js in April and October accordingly, React finest hours, and even more. What to expect from 2017? — Here’s what we know so far: Angular 4 is expected in March 2017, ES2017 edition is planned for mid-2017, Bootstrap v4 release should be anticipated this year as well.

26. Structuring projects and naming components in React

As React is just a lib, it doesn’t dictate rules about how you should organize and structure your projects. This is nice, because it gives us freedom to try different approaches and adapt the ones that better fit for us. On the other hand, this could cause some confusion for devs that are starting in React world.

27. Hooked on React Hooks — useState

Hooked on React Hooks — useStateSo what’s all the rage with React hooks? I’ve been exploring it for the past few months and lets just say I really believe that this is what React has needed to surmount its position as the top front end framework.

28. API testing with Jest

29. 3 Coding Interview Challenges for Mid-level React Developers

React interviews can be challenging. There are several concepts in React. Most React interviews have coding challenges.

30. VS Code Tutorial: How To Set Up A React.js Project With Next.js

Express.js framework provides inbuild APIs which are very useful to build fast and scalable applications efficiently with React.js.

31. How to Design a Splash Screen With Expo and React Native

You have made a great app and of course, why not publish it right? But then you open your expo app and see the default boring splash screen provided by Expo.

32. How To Use SASS In Your Create-React-App

Create-react-app is facebook's attempt at setting up a developer to get started building react apps very quickly. It is a boilerplate that comes pre-configured with a wide array of tools and technologies that ensure a smooth running react application. However, create-react-app does not come with Sass preprocessing by default. To add sass preprocessing, we would need to add an extra dependency to our list of dependencies known as node-sass.

33. I Created an Alternative to React's useEffect Hook

Two custom hooks as an alternative for componentDidMount() and componentDidUpdate() React lifecycle method.

34. How to Deploy a React App to GitHub Pages

This article outlines how to smoothly deploy a React App through Github while avoiding common problems that such a process is likely to cause for you.

35. React useRef Hook Explained with Examples

Well, we all know that ref helps us to get access to the DOM. But let's consider next situation, we have some React component and we want to know how many times this component was rendered. How can we achieve that? Well, maybe we can use React useEffect and useState hooks to determine that the component was re-rendered. Something like this:

36. How to Add NSLocationAlwaysUsageDescription Key to Info.plist File in Your iOS App

We received a message from iOS App Team about adding NSLocationAlwaysUsageDescription key in Info.plist file. Our last build was rejected for this specific reason.

37. React + Express + Typescript Boilerplate with Performance and Extended Functionality

Why Another Boilerplate

38. How to Add Script Tags in React

Adding a new script tag and directly appending it to the element of the page is the easiest way to add