Overview

React

Stacks178.2K

Followers147.0K

Votes4.1K

GitHub Stars240.3K

Forks49.7K

Semantic UI

Stacks954

Followers1.5K

Votes673

GitHub Stars51.2K

Forks4.9K

React vs Semantic UI: What are the differences?

Component-based vs. CSS Framework: React is known for its component-based architecture, where UI elements are broken down into reusable components. Semantic UI, on the other hand, is a CSS framework that provides pre-designed components and a grid system to structure layouts efficiently.
Virtual DOM vs. CSS Styling: React utilizes a virtual DOM, which enhances performance by updating only the necessary components without affecting the entire page. Semantic UI focuses more on providing a set of predefined CSS styles and classes for consistent styling across applications.
JavaScript vs. CSS customization: React primarily uses JavaScript for logic and interactivity, making it more versatile and flexible for complex applications. Semantic UI, with its focus on CSS styling, offers limited customization options through JavaScript and relies more on predefined styles and components.
State Management: React comes with built-in state management, allowing developers to manage application state efficiently. While Semantic UI does not provide state management features natively, it can be integrated with state management libraries like Redux for better control over data flow.
Learning Curve: React has a steeper learning curve due to its component-based architecture and concepts like JSX and props. Semantic UI, being a CSS framework with predefined styles and classes, has a relatively lower learning curve, making it easier for beginners to create visually appealing designs.
Community and Ecosystem: React has a larger, more active community and a vast ecosystem of libraries and tools for building robust web applications. Semantic UI, though popular, may have a smaller community in comparison, with fewer resources and third-party integrations available.

In Summary, React focuses on component-based architecture and virtual DOM for efficient UI updates, while Semantic UI is a CSS framework that provides pre-designed components and styles for quick and responsive design implementations.

Advice on React, Semantic UI

Cyrus

Aug 15, 2019

Needs adviceon

Vue.js

React

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

883k views883k

Comments

Cyrus

Aug 15, 2019

Needs advice

Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.

For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.

How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...

401k views401k

Comments

Malek

Web developer at Quicktext

Mar 28, 2020

Decided

The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!

What do you think?

244k views244k

Comments

Detailed Comparison

React	Semantic UI
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.	Semantic empowers designers and developers by creating a shared vocabulary for UI.
Declarative; Component-based; Learn once, write anywhere	Build Responsive Layouts Easier;Self Explanatory;Tag ambivalent;Powerful tools for expressing groups and collections;Portable and self-contained
Statistics
GitHub Stars 240.3K	GitHub Stars 51.2K
GitHub Forks 49.7K	GitHub Forks 4.9K
Stacks 178.2K	Stacks 954
Followers 147.0K	Followers 1.5K
Votes 4.1K	Votes 673
Pros & Cons
Pros 837 Components 673 Virtual dom 579 Performance 509 Simplicity 442 Composable Cons 41 Requires discipline to keep architecture organized 30 No predefined way to structure your app 29 Need to be familiar with lots of third party packages 13 JSX 10 Not enterprise friendly	Pros 157 Easy to use and looks elegant 92 Variety of components 64 Themes 61 Has out-of-the-box widgets i would actually use 57 Semantic, duh Cons 5 Outdated build tool (gulp 3)) 3 HTML is not semantic (see list component) 3 Poor accessibility support 2 Javascript is tied to jquery
Integrations
No integrations available	AngularJS Ember.js Meteor

What are some alternatives to React, Semantic UI?

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Foundation

Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.

Materialize

A CSS Framework based on material design.

Material Design for Angular

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.