- Created by Alibaba, Ant Design React includes a great many polished and usable components — probably more than any other React UI library.Ant Design (Date Range Picker)Component Breadth: A+Every component we needed is included.Quality of implementation: AGood-looking components, plenty of options and interoperability.Ease of re-styling: B+Themeable, but not built for overhaul.Typescript support: A+Written…
- Typescript support: FDoes not appear to have any TypeScript typings.Quality of documentation: BInteractive examples of each component, but nothing else about the framework itself.Project health: B~1.5K Github stars, maintained by open-source contributors.Cost: FreeAn implementation of the popular Semantic UI framework, this library is polished has a lot to offer, but…
- Type bindings are still in development, but are included for most components.Quality of documentation: A+Interactive examples of each component, clear navigation information on theming, component options, and sample layouts.Project health: B~1.5K Github stars, maintained by open-source contributors.Cost: FreeSencha’s React UI framework is costly each year, but its breadth of components,…
- Ease of re-styling: A+Clear documentation on theming, four built-in themes (including Material Design and Bootstrap), and support for Sencha Themer.Typescript support: A+Written in TypeScript, with full bindings.Quality of documentation: AExamples of each component, with tons of options explained, but a bit confusing to navigate, and interactive examples are often limited…
- It appears to simply be a set of wrappers for jQuery version.Kendo UI React (Dropdown)Component Breadth: A-Not as many components as the Angular/jQuery versions, but could be enough for many applications.Quality of implementation: ASeem robust, though the default style isn’t wonderful.Ease of re-styling: A+Clear documentation on theming, four built-in themes…
The open-source community around React is enormous, and we’re constantly seeing new solutions and approaches to solve the problems we have as developers. Looking into React UI libraries, we’ve come a…
Continue reading “React UI Frameworks, Compared – Gather Engineering”
- React Alicante 2017This weekend I have been in Spain to attend React Alicante.
- It’s the first edition of this conference focused in React and React Native.Glenn Reyes on stage talking about code splitting to improve the performance of our React apps.The conference was 3-day long, one day with workshops introducing React and React Native, and 2 days for talks in a single track.It’s the…
- It was truly international, with all talks delivered in English (something unusual in Spain) and 250 attendees from 25+ countries.The most impressive is that it was arranged by 2 Spanish expats who form the company Limenius, based in Munich.
- They managed to prove that it’s possible to arrange a good conference in a well-communicated location like Alicante, with good weather and interesting attractions, while making it affordable (the regular tickets for the talks were 99€).
- Other topics were forms, CSS in JS, Redux/Mobx, code splitting, GraphQL, and React Native.They covered pretty well the current ecosystem of tools when working with React, and they shared learnings that can be applied to our daily jobs.If you are interested in the specifics of the talks, check this list…
This weekend I have been in Spain to attend React Alicante. It’s the first edition of this conference focused in React and React Native. The conference was 3-day long, one day with workshops…
Continue reading “React Alicante 2017 – José M. Pérez – Medium”
- These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
- In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
- MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
- Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…
Continue reading “7 tips of using MobX – Huiseoul Engineering”
Buffer makes it super easy to share any page you’re reading. Keep your Buffer topped up and we automagically share them for you through the day.
Continue reading “Buffer”
- Minimal configuration to deploy a project
- npm run deploy will first build your project via npm run build .
- After entering the project path, Surge will suggest a random domain to use.
- Then use npm run build to prepare your project for deployment.
- Surge VS GitHub Pages: How to deploy a create-react-app project
As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you’ll want to get…
Continue reading “Surge VS GitHub Pages: How to deploy a create-react-app project”
- To fetch the data from the server, you’ll need an HTTP library.
- React simply renders components, using data from only two places: props and state .
- So to use some data from the server, you need to get that data into your components’ props or state.
- First: React itself doesn’t have any allegiance to any particular way of fetching data.
- The component’s state is updated by calling this.setState with the new array of posts.
First: React itself doesn’t have any allegiance to any particular way of fetching data. In fact, as far as React is concerned, it doesn’t even know there’s a “server” in the picture at all.
Continue reading “AJAX Requests in React: How and Where to Fetch Data”