Top 23 JavaScript React Projects

• React

  1,709 222,862 9.9 JavaScript

  The library for web and native user interfaces.

  

Project mention: What's New at React Conf 2024 | dev.to | 2024-05-20

Document Metadata Support : Define , , and tags directly in components, with React automatically promoting them to the document .

Stylesheet Support : Built-in support for managing stylesheets within the component tree, handling the loading order automatically.

Asynchronous Script Support : Render asynchronous scripts anywhere in the component tree, simplifying script management.

Resource Preloading Support : Introduce preloading APIs like prefetchDNS, preconnect, preload, and preinit to optimize resource loading.

Third-Party Script and Extension Compatibility : Improved compatibility with third-party scripts and browser extensions.

Better Error Reporting : Enhanced error handling with more options for handling errors.

Custom Element Support (Web Components): Improved support for custom elements.

React Compiler

The React Compiler, also known as Forget, is now open source. You can find it at here. It’s built on Rust and you can now try it out in the React 19 beta or in the online Playground:



The impact on developers is that you no longer need to manually optimize using useMemo, useCallback, React.memo API.

This is limited to this, and does not affect dependency rules like useEffect. Currently, you still need to follow React hooks rules (such as only calling hooks at the top level).

When a component is optimized by the compiler, it can show a “Memo ✨” badge in React Devtools (v5.0+):



React for Two Computers

Dan Abramov introduced the respective advantages of React client components and server components, and how you should choose. Here are some summaries:

Server-side component advantages

• Data Access : Server-side components can access data and files on the server, which is useful for data-intensive applications.

• Pre-process Data : Server-side components can read and pre-process data before sending it to the client.

• Build-time Rendering : Server-side components can run at build time to generate static UI, which is beneficial for SEO and initial load performance.

• Simplify Client-side : By processing complex data logic on the server (UI = f(data)), the client-side burden can be reduced, and the client only receives and displays the necessary UI data.

Client-side component advantages:

• Instant Feedback : When users interact with the UI, such as clicking a button, they can get instant feedback without waiting for the server response.

• No Server Polling : For some user operations, such as dragging sliders or clicking buttons, no additional requests or data downloads from the server are needed.

• Better User Experience : Direct interactive response improves the user experience, making the application feel more responsive and smooth.

• Use Client-side State : Components can use client-side state (UI = f(state)), which allows building highly interactive and responsive user interfaces.

React Server Components in Expo Router

Expo Router is a file-based router for React Native and web applications. It allows you to manage navigation between screens in the application, allowing users to seamlessly move between different parts of the application UI on multiple platforms (Android, iOS, and web).

The advantage of server components is that they can send fully interactive dynamic UI to the client, which means the application can provide complex UI elements based on different user actions.

Break React’s Rules

React has some rules:



Charlotte discussed the reasons for these rules to gain a deeper understanding of React’s internal mechanisms.

I recently wrote an article to get a deeper understanding under the hood of React. It uses a simplified Fiber architecture and concurrent mode to avoid blocking the main thread during rendering. From here, you can also understand why these guidelines cannot be broken.

RedwoodJS with React Server Components

RedwoodJS is another full-stack JavaScript application framework with batteries included. It is mainly aimed at startups.

At a high level, it is a React frontend that talks to a custom GraphQL API. The API uses Prisma to interact with the database. Out of the box, you can use Jest for tightly integrated testing, Pino for logging, and Storybook for UI component cataloging. Setting up authentication (like Auth0) or CSS frameworks (like Tailwind CSS) only requires a command line call. In addition, Redwood’s architecture allows you to deploy to serverless providers (such as Netlify, Vercel) or traditional server and container providers (such as AWS, Render).

Conclusion

This is the update from Day 1, which mainly focuses on broad web development. Day 2 is about React Native.

What I am most looking forward to is the React Compiler. Although it is still in testing, if you want to try it in production now, you can apply to join their working group to help provide feedback.

If you find this helpful, please consider subscribing to my newsletter for more insights on web development. Thank you for reading!

