{"id":1024,"date":"2021-12-08T12:20:00","date_gmt":"2021-12-08T09:20:00","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=1024"},"modified":"2024-02-26T21:12:33","modified_gmt":"2024-02-26T18:12:33","slug":"best-react-open-source-projects","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/","title":{"rendered":"Best React Open Source Projects"},"content":{"rendered":"\n<p>Are you ready to discover the best <a href=\"https:\/\/flatlogic.com\/blog\/crud-app\/\">React<\/a> open-source projects? Investing time and energy into open-source projects is essential for personal <a href=\"https:\/\/flatlogic.com\/services\">professional development<\/a>, as well as for the technology ecosystem. But how do you choose the right project for your spare time efforts? Are you looking for a way to start contributing to open source? Are you curious about what the best React open-source projects are? Do you want to know how to get started and be successful in the open-source community?<\/p>\n\n\n\n<p>Engaging with React open-source projects is not only a boon for personal and professional development but also vital for fostering innovation within the <a href=\"https:\/\/flatlogic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">business software<\/a> ecosystem. These projects offer a collaborative platform for developers to enhance their skills, contribute to the community, and drive forward the development of cutting-edge technologies, making the selection of the right project a crucial step towards contributing effectively to the broader tech landscape.<\/p>\n\n\n\n<p>The importance of open-source projects cannot be overstated. Open-source projects provide invaluable resources, allowing developers to collaborate and build on each other\u2019s work. Open-source projects are also essential for developing new technologies, as they allow for faster innovation and wider adoption. In this article, we will briefly answer how to choose a good open-source project. Also, we will help to tell bad ones from good ones and give a selection of cool React open-source projects.<\/p>\n\n\n<p><iframe loading=\"lazy\" data-src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/ysOgdz3jMIsFMe\" width=\"594\" height=\"397\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:0px solid #CCC; border-width:0px; margin-bottom:0px; max-width: 100%;\" allowfullscreen=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"one\"><strong>What is a good open-source project?<\/strong><\/h2>\n\n\n\n<p>To know what open-source project you should invest your time in, you must understand what makes it good.<\/p>\n\n\n\n<p>Adding even a small feature to a project requires you to understand how the whole project\/library\/plugin operates. Therefore, point one: <strong>the project should have good documentation.<\/strong> All dependencies should be well described. Popular and good quality open source solutions always have good documentation. This can be a great sign of quality and support one can expect from the community.<\/p>\n\n\n\n<p>The second thing worth paying attention to is whether <strong>work with issues is well organized<\/strong>. Look at the issues in general. How many critical issues are there in the project? How quickly do they close?\n\t\t\t<a href=\"https:\/\/flatlogic.com\/starting-web-app-in-2024-research\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2024\/08\/starting-web-app-2024-study.jpg\" \talt=\"2024 Research\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 6400px; --smush-placeholder-aspect-ratio: 6400\/1600;\"><noscript><img decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2024\/08\/starting-web-app-2024-study.jpg\" \talt=\"2024 Research\"><\/noscript><\/a><\/p>\n\n\n\n<p>Another thing is <strong>how the <\/strong>rules of committing are documented. Imagine the situation. You found a bug, you made a big effort to fix it, and it caused you some pain, but your patch is not included in the commit because the rules are not clear enough.<\/p>\n\n\n\n<p><br>For business software development, the vitality of a robust open-source community cannot be understated. Such a community not only propels the project forward but also ensures ongoing support, bug fixes, and enhancements. Opting for software backed by an active and supportive community significantly benefits developers, offering a reservoir of knowledge and assistance for overcoming challenges, thereby enhancing the reliability and innovation of <a href=\"https:\/\/flatlogic.com\/\\\" target=\"_blank\" rel=\"noreferrer noopener\">business software <\/a>solutions.<\/p>\n\n\n\n<p>When looking at projects on Github, look for people\/packages with many stars, watchers, forks, contributors, etc. These visible cues of community support show that the community cares about that person, project, or action and many others will benefit from it.<\/p>\n\n\n\n<p>Remember that the number of commits, issues and pull requests (PRs) can be a signal of investment and commitment to a project.<\/p>\n\n\n\n<p>Google trends can also be a good measure of the level of interest in projects or technologies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"two\"><strong>How to choose a project to commit to<\/strong><\/h2>\n\n\n\n<p>Choose a project that will give you new knowledge. Do not choose a product that is too easy to change or debug. Find a project that you think will survive for long enough to keep what you have invested in. You also need to choose a project that will be useful to others.<\/p>\n\n\n\n<p>You\u2019d benefit more if you were a part of the project from the beginning so that you get to appreciate the full life cycle of a project: the idea, prototyping, design, testing, and implementation.<\/p>\n\n\n\n<p>A good way to find a project you will invest your knowledge and time is to ask other people. There is a good chance you will get a good recommendation. Find a community that will help you grow and communicate politely.<\/p>\n\n\n\n<p>You can also contribute to something that you use regularly or will use in the future. You might pay attention to the project your company uses.<\/p>\n\n\n\n<p>The other approach is to create a new project of your own. If your goal is just to learn how to GitHub, or just gain some basic efficiency in programming &#8211; a self-initiated project will do that. You could make something small and simple just to exercise your open source experience, or put a lot of time into something larger and try to create something that involves other contributors. Don&#8217;t be afraid to initiate your open-source projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"three\"><strong>Best React open-source projects<\/strong><\/h2>\n\n\n\n<p>In the last couple of years, React has risen to become a massively popular JavaScript library and developer ecosystem.  A large part of our templates is made with React (you can find all Flatlogic <a href=\"https:\/\/flatlogic.com\/templates\/react\">free React templates<\/a> on the <a href=\"http:\/\/flatlogic.com\/generator\" target=\"_blank\" rel=\"noreferrer noopener\">official website<\/a>). A wide range of frameworks, libraries, and technologies can be used in <a href=\"https:\/\/flatlogic.com\/blog\/7-reasons-why-ui-matters-in-web-development\/\">web development<\/a>. React.js is a popular JavaScript library for creating user interfaces that are frequently used in conjunction with other technologies like <a href=\"https:\/\/flatlogic.com\/blog\/top-node-js-templates\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a>. React developers must be familiar with these technologies and how they interact to create modern web applications. This article will look at some of the best open-source React projects available. We&#8217;ll divide them into categories based on their purpose and functionality. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"877\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg\" alt=\"\" class=\"wp-image-13255 lazyload\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=128x111&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=256x223&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=384x334&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=512x445&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic-600x522.jpg?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic-768x668.jpg?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?lossy=1&amp;strip=1&amp;webp=1 1008w\" data-sizes=\"(max-width: 640px) 100vw, 640px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1008px; --smush-placeholder-aspect-ratio: 1008\/877;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"877\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg\" alt=\"\" class=\"wp-image-13255\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=128x111&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=256x223&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=384x334&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?size=512x445&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic-600x522.jpg?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic-768x668.jpg?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2023\/01\/react-js-flatlogic.jpg?lossy=1&amp;strip=1&amp;webp=1 1008w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/noscript><figcaption>Source:<a href=\" https:\/\/survey.stackoverflow.co\/2022\/\"> https:\/\/survey.stackoverflow.co\/2022\/<\/a><\/figcaption><\/figure>\n\n\n\n<p>Let\u2019s look into the <strong>best React open-source projects<\/strong>. We have split this selection into several sections according to the purpose of the tools. These projects are an excellent resource for any React developer looking to broaden their knowledge or discover new tools and techniques. <\/p>\n\n\n\n<p>Note: Some (but not all) of these are MIT-licensed. So, without further ado, let&#8217;s get started with the best open-source React projects!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"four\"><strong>React toolkit<\/strong><\/h3>\n\n\n\n<p>The first section is the libraries that help to develop React apps.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Unstated<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/jamiebuilds\/unstated\">https:\/\/github.com\/jamiebuilds\/unstated<\/a><br><strong>GitHub<\/strong> <strong>Stars:<\/strong> 7.4k<br><strong>Website:<\/strong> &#8211;<br><strong>Contribution guide:<\/strong> No<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/06\/Unstated-1024x245.png\" alt=\"Unstated logo\" class=\"wp-image-2883 lazyload\" width=\"256\" height=\"61\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated.png?size=128x31&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated.png?size=256x61&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-600x144.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-768x184.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-1024x245.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-1536x368.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated.png?lossy=1&amp;strip=1&amp;webp=1 2000w\" data-sizes=\"(max-width: 256px) 100vw, 256px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 256px; --smush-placeholder-aspect-ratio: 256\/61;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/06\/Unstated-1024x245.png\" alt=\"Unstated logo\" class=\"wp-image-2883\" width=\"256\" height=\"61\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated.png?size=128x31&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated.png?size=256x61&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-600x144.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-768x184.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-1024x245.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated-1536x368.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/Unstated.png?lossy=1&amp;strip=1&amp;webp=1 2000w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Unstated is designed to build on top of the patterns already set out by React components and context.<\/p>\n\n\n\n<p><strong>Unstated builds upon three main ideas\/components:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The container is a very simple class that is made to look just like React. It is a component with only state-related bits.<\/li><li>Subscribe is how you pass the state from the Container to your Component. This will behave the same way the state behaves, i.e. when the state changes, the components re-render, but you can also call methods on the Container.<\/li><li>The Provider is where we will store all of our instances internally. The unstated Provider works similarly to the Redux or Apollo Provider: it uses context in a smooth way to extract the API into something very consumable by our components.<\/li><\/ul>\n\n\n\n<p>This library is the evolution of state management. It reduces complexity and stays within the boundaries of React. If you understand how context works, you will understand how this library works.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>React Bootstrap<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/react-bootstrap\/react-bootstrap\/\">https:\/\/github.com\/react-bootstrap\/react-bootstrap\/<\/a><br><strong>GitHub Stars:<\/strong> 17.7k<br><strong>Website:<\/strong> <a href=\"https:\/\/react-bootstrap.github.io\/\">https:\/\/react-bootstrap.github.io\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<p>React Bootstrap replaces the Bootstrap javascript. Each component has been built from scratch as a true React component, without unwanted dependencies like jQuery.<\/p>\n\n\n\n<p>By relying entirely on the Bootstrap stylesheet, React Bootstrap simply works with the thousands of Bootstrap themes you already love. Each component is implemented with accessibility in mind. The result is a set of accessible-by-default components, over what is possible from plain Bootstrap.<\/p>\n\n\n\n<p>React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"five\"><strong>User Interface<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>React Select<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/JedWatson\/react-select\">https:\/\/github.com\/JedWatson\/react-select<\/a><br><strong>Stars:<\/strong> 20.2k<br><strong>Website:<\/strong> <a href=\"https:\/\/react-select.com\/home\">https:\/\/react-select.com\/home<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/OmRNIyujbc8ArlZqBdGPnQZCxacs5mhlJRvgTjTG7SQIJrKiWXf-lWA_5OSRAMfOi9V61u5vdMGXchYPGbBz7nBWLScNjuBijw3RvOUV1H2TFCuTWU0uMNCx3lKJ0JLcrU1UI2CJ\" alt=\"React select library screenshot\" width=\"347\" height=\"259\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 347px; --smush-placeholder-aspect-ratio: 347\/259;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/OmRNIyujbc8ArlZqBdGPnQZCxacs5mhlJRvgTjTG7SQIJrKiWXf-lWA_5OSRAMfOi9V61u5vdMGXchYPGbBz7nBWLScNjuBijw3RvOUV1H2TFCuTWU0uMNCx3lKJ0JLcrU1UI2CJ\" alt=\"React select library screenshot\" width=\"347\" height=\"259\"\/><\/noscript><\/figure><\/div>\n\n\n\n<p>React Select is a select control for React initially built for use in KeystoneJS.<\/p>\n\n\n\n<p>React Select is funded by Thinkmill and Atlassian. It represents a new approach to developing powerful React.js components that work out of the box while being extremely customizable.<\/p>\n\n\n\n<p><strong>Features include:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Flexible approach to data with customizable functions<\/li><li>Extensible styling API with emotion<\/li><li>Component Injection API for complete control over the UI behavior<\/li><li>Controllable state props and modular architecture<\/li><li>Long-requested features like option groups, portal support, and animation.<\/li><\/ul>\n\n\n\n<p>The framework is very easy to customize.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Evergreen<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/segmentio\/evergreen\">https:\/\/github.com\/segmentio\/evergreen<\/a><br><strong>GitHub Stars:<\/strong> 9.6k<br><strong>Website:<\/strong> &#8211;<br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-1024x722.png\" alt=\"Evergreen UI screenshot\" class=\"wp-image-2607 lazyload\" width=\"512\" height=\"361\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=128x90&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=256x181&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=384x271&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=512x361&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-600x423.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-768x541.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-1024x722.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?lossy=1&amp;strip=1&amp;webp=1 1047w\" data-sizes=\"(max-width: 512px) 100vw, 512px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/361;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-1024x722.png\" alt=\"Evergreen UI screenshot\" class=\"wp-image-2607\" width=\"512\" height=\"361\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=128x90&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=256x181&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=384x271&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?size=512x361&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-600x423.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-768x541.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26-1024x722.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-17.35.26.png?lossy=1&amp;strip=1&amp;webp=1 1047w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Evergreen is a UI framework built on top of React by Segment.com.<\/p>\n\n\n\n<p>Evergreen contains a set of polished React components that work out of the box. Those components are built on top of a React UI Primitive for endless composability. Evergreen features a UI design language for enterprise-grade web applications.<\/p>\n\n\n\n<p><strong>Core beliefs of Evergreen:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Evergreen is built on the belief that you can never predict all future requirements, only prepare for it. Instead of creating fixed configurations that work today, Evergreen promotes building systems that anticipate new and changing design requirements.<\/li><li>Evergreen is built on the belief that things should work out of the box with smart defaults and offer full control when needed. For example, Evergreen implements most components on top of a Box primitive which allows for a lot of customization.<\/li><li>Evergreen is built on the belief that using Evergreen and contributing to Evergreen should be a pleasant experience. We prioritize documentation and all the tools for solid developer experience. We advocate respect and inclusivity in our writings and interactions.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/flatlogic.com\/generator\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"332\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png\" alt=\"\" class=\"wp-image-10455 lazyload\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=128x72&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=256x144&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=384x216&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=512x289&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?lossy=1&amp;strip=1&amp;webp=1 589w\" data-sizes=\"(max-width: 589px) 100vw, 589px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 589px; --smush-placeholder-aspect-ratio: 589\/332;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"332\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png\" alt=\"\" class=\"wp-image-10455\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=128x72&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=256x144&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=384x216&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?size=512x289&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-9.png?lossy=1&amp;strip=1&amp;webp=1 589w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/noscript><\/a><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>React spring<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/react-spring\/react-spring\">https:\/\/github.com\/react-spring\/react-spring<\/a><br><strong>GitHub Stars:<\/strong> 17.2k<br><strong>Website:<\/strong> <a href=\"https:\/\/www.react-spring.io\/\">https:\/\/www.react-spring.io\/<\/a><br><strong>Contribution guide:<\/strong> No<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/kScjB5doaiqXmXf8cI_l3qBJwbR9RVz8FCpq8viiYtrcdD-j0zHq0Wyrlr38wWkDMVa3w4hXUapXuJi3BSFhW9g69d-lcv9OX-VYNIMdXjkqINDu7-YW7sF_HU08D3fHl1NVlD2-\" alt=\"React spring screenshot\" width=\"197\" height=\"276\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 197px; --smush-placeholder-aspect-ratio: 197\/276;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/kScjB5doaiqXmXf8cI_l3qBJwbR9RVz8FCpq8viiYtrcdD-j0zHq0Wyrlr38wWkDMVa3w4hXUapXuJi3BSFhW9g69d-lcv9OX-VYNIMdXjkqINDu7-YW7sF_HU08D3fHl1NVlD2-\" alt=\"React spring screenshot\" width=\"197\" height=\"276\"\/><\/noscript><\/figure><\/div>\n\n\n\n<p>React-spring is a spring-physics-based animation library. This library represents a modern approach to animation. It inherits animated powerful interpolations and performance, as well as react-motion ease of use.<\/p>\n\n\n\n<p>React-spring is cross-platform, it supports the web, react-native, react-native-web, and practically any other platform. The size will ultimately depend on your build chain and can decrease with tree-shaking. The library comes as an es-module compiled for evergreen browsers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Material UI<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/mui-org\/material-ui\">https:\/\/github.com\/mui-org\/material-ui<\/a><br><strong>GitHub Stars:<\/strong> 58.2k<br><strong>Web-site:<\/strong> <a href=\"https:\/\/material-ui.com\/\">https:\/\/material-ui.com\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-1024x509.png\" alt=\"Material-UI screenshot\" class=\"wp-image-2598 lazyload\" width=\"512\" height=\"255\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=128x64&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=256x128&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=384x191&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=512x255&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-600x298.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-768x382.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-1024x509.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-1536x763.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?lossy=1&amp;strip=1&amp;webp=1 1600w\" data-sizes=\"(max-width: 512px) 100vw, 512px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/255;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-1024x509.png\" alt=\"Material-UI screenshot\" class=\"wp-image-2598\" width=\"512\" height=\"255\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=128x64&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=256x128&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=384x191&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?size=512x255&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-600x298.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-768x382.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-1024x509.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32-1536x763.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-19.41.32.png?lossy=1&amp;strip=1&amp;webp=1 1600w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Material-UI is one of the biggest, most obvious React open-source projects out there. It is an open-source project that features React components implementing Google\u2019s Material Design. With over 52000 stars on GitHub, Material-UI is one of the top user interface libraries for React out there.<\/p>\n\n\n\n<p>The real power of Material-UI lies in its flexibility. For example, it gives three different ways to style your components.<\/p>\n\n\n\n<p>Use hook-based API (make styles\/styles)<br>Use styled-components API (styled(Component)({\u2026stylesObject})<br>Use HoC (with styles(styles)(Component)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Ant-design<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/ant-design\/ant-design\">https:\/\/github.com\/ant-design\/ant-design<\/a><br><strong>GitHub Stars:<\/strong> 60.5k<br><strong>Website:<\/strong> <a href=\"https:\/\/ant.design\/\">https:\/\/ant.design\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/123-1024x352.png\" alt=\"Ant-design UI framework screenshot\" class=\"wp-image-2599 lazyload\" width=\"512\" height=\"176\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=128x44&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=256x88&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=384x132&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=512x176&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-600x206.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-768x264.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-1024x352.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-1536x528.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?lossy=1&amp;strip=1&amp;webp=1 1600w\" data-sizes=\"(max-width: 512px) 100vw, 512px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/176;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/123-1024x352.png\" alt=\"Ant-design UI framework screenshot\" class=\"wp-image-2599\" width=\"512\" height=\"176\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=128x44&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=256x88&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=384x132&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?size=512x176&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-600x206.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-768x264.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-1024x352.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123-1536x528.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/123.png?lossy=1&amp;strip=1&amp;webp=1 1600w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Ant Design is a React UI library that has dozens of easy-to-use components for building elegant user interfaces. It is created by the Alibaba group. This is the second most popular React UI library. Since it is an Asian product, its built-in ways of design thinking may not be suitable for European or Western products.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Storybook<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/storybookjs\/storybook\">https:\/\/github.com\/storybookjs\/storybook<\/a><br><strong>GitHub Stars:<\/strong> 49.2k<br><strong>Website:<\/strong> <a href=\"https:\/\/storybook.js.org\/\">https:\/\/storybook.js.org\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-1024x681.png\" alt=\"Storybook screenshot\" class=\"wp-image-2600 lazyload\" width=\"512\" height=\"341\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=128x85&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=256x171&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=384x256&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=512x341&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-600x399.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-768x511.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-1024x681.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?lossy=1&amp;strip=1&amp;webp=1 1064w\" data-sizes=\"(max-width: 512px) 100vw, 512px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/341;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-1024x681.png\" alt=\"Storybook screenshot\" class=\"wp-image-2600\" width=\"512\" height=\"341\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=128x85&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=256x171&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=384x256&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?size=512x341&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-600x399.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-768x511.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43-1024x681.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-26-at-21.17.43.png?lossy=1&amp;strip=1&amp;webp=1 1064w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Storybook is an open-source tool for developing UI components in isolation for React, <a href=\"https:\/\/flatlogic.com\/blog\/react-vs-vue-what-to-choose-in-2022\/\">Vue<\/a>, and Angular.<\/p>\n\n\n\n<p>The Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.<\/p>\n\n\n\n<p>The product comes with a lot of add-ons for component design, documentation, testing, interactivity, and so on. Storybook&#8217;s easy-to-use API makes it easy to configure and extend in various ways.<\/p>\n\n\n\n<p>The library was recognized by such companies as Atlassian, Airbnb, and Lyft.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"six\"><strong>Apps<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Spectrum chat<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/withspectrum\/spectrum\">https:\/\/github.com\/withspectrum\/spectrum<\/a><br><strong>GitHub Stars:<\/strong> 8.8k<br><strong>Website:<\/strong> <a href=\"https:\/\/spectrum.chat\/\">https:\/\/spectrum.chat\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/06\/spectrum.jpeg\" alt=\"react open source projects: Spectrum chat screenshot\" class=\"wp-image-2898 lazyload\" width=\"536\" height=\"335\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=128x80&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=256x160&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=384x240&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=512x320&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum-600x375.jpeg?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?lossy=1&amp;strip=1&amp;webp=1 715w\" data-sizes=\"(max-width: 536px) 100vw, 536px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 536px; --smush-placeholder-aspect-ratio: 536\/335;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/06\/spectrum.jpeg\" alt=\"react open source projects: Spectrum chat screenshot\" class=\"wp-image-2898\" width=\"536\" height=\"335\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=128x80&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=256x160&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=384x240&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?size=512x320&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum-600x375.jpeg?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/spectrum.jpeg?lossy=1&amp;strip=1&amp;webp=1 715w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Spectrum is an open-source chat similar to Slack for curating communities. It has developed on top of React and now is a part of GitHub.<\/p>\n\n\n\n<p>Conversations on Spectrum are real-time chats, just like your favorite messaging app. Every conversation gets a unique link to make it easy for people to discover, share, or save for later.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Draft.js<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/facebook\/draft-js\">https:\/\/github.com\/facebook\/draft-js<\/a><br><strong>GitHub Stars:<\/strong> 18.2k<br><strong>Website:<\/strong> <a href=\"https:\/\/draftjs.org\/\">https:\/\/draftjs.org\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/XUYonV_6q4pmibBYSz2g5suxpCxz4Qmd7cQ9CiJDogNfXXmdXIcdMpLZ26rr0PYDQnDRo1S4fgeq2RJTAyfLNzWucmofclyWPgRMqL9hqKNO_EUs1-NoqXbsM5XWOoZGXY-fO5m8\" alt=\"Draft.js screenshot\" width=\"360\" height=\"131\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 360px; --smush-placeholder-aspect-ratio: 360\/131;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/XUYonV_6q4pmibBYSz2g5suxpCxz4Qmd7cQ9CiJDogNfXXmdXIcdMpLZ26rr0PYDQnDRo1S4fgeq2RJTAyfLNzWucmofclyWPgRMqL9hqKNO_EUs1-NoqXbsM5XWOoZGXY-fO5m8\" alt=\"Draft.js screenshot\" width=\"360\" height=\"131\"\/><\/noscript><\/figure><\/div>\n\n\n\n<p>Draft.js is a framework for building rich text editors in React, powered by a universal model and taking over cross-browser differences.<\/p>\n\n\n\n<p>Draft.js makes it easy to build any type of rich text input, whether you&#8217;re just looking to support a few inline text styles or building a complex text editor for composing long-form articles.<\/p>\n\n\n\n<p>In Draft.js, everything is customizable \u2013 it consists of building blocks so that you have full control over the user interface.<\/p>\n\n\n\n<p>The app fits seamlessly into React applications, covering the details of rendering, selection, and input behavior with a familiar declarative API. The Draft.js model is built with immutable js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/flatlogic.com\/generator\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"332\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png\" alt=\"\" class=\"wp-image-10454 lazyload\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=128x72&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=256x144&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=384x216&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=512x289&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?lossy=1&amp;strip=1&amp;webp=1 589w\" data-sizes=\"(max-width: 589px) 100vw, 589px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 589px; --smush-placeholder-aspect-ratio: 589\/332;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"332\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png\" alt=\"\" class=\"wp-image-10454\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=128x72&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=256x144&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=384x216&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?size=512x289&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2022\/03\/create-and-host-app-in-minute-banner-8.png?lossy=1&amp;strip=1&amp;webp=1 589w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/noscript><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"seven\"><strong>Developer tools<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>WatermelonDB<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/Nozbe\/WatermelonDB\">https:\/\/github.com\/Nozbe\/WatermelonDB<\/a><br><strong>GitHub Stars:<\/strong> 6.7k<br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-1024x483.png\" alt=\"react open source projects: WatermelonDB screenshot\" class=\"wp-image-2602 lazyload\" width=\"512\" height=\"242\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=128x61&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=256x121&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=384x182&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=512x242&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-600x283.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-768x362.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-1024x483.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-1536x725.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?lossy=1&amp;strip=1&amp;webp=1 1600w\" data-sizes=\"(max-width: 512px) 100vw, 512px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/242;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-1024x483.png\" alt=\"react open source projects: WatermelonDB screenshot\" class=\"wp-image-2602\" width=\"512\" height=\"242\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=128x61&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=256x121&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=384x182&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?size=512x242&amp;lossy=1&amp;strip=1&amp;webp=1 512w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-600x283.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-768x362.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-1024x483.png?lossy=1&amp;strip=1&amp;webp=1 1024w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17-1536x725.png?lossy=1&amp;strip=1&amp;webp=1 1536w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.37.17.png?lossy=1&amp;strip=1&amp;webp=1 1600w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>WatermelonDB is a high-performance reactive database for powerful React and <a href=\"https:\/\/flatlogic.com\/blog\/react-native-mobile-bootstrap-web\/\">React Native<\/a> apps.<\/p>\n\n\n\n<p>It&#8217;s optimized for building complex applications in React, and the number one goal is real-world performance.<\/p>\n\n\n\n<p>In WatermelonDB nothing is loaded unless requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve instantly.<\/p>\n\n\n\n<p>But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, all UI that depends on it will automatically re-render. For example, completing a task in a to-do app will re-render the task component, the list (to reorder), and all relevant task counters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"eight\"><strong>Starter Kits<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Gatsby.js<\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/gatsbyjs\/gatsby\">https:\/\/github.com\/gatsbyjs\/gatsby<\/a><br><strong>GitHub Stars:<\/strong> 45k<br><strong>Website:<\/strong> <a href=\"https:\/\/www.gatsbyjs.org\/\">https:\/\/www.gatsbyjs.org\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png\" alt=\"react open source projects: Gatsby.js screenshot\" class=\"wp-image-2606 lazyload\" width=\"481\" height=\"430\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?size=128x114&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?size=256x229&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?size=384x343&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42-600x536.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42-768x686.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?lossy=1&amp;strip=1&amp;webp=1 961w\" data-sizes=\"(max-width: 481px) 100vw, 481px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 481px; --smush-placeholder-aspect-ratio: 481\/430;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png\" alt=\"react open source projects: Gatsby.js screenshot\" class=\"wp-image-2606\" width=\"481\" height=\"430\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?size=128x114&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?size=256x229&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?size=384x343&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42-600x536.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42-768x686.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-15.55.42.png?lossy=1&amp;strip=1&amp;webp=1 961w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Gatsby is a free open-source modern site generator for React. Websites built on Gatsby are fully functional React apps so you can create dynamic web apps, from blogs to e-commerce sites and user dashboards. Gatsby sites are built using React and GraphQL.&nbsp;<\/p>\n\n\n\n<p>The product can pull data from any source, whether it\u2019s Markdown files, headless CMS like Contentful or WordPress, or a REST or GraphQL API. Gatsby sites don\u2019t require servers so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Create react app<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/facebook\/create-react-app\">https:\/\/github.com\/facebook\/create-react-app<\/a><br><strong>GitHub Stars:<\/strong> 79.4k<br><strong>Website:<\/strong> <a href=\"https:\/\/create-react-app.dev\/\">https:\/\/create-react-app.dev\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<p>Create React app is a starter kit that helps to start a React website without learning and configuring many build tools.<\/p>\n\n\n\n<p>You don\u2019t need to rebuild the whole application when developing. Instant reloads do all the work for you. Under the hood, Create a react app using Webpack, Babel, ESLint, and other projects. If you need an advanced configuration, you can \u201deject\u201d from the Create React App and edit their config files directly.<\/p>\n\n\n\n<p>This is the most popular React project and starter tool across the React ecosystem. It is supported by Facebook Open Source.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">React Native<\/h4>\n\n\n\n<p><strong>GitHub:<\/strong><a href=\"https:\/\/github.com\/facebook\/create-react-app\"> https:\/\/github.com\/facebook\/react-native<\/a><br><strong>GitHub Stars:<\/strong> 23.3k<br><strong>Website:<\/strong><a href=\"https:\/\/create-react-app.dev\/\"> https:\/\/reactnative.dev\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<p>React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for the Android, iOS, and UWP platforms using JavaScript and the React library. React Native allows developers to create native apps with native user interfaces using just JavaScript. It also improves code reuse between different platforms\u2014a mobile application written for one platform can be easily adapted to another. React Native also has great cross-platform performance, allowing code to be written once and run on both iOS and Android.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"nine\"><strong>Other projects<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>React Router<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/ReactTraining\/react-router\">https:\/\/github.com\/ReactTraining\/react-router<\/a><br><strong>GitHub Stars:<\/strong> 40.8k<br><strong>Website:<\/strong> <a href=\"https:\/\/reacttraining.com\/react-router\/\">https:\/\/reacttraining.com\/react-router\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh6.googleusercontent.com\/m9VlRb9FHZcqWTBz0msD2FZGpSQs84aAOwwniApLbL1oZWSDJsg4opq2uc81QzPWDtx5QJ2DeO12CFeol6vqJXcSOyp10LGoOW3K_wXIp3UDuQt1XhXE5KeUC8Epkj2hO51asKYe\" alt=\"React open-source projects: React router logo\" width=\"275\" height=\"150\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 275px; --smush-placeholder-aspect-ratio: 275\/150;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/m9VlRb9FHZcqWTBz0msD2FZGpSQs84aAOwwniApLbL1oZWSDJsg4opq2uc81QzPWDtx5QJ2DeO12CFeol6vqJXcSOyp10LGoOW3K_wXIp3UDuQt1XhXE5KeUC8Epkj2hO51asKYe\" alt=\"React open-source projects: React router logo\" width=\"275\" height=\"150\"\/><\/noscript><\/figure><\/div>\n\n\n\n<p>React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>React MapGL<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/visgl\/react-map-gl\"><\/a><a href=\"https:\/\/github.com\/visgl\/react-map-gl\">https:\/\/github.com\/visgl\/react-map-gl<\/a><br><strong>GitHub Stars<\/strong>: 5.4k<br><strong>Website:<\/strong> &#8211;<br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png\" alt=\"React open-source projects: React MapGL screenshot\" class=\"wp-image-2603 lazyload\" width=\"483\" height=\"310\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?size=128x82&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?size=256x164&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?size=384x246&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56-600x385.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56-768x493.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?lossy=1&amp;strip=1&amp;webp=1 965w\" data-sizes=\"(max-width: 483px) 100vw, 483px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 483px; --smush-placeholder-aspect-ratio: 483\/310;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png\" alt=\"React open-source projects: React MapGL screenshot\" class=\"wp-image-2603\" width=\"483\" height=\"310\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?size=128x82&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?size=256x164&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?size=384x246&amp;lossy=1&amp;strip=1&amp;webp=1 384w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56-600x385.png?lossy=1&amp;strip=1&amp;webp=1 600w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56-768x493.png?lossy=1&amp;strip=1&amp;webp=1 768w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/05\/Screen-Shot-2019-06-27-at-16.44.56.png?lossy=1&amp;strip=1&amp;webp=1 965w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>This library provides React components for MapboxGL. You can use markers, popups, and maps, as well as locate users and do other actions in Mapbox maps with the help of this small library.<\/p>\n\n\n\n<p>Because most of Mapbox&#8217;s JS API functionality depends on the use of HTML5 canvases and WebGL, which React is not built to work with, this library provides convenient wrappers around initializing and (to some degree) tracking the state of a Mapbox WebGL map.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Formik<\/strong><\/h4>\n\n\n\n<p><strong>GitHub:<\/strong> <a href=\"https:\/\/github.com\/jaredpalmer\/formik\">https:\/\/github.com\/jaredpalmer\/formik<\/a><br><strong>GitHub Stars:<\/strong> 22.5k<br><strong>Website:<\/strong> <a href=\"https:\/\/jaredpalmer.com\/formik\/\">https:\/\/jaredpalmer.com\/formik\/<\/a><br><strong>Contribution guide:<\/strong> Yes<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/06\/formik.png\" alt=\"Formik basic form screenshot\" class=\"wp-image-2897 lazyload\" width=\"314\" height=\"321\" data-srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik.png?size=128x131&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik.png?size=256x262&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik-586x600.png?lossy=1&amp;strip=1&amp;webp=1 586w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik.png?lossy=1&amp;strip=1&amp;webp=1 627w\" data-sizes=\"(max-width: 314px) 100vw, 314px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 314px; --smush-placeholder-aspect-ratio: 314\/321;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/06\/formik.png\" alt=\"Formik basic form screenshot\" class=\"wp-image-2897\" width=\"314\" height=\"321\" srcset=\"https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik.png?size=128x131&amp;lossy=1&amp;strip=1&amp;webp=1 128w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik.png?size=256x262&amp;lossy=1&amp;strip=1&amp;webp=1 256w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik-586x600.png?lossy=1&amp;strip=1&amp;webp=1 586w, https:\/\/b1694534.smushcdn.com\/1694534\/wp-content\/uploads\/2020\/06\/formik.png?lossy=1&amp;strip=1&amp;webp=1 627w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/noscript><\/figure><\/div>\n\n\n\n<p>Formik takes care of the repetitive and annoying stuff &#8211; keeping track of values\/errors\/visited fields, taking care of validation, and handling submission &#8211; so you don&#8217;t have to.<\/p>\n\n\n\n<p>By staying within the core React framework and away from magic, Formik makes debugging, testing, and reasoning form an easy breeze.<\/p>\n\n\n\n<p>Formik does not use external state management libraries like Redux or MobX.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">React-Hooks<\/h4>\n\n\n\n<p>React-Hooks is an open-source library that enables developers to use state and side effect hooks for React components. It helps developers maintain an organized codebase and optimize performance. React-Hooks allows developers to access and manipulate the component state, trigger side effects using the lifecycle of a component, and have better control over the component\u2019s rendering process. The library also provides a bridge to other libraries such as Redux, making it easier to share data between components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ten\"><strong>Wrapping up React Open Source Projects<\/strong><\/h2>\n\n\n\n<p>It&#8217;s really hard getting started, but once you get over the first contribution, making future contributions is much easier. It&#8217;s not all roses. The React open-source projects grow an ecosystem around them that gives a good chance to start contributing to really a valuable project for you, your company, and the world. If you have something to add, we will be very delighted to listen to your thoughts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"eleven\"><strong>BONUS: A checklist before you contribute<\/strong><\/h2>\n\n\n\n<p>When you\u2019ve found a project you\u2019d like to contribute to, do a quick scan to make sure that the project is suitable for accepting contributions. Otherwise, your hard work may never get a response.<\/p>\n\n\n\n<p>Here\u2019s a handy checklist to evaluate whether a project is good for new contributors:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Meets the definition of open source;<\/li><li>Does it have a license? Usually, this is a file called LICENSE in the root of the repository;<\/li><li>The project actively accepts contributions;<\/li><li>Look at the commit activity on the master branch. When was the latest commit?<\/li><li>How many contributors does the project have?<\/li><li>How often do people commit? (On GitHub, you can find this by clicking &#8220;Commits&#8221; in the top bar.)<\/li><\/ul>\n\n\n\n<p>Next, look at the project\u2019s issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>How many open issues are there?<\/li><li>Do maintainers respond quickly to issues when they are opened?<\/li><li>Is there an active discussion on the issues?<\/li><li>Are the issues recent?<\/li><li>Are issues getting closed? (On GitHub, click the &#8220;closed&#8221; tab on the Issues page to see closed issues.)<\/li><\/ul>\n\n\n\n<p>Now do the same for the project\u2019s pull requests:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>How many open pull requests are there?<\/li><li>Do maintainers respond quickly to pull requests when they are opened?<\/li><li>Is there an active discussion on the pull requests?<\/li><li>Are the pull requests recent?<\/li><li>How recently were any pull requests merged? (On GitHub, click the &#8220;closed&#8221; tab on the Pull Requests page to see closed PRs.)<\/li><\/ul>\n\n\n\n<p>The project is welcoming:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A project that is friendly and welcoming tells they will be receptive to new contributors;<\/li><li>Do the maintainers respond helpfully to questions in issues?<\/li><li>Are people friendly in the issues, discussion forum, and chat (for example, IRC or Slack)?<\/li><li>Do pull requests get reviewed?<\/li><li>Do maintainers thank people for their contributions?<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"twelve\"><strong>Create your own React project with Flatlogic<\/strong><\/h2>\n\n\n\n<p>At Flatlogic we have built a development platform that simplifies the creation of web applications \u2013 we call it the \u00a0<a href=\"https:\/\/flatlogic.com\/generator\">Flatlogic Platform<\/a>. The tool allows you to create a fully working full-stack\u00a0CRUD\u00a0app in minutes, you just need to choose the stack, design, and define the database model with the help of an online interface and that is all. Moreover, you can preview generated code, push it to your GitHub repo, and get the automatically generated REST API docs.<br><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Flatlogic Platform: Easily Create, Host and Develop React, Angular, Vue web applications\" width=\"640\" height=\"360\" data-src=\"https:\/\/www.youtube.com\/embed\/DqFRBThafJs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br>Please see the guide below\u00a0on how to do the full-stack web app based on React with the help of\u00a0<a href=\"https:\/\/flatlogic.com\/generator\">Flatlogic Platform<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step \u21161. Choose your project name<\/strong><\/h3>\n\n\n\n<p>Any good story starts with a title, and any good React App starts with a name. So, summon all of your wit and creativity and write your project\u2019s name into the fill-in bar of the Full Stack\u00a0<a href=\"https:\/\/flatlogic.com\/blog\/full-stack-web-app-builder\/\">Flatlogic Platform<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step \u21162. Select your React App Stack<\/strong><\/h3>\n\n\n\n<p>At this step, you will need to choose the frontend, backend, and database stack of your app. And, to correlate with our illustrative React App, we will choose here React for the front end,\u00a0Node.js\u00a0for the back end, and MySQL for the database.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step \u21163. Choose your React App Design<\/strong><\/h3>\n\n\n\n<p>As we\u2019ve already mentioned, design is quite important. Choose any from several colorful, visually pleasing, and, most importantly, extremely convenient designs the Flatlogic platform offers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step \u21164. Create your React App Database Schema<\/strong><\/h3>\n\n\n\n<p>You can create a database model with a UI editor. There are options to create custom tables, columns, and relationships between them. So, you can create any type of content. Moreover, you will receive automatically generated REST API docs for your application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step \u21165. Review and Generate your React App<\/strong><\/h3>\n\n\n\n<p>In the final step, just to make sure everything is as you want it to be, you can review all of the previously made decisions and click the \u201cCreate Project\u201d button. After a short time to generate, you will have at your fingertips a beautiful and fully functional React Node.js App. Voila! Nice and easy!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>We will be helpful for you to support us on <a href=\"https:\/\/twitter.com\/flatlogic\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter<\/a><em> (if it&#8217;s still alive)<\/em>, <a href=\"https:\/\/by.linkedin.com\/company\/flatlogic\" target=\"_blank\" rel=\"noreferrer noopener\">LinkedIn<\/a>, Facebook, and <a href=\"https:\/\/www.producthunt.com\/products\/flatlogic-llc\" target=\"_blank\" rel=\"noreferrer noopener\">ProductHunt<\/a>! <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">\ud83d\ude3c Wow! We are already in second place on <a href=\"https:\/\/twitter.com\/ProductHunToday?ref_src=twsrc%5Etfw\">@ProductHunToday<\/a> <br><br>Support us on our journey!<a href=\"https:\/\/t.co\/XjlSMcAqVn\">https:\/\/t.co\/XjlSMcAqVn<\/a><a href=\"https:\/\/twitter.com\/hashtag\/ProductHunt?src=hash&amp;ref_src=twsrc%5Etfw\">#ProductHunt<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/ReactJS?src=hash&amp;ref_src=twsrc%5Etfw\">#ReactJS<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/NodeJS?src=hash&amp;ref_src=twsrc%5Etfw\">#NodeJS<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/VueJS?src=hash&amp;ref_src=twsrc%5Etfw\">#VueJS<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/saas?src=hash&amp;ref_src=twsrc%5Etfw\">#saas<\/a> <a href=\"https:\/\/t.co\/lQLnchg6Gf\">pic.twitter.com\/lQLnchg6Gf<\/a><\/p>&mdash; Flatlogic (@flatlogic) <a href=\"https:\/\/twitter.com\/flatlogic\/status\/1579830570007527426?ref_src=twsrc%5Etfw\">October 11, 2022<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"three\">About our company<\/h2>\n\n\n\n<p>At Flatlogic we develop <a href=\"https:\/\/flatlogic.com\/templates\" target=\"_blank\" rel=\"noreferrer noopener\">React, Angular,<\/a> and <a href=\"https:\/\/flatlogic.com\/blog\/world-first-transparent-admin-template-built-with-vue-js-announcing-light-blue-vue-js-full-version-release\/\">Vue templates<\/a> and give our most professional clients a special tool to generate CRUD applications by themself and save over 250 hours of the development lifecycle. During the last 7 years, we have completed more than <a href=\"https:\/\/flatlogic.com\/solutions\" target=\"_blank\" rel=\"noreferrer noopener\">40 big projects for startups and large enterprises<\/a>. As a team, we always have a deep desire to help our clients. <\/p>\n\n\n\n<p>We are listed among the <strong>Top 20 Web Development companies from Lithuania<\/strong>. <a href=\"https:\/\/flatlogic.com\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">Fill out the form<\/a> on the right corner of the main page and feel free to ask! <strong>If you are a <em>Professional<\/em>\u00a0<em>Developer<\/em>, check out other articles<\/strong>:<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/flatlogic.com\/blog\/free-open-source-crm-software-for-small-business-2\/\">Free Open-Source CRM Software For Small Business<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/flatlogic.com\/blog\/ai-generated-roles-and-permissions-to-flatlogic-generator\/\">AI-Generated Roles and Permissions to Flatlogic Generator<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/flatlogic.com\/blog\/research-results-starting-web-app-in-2024\/\">Decline in Coding: Web App Developers Writing Code Drops to 36.02% in 2024 &#8211; [Research Results]<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/flatlogic.com\/blog\/exploring-the-future-of-ai-web-app-generators\/\">Exploring the Future of AI Web App Generators<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/flatlogic.com\/blog\/ai-web-app-generator-to-make-apps-in-minutes\/\">AI Web App Generator to Make Apps in Minutes<\/a><\/li>\n<\/ul>\n\n\n<ul class=\"wp-block-social-links is-style-default is-layout-flex wp-block-social-links-is-layout-flex\">\n\n\n\n\n\n\n\n\n\n\n\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is about best React open-source projects<\/p>\n","protected":false},"author":2,"featured_media":1031,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[21,35,47],"class_list":["post-1024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reviews","tag-open-source","tag-reactjs","tag-reviews"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Best React Open Source Projects - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"We have picked the best and most popular React open source projects that might help you in web development. Check them out!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best React Open Source Projects - Flatlogic Blog\" \/>\n<meta property=\"og:description\" content=\"We have picked the best and most popular React open source projects that might help you in web development. Check them out!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-08T09:20:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T18:12:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/06\/ReactArticle.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"15 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flatlogic.com\/blog\/#website\",\"url\":\"https:\/\/flatlogic.com\/blog\/\",\"name\":\"Flatlogic Blog\",\"description\":\"Explore and learn everything about React, Angular, Vue, Bootstrap and React Native application templates\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/flatlogic.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/06\/ReactArticle.png\",\"width\":800,\"height\":600},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/#webpage\",\"url\":\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/\",\"name\":\"Best React Open Source Projects - Flatlogic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/flatlogic.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/#primaryimage\"},\"datePublished\":\"2021-12-08T09:20:00+00:00\",\"dateModified\":\"2024-02-26T18:12:33+00:00\",\"author\":{\"@id\":\"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/2a358db460fb453be69232ff0826bb34\"},\"description\":\"We have picked the best and most popular React open source projects that might help you in web development. Check them out!\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flatlogic.com\/blog\/best-react-open-source-projects\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/2a358db460fb453be69232ff0826bb34\",\"name\":\"Philip Daineka\",\"description\":\"CEO at Flatlogic\",\"sameAs\":[\"https:\/\/flatlogic.com\",\"Computer Science degree from Belarusian State University of Informatics and Radio- electronics. Oracle Certified Java Professional. Since 2014 managed and led over 100 projects of Flatlogic clients.\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/1024"}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=1024"}],"version-history":[{"count":21,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/1024\/revisions"}],"predecessor-version":[{"id":15146,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/1024\/revisions\/15146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/1031"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=1024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=1024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=1024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}