Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools. Learn more →
Top 23 JavaScript JSX Projects
-
Project mention: Level Up Your TypeScript Projects: Discover the Power of ESLint and Prettier | dev.to | 2023-11-28
In the dynamic world of full-stack development, incorporating linting and formatting tools such as ESLint and Prettier, along with your TypeScript projects, is essential. This integration is particularly important in team settings to ensure code uniformity in syntax and style. Additionally, these tools play a vital role in early detection of errors and bugs. In this article, we'll explore how these tools automate the coding process to produce clean, consistent, and production-ready code.
-
Project mention: HTML Data Attributes: One of the Original State Management Libraries | dev.to | 2023-11-29
DEV is a Rails monolith, which uses Preact in the front-end using islands architecture. The reason why I mention all this is that it's not a full-stack JavaScript application, and there is no state management library like Redux or Zustand in use. The data store, for the most part on the front end, is all data attributes.
-
Appwrite
Appwrite - The open-source backend cloud platform. Add Auth, Databases, Functions, and Storage to your product and build any application at any scale while using your preferred coding languages and tools.
-
Project mention: Building Stunning Docs: Diving Deep into Docusaurus Customization | dev.to | 2023-11-19
/blog/ - This directory contains all the markdown files, of your site blogs, you can simply add a new blog by using markdown, or simply remove a blog file by deleting its file, you can combine the markdown with MDX, resulting a well-written blog post.
-
Added a warning when rendering links with javascript: URLs 7bc3763
-
htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
So getting this to work without bundler magic is very hard. It's not surprising why NextJS is investing in a bundler. Though one thing that really sticks out is how much complexity we add for just miniscule dev ergonomics. Not using JSX and using something like htm would make all this easier (removing the bundler entirely), it's a lot of overhead to avoid a couple of quotes. React should really have a tagged-template mode. Also all of this is indirection is actually bad for dev ergonomics too! One of the reasons I did this is because I'm absolutely sick of magic caches and sorting through code that's been crushed by a bundler into something I don't recognize and can't easily debug. While we can't get rid of this completely (ts/jsx) this preserves the module import graph completely on the client-side making it easy to find things as you are working and preserving line numbers. This obviously is not useful for a production build and there's a lot of work that would need to go in to support both modes over the same code, but it's depressing no tools really work like this for local development.
-
styled-jsx -> A library with a lot of similar features like styled-components. Has some extra features here and there.
-
Project mention: Why there is no django-react or django-vue package like, for example, Rails has? | /r/django | 2023-01-30
https://github.com/reactjs/react-rails here is the functionality and simplicity that I would be kind of looking for. The option for it to exist in Django ecosystem is not that outlandish and I wouldn’t be too ignorant of it having to make sense or not make sense to everyone :)
-
InfluxDB
Collect and Analyze Billions of Data Points in Real Time. Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
-
This post is part of my post series that complements the "Build your own React" tutorial by Rodrigo Pombo.
-
-
-
dependency-cruiser
Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
With dependency-cruiser, you can enforce which imports are allowed. This enables you to create an architecture fitness function that ensures your code continues to adhere to the initial design. You can also visualize your dependencies to gain a clearer understanding of your code's actual structure, allowing you to compare it with your mental model and make improvements where necessary.
-
-
Project mention: Speeding up the JavaScript ecosystem – Polyfills gone rogue | news.ycombinator.com | 2023-09-21
I try to focus on the issues rather than individuals, but the root of the problems in the listed eslint plugin libraries points to ljharb.
If you do some simple digging into these libraries, you will find that these types of commits are quite common within them.
https://github.com/jsx-eslint/eslint-plugin-react/commit/e1d...
https://github.com/jsx-eslint/jsx-ast-utils/commit/bad51d062...
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/commit/...
He would rather see the download count of these polyfill libraries https://github.com/ljharb/ljharb#projects-i-maintain increase, compared to assessing the health of the JavaScript ecosystem.
-
-
Project mention: Dangers of Using <Guard> or <If> Components in React | /r/react | 2023-04-14
It's most likely some syntactic sugar plugin for babel. For example, one of these.
-
GDLauncher
GDLauncher is a simple, yet powerful Minecraft custom launcher with a strong focus on the user experience
I used to use GDLauncher, but I would not recommend installing a launcher that lets issues like this one go by for almost a year without being fixed: https://github.com/gorilla-devs/GDLauncher/issues/1288
-
atomico
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
-
prettier-plugin-organize-imports
Make Prettier organize your imports using the TypeScript language service API.
-
-
-
xdm
Just a *really* good MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins (by wooorm)
-
> has had any ability to tell me where, how often, or even whether a particular component is in use in the production UI
I built a dashboard to display this for the design system I work on at my day job to give product designers better visibility into this, using a library called react-scanner[0] and some logic related to the way our different product repos are structured. there are probably other libraries for this sort of thing in different ecosystems, and you can always build your own with a parser as well.
-
-
Onboard AI
Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2023-11-29.
JavaScript JSX related posts
- Web Components Eliminate JavaScript Framework Lock-In
- React SSR web-server from scratch
- Building Stunning Docs: Diving Deep into Docusaurus Customization
- Show HN: Create email templates with Markdown and JSX
- Understanding Tech: Looking Beyond the Surface
- Speeding up the JavaScript ecosystem – Polyfills gone rogue
- Writing CSS With JavaScript
-
A note from our sponsor - Appwrite
appwrite.io | 9 Dec 2023
Index
What are some of the best open-source JSX projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | prettier | 47,361 |
| 2 | Preact | 35,461 |
| 3 | mdx | 16,148 |
| 4 | inferno | 15,958 |
| 5 | htm | 8,394 |
| 6 | styled-jsx | 7,530 |
| 7 | react-rails | 6,698 |
| 8 | didact | 5,875 |
| 9 | nerv | 5,421 |
| 10 | blocks | 4,828 |
| 11 | dependency-cruiser | 4,556 |
| 12 | fre | 3,663 |
| 13 | eslint-plugin-jsx-a11y | 3,251 |
| 14 | html-to-react-components | 2,115 |
| 15 | jsx-control-statements | 1,602 |
| 16 | GDLauncher | 1,162 |
| 17 | atomico | 1,032 |
| 18 | prettier-plugin-organize-imports | 882 |
| 19 | vhtml | 739 |
| 20 | react-multistep | 637 |
| 21 | xdm | 589 |
| 22 | react-scanner | 544 |
| 23 | dukpy | 429 |
Learn any GitHub repo in 59 seconds
Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.
getonboard.dev