• Next.js

  2,061 121,256 10.0 JavaScript

  The React Framework

  

Project mention: Why I Decided to Leave Frontend Frameworks Behind | dev.to | 2024-05-20

Let's take Next.js for example. How it introduces routing to the users is far from how the actual routing works under the hood. Just to grasp what I am saying, the Next npm package is 86MB compared to the base React repo which is just over 300kB. For most projects, the only thing you do is have 10-15 pages, maybe have Stripe and a few charts, some side effects, basic state management, and that's it. Why do you need 86MB of code, all that learning curve, and the poor documentation of Next.js for your next project?

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• create-react-app

  580 101,979 1.5 JavaScript

  Set up a modern web app by running one command.

  

Project mention: Create a Simple React.js Workflow App From Scratch – Your Ultimate Guide ! | dev.to | 2024-05-20

It's time to write our second application, where there will be a list of schemes, processes, and a Workflow Designer with the ability to start a process and see its status. We will use create-react-app template to create a simple React application. Open your console and go to the folder react-example, then execute following commands:

• 33-js-concepts

  37 62,164 8.0 JavaScript

  📜 33 JavaScript concepts every developer should know.

Project mention: JavaScript concepts every developer should know | news.ycombinator.com | 2024-05-20

• Gatsby

  357 55,049 9.3 JavaScript

  The best React-based framework with performance, scalability and security built in.

  

Project mention: Building static websites | dev.to | 2024-04-29

The first time I started building static websites is when I discovered Gatsby. I built several projects using Gatsby and hosted it on Netlify free tier. It felt like a really robust architecture and I loved that it was free.

• Meteor JS

  63 44,066 9.8 JavaScript

  Meteor, the JavaScript App Platform

  

Project mention: Meteor 2.16 and Oplog Tailing Optimization | dev.to | 2024-05-14

This was thanks to one of our community members,@twisterking, who opened a pull request introducing this new improvement.

• react

  78 44,135 6.9 JavaScript

  Cheatsheets for experienced React developers getting started with TypeScript (by typescript-cheatsheets)

  

Project mention: How to use Typescript in React apps | dev.to | 2024-02-07

Congratulations, you now know how to use TypeScript in your React App. For further reading check out this React TypeScript cheat sheet

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• 30-Days-Of-JavaScript

  32 41,077 1.8 JavaScript

  30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw

Project mention: Struggling to Learn React Or Any JavaScript Framework? Here are 7 Mistakes Holding Back (And What To Do Instead) 💪🎉 | dev.to | 2024-02-04

30 Days of JS

• reactjs-interview-questions

  27 37,071 7.3 JavaScript

  List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

Project mention: Best content to cram for a front end interview? | /r/reactjs | 2023-07-01

• Preact

  111 36,118 9.3 JavaScript

  ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

  

Project mention: Preact vs React: A Comparative Guide | dev.to | 2024-04-23

In this post, we get to know more about Preact, one of this year's trending libraries. And we'll compare it to React to see which one suits better for our projects.

• SheetJS js-xlsx

  61 34,554 2.4 JavaScript

  📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

  

Project mention: how to work with .xlsx files? | /r/node | 2023-06-28

ExcelJS and XLSX (SheetJS) are great libraries to work with XLSX files. The former I've found a bit easier to work with but less efficient in general.

• awesome-react-native

  16 34,134 0.0 JavaScript

  Awesome React Native components, news, tools, and learning material!

Project mention: Building Cross-Platform Apps with React Native: Challenges and Solutions 📱 | dev.to | 2023-08-05

🔗 React Native official documentation 🔗 React Native Community 🔗 React Native Newsletter: Stay updated with the latest trends and news in the React Native ecosystem. 🔗 Awesome React Native: Discover a curated list of helpful libraries, tools, and components for React Native development.

• react-beautiful-dnd

  71 32,515 5.7 JavaScript

  Beautiful and accessible drag and drop for lists with React

  

Project mention: A feature-rich front-end drag-and-drop component library | news.ycombinator.com | 2024-04-24

Yeah, I hope the migration is not going to be too painful because https://github.com/atlassian/react-beautiful-dnd is a key component in one of my important project

• react-boilerplate

  23 29,350 0.0 JavaScript

  :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

  

Project mention: Stay Ahead of the Game Must Have Front-End Boilerplates and Starter Kits for Every Developer | dev.to | 2023-09-06

Clone this repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git

• react-virtualized

  40 25,992 1.6 JavaScript

  React components for efficiently rendering large lists and tabular data

Project mention: The Secret Weapon of Top Developers: 7 React JS Libraries You Can't Afford to Ignore | dev.to | 2024-02-21

You may increase the rendering efficiency of tabular and huge list data by using the React Virtualized module. React apps perform better overall when the quantity of requests and DOM elements is limited. React Virtualized is comparable to many other tools; however, what sets it apart from the competition is the sheer volume of features and excellent upkeep.

• N1

  1 24,788 0.0 JavaScript

  :love_letter: An extensible desktop mail app built on the modern web. Forks welcome!

  

• 30-Days-Of-React

  13 24,385 0.0 JavaScript

  30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw

Project mention: Ultimate Guide & Resources to Enhancing Your ReactJS Skills || 16 GitHub repositories | dev.to | 2023-08-14

Challenge yourself with the 30 Days of React series, perfect for honing your skills day by day.

• javascript-testing-best-practices

  16 23,589 2.7 JavaScript

  📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)

Project mention: Comprehensive and exhaustive JS & Node.js testing best practices (July 2023) | /r/softwarecrafters | 2023-11-30

• javascript-interview-questions

  18 22,054 7.5 JavaScript

  List of 1000 JavaScript Interview Questions

Project mention: interview preparation referencing the Github repo | dev.to | 2024-03-02

• responsively-app

  63 21,805 8.9 JavaScript

  A modified web browser that helps in responsive web development. A web developer's must have dev-tool.

  

Project mention: Essential tools for Frontend Developers | dev.to | 2024-05-16

It is a frontend development tool that lets developers preview how their website would look on multiple devices and screen sizes, in one screen. Link:- Responsively

• react-native-web

  62 21,368 6.7 JavaScript

  Cross-platform React UI packages

Project mention: NextJS on iOS & Android????? How??? | /r/nextjs | 2023-06-17

maybe https://necolas.github.io/react-native-web/? https://github.com/vercel/next.js/blob/canary/examples/with-react-native-web/README.md

• js-stack-from-scratch

  3 20,041 0.0 JavaScript

  🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.

• Enzyme

  33 19,962 6.7 JavaScript

  JavaScript Testing utilities for React

  

Project mention: The best testing strategies for frontends | dev.to | 2024-04-22

Probably Enzyme was the first to popularize component testing in React by doing shallow rendering and expecting some things to be there in the React component tree. Then React Testing library came and took component testing to a whole new level.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

JavaScript React related posts

• What's New at React Conf 2024

  2 projects | dev.to | 20 May 2024

• The Emergence of JavaScript Frameworks & Libraries

  1 project | dev.to | 20 May 2024

• JavaScript concepts every developer should know

  1 project | news.ycombinator.com | 20 May 2024

• Create a Simple React.js Workflow App From Scratch – Your Ultimate Guide !

  4 projects | dev.to | 20 May 2024

• Why I Decided to Leave Frontend Frameworks Behind

  2 projects | dev.to | 20 May 2024

• Implement React v18 from Scratch Using WASM and Rust - [13] Implement Lane and Batch Update

  2 projects | dev.to | 17 May 2024

• How I fixed this Next.js error: Refused to load the script because it violate Content Security Policy directive

  2 projects | dev.to | 16 May 2024
• A note from our sponsor - SaaSHub
  www.saashub.com | 20 May 2024

  SaaSHub helps you find the best software and product alternatives Learn more →

Index

Sponsored

SaaSHub - Software Alternatives and Reviews

SaaSHub helps you find the best software and product alternatives

www.saashub.com

Do not miss the trending JavaScript projects with our weekly report!