{"id":379718,"date":"2021-12-11T16:00:20","date_gmt":"2021-12-11T13:00:20","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/"},"modified":"2021-12-11T16:00:20","modified_gmt":"2021-12-11T13:00:20","slug":"hey-react-devs-heres-why-ui-libraries-will-improve-your-apps","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/","title":{"rendered":"#Hey, React devs! Here\u2019s why UI libraries will improve your apps"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a245da7cb068\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a245da7cb068\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#Use_UIlibraries_to_style_React_apps\" >Use UIlibraries to style React apps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#Benefits_of_styling_React_apps_with_UI_libraries1_Rapid_Development_Process\" >Benefits of styling React apps with UI libraries1. Rapid Development Process<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#1_Rapid_Development_Process\" >1. Rapid Development Process<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#2_Awesome_UI\" >2. Awesome UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#3_No_coding_from_scratch\" >3. No coding from scratch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#4_More_time_for_development\" >4. More time for development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#5_Easy_to_work_with\" >5. Easy to work with<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#6_No_CSS_maintenance\" >6. No CSS maintenance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#7_Cross-browser_compatible\" >7. Cross-browser compatible<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/hey-react-devs-heres-why-ui-libraries-will-improve-your-apps\/#Whats_Next\" >What\u2019s Next?<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#Hey, React devs! Here\u2019s why UI libraries will improve your <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>s<\/strong>&#8221;<\/p>\n<div><em>Slow and steady wins the race.<\/em> We\u2019ve all heard this phrase thousands of times, but is it really true for our modern time where new businesses and technologies are getting launched every day?<\/p>\n<p>You can definitely finish the race being slow and steady but there\u2019s no guarantee of winning it. This thing is even more true for tech where each day new frameworks, libraries, tools, and websites are getting launched.<\/p>\n<p>Therefore, as a developer you should try to delegate\/eliminate\/substitute your less important tasks to <strong>focus most on the high-value tasks.<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Use_UIlibraries_to_style_React_apps\"><\/span>Use UIlibraries to style React apps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One area where developers spend a lot of time but ideally they shouldn\u2019t (initially) is the styling of their web app.<\/p>\n<p>Writing CSS code from scratch can be a beautiful experience but if you\u2019re a startup, indie hacker, hobbyist, or someone else hoping to launch products sooner and faster, it shouldn\u2019t be your priority for the initial days.<\/p>\n<p>There are multiple ways to style your React app which can help you build the MVP quickly and grab the bits and pieces of the UI components to deliver a beautiful website in 2 days.<\/p>\n<p>There are multiple ways to style React apps, some of the most common ones are listed below:<\/p>\n<ul>\n<li>Separate CSS file<\/li>\n<li>Inline CSS<\/li>\n<li>CSS-In-JS<\/li>\n<li>CSS Preprocessors<\/li>\n<li>CSS Frameworks<\/li>\n<li>UI Libraries<\/li>\n<\/ul>\n<p>While each method of styling has its own advantages and disadvantages, this article will be focused solely upon styling <em>using <\/em><strong>UI libraries for styling React apps.<\/strong><\/p>\n<p><em>Therefore, fasten your seatbelts and without wasting any time let\u2019s get started \ud83d\ude42<\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Benefits_of_styling_React_apps_with_UI_libraries1_Rapid_Development_Process\"><\/span>Benefits of styling React apps with UI libraries1. Rapid Development Process<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_Rapid_Development_Process\"><\/span><span>1. Rapid Development Process<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Nothing personal against using CSS but time is your most important asset and you don\u2019t want to waste it designing the most beautiful app in the world when you\u2019re not even sure how many people will use it. There are lots of amazing libraries from Material UI, Semantic UI, Chakra UI to React Bootstrap, etc.<\/p>\n<p>Go to their websites and try out different components from various libraries, go ahead with the one which is best for you. This way you can focus more on the actual development of the product and do the styling very quickly with the help of libraries.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Awesome_UI\"><\/span>2. Awesome UI<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Building faster is no excuse for building ugly websites. Your website even in its very first version should have a decent level of aestheticism in it otherwise your customer would hate the design and wouldn\u2019t come back later.<\/p>\n<p>Fortunately, the good <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a> for us is that UI libraries are designed to build beautiful UIs in no time. All the popular libraries contain beautiful components that can be harmoniously rendered to build a great user interface for your app. See the image below to get the reference of how awesome your app can get just by using a great UI library.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_No_coding_from_scratch\"><\/span>3. No coding from scratch<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pre-build UI components help you code less but create faster. Developers are also humans and therefore have finite energy with them, so it\u2019s always good to use that energy on the most important task which is writing the code that makes your app functional.<\/p>\n<p>Using UI libraries saves you lots of potential code which could be written to make your app look good with lots of other worries like its maintenance and naming CSS classes etc.<\/p>\n<p>Let\u2019s look at an example of how easily you can render a button in your app with Material UI:<\/p>\n<pre><span>&lt;Button variant=\"text\"&gt;Text&lt;\/Button&gt; <\/span>&#13;\n&#13;\n<span>&lt;Button variant=\"contained\"&gt;Contained&lt;\/Button&gt; <\/span>&#13;\n&#13;\n<span>&lt;Button variant=\"outlined\"&gt;Outlined&lt;\/Button&gt;<\/span><\/pre>\n<p>Result:<\/p>\n<figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1375573 js-lazy\" alt=\"React app\" width=\"512\" height=\"95\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed.png\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed.png 512w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed-280x52.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed-270x50.png 270w\"\/><noscript><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1375573\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed.png\" alt=\"React app\" width=\"512\" height=\"95\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed.png 512w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed-280x52.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/unnamed-270x50.png 270w\"\/><\/noscript><\/figure>\n<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_More_time_for_development\"><\/span>4. More time for development<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It\u2019s a no-brainer. Cutting down the time on styling will automatically give you more time for development and this is what I\u2019m also advocating throughout this article.<\/p>\n<p>And this is also the best reason to bet more on UI libraries in the initial phase because the more time you spend in development, the better your app will be.<\/p>\n<p>Styling can be a secondary process but not in development.<\/p>\n<p>Not to forget that development is not only about development, it\u2019s also about thinking about the problem\/logic of your app, actual development, solving bugs, and adding new features to the app again and again.<\/p>\n<p>Therefore, using libraries will simplify the designing process at least and give more relief to the developer.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Easy_to_work_with\"><\/span>5. Easy to work with<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you don\u2019t have a knack for CSS, sometimes it can be boring and hard to build various complex layouts and beautiful designs.<\/p>\n<p>However, with a library, you can easily create both complex layouts and beautiful designs even if you\u2019re a CSS beginner or don\u2019t have a good relationship with the language.<\/p>\n<p>You still need the understanding of basic CSS concepts at least because these libraries work on the same principles of CSS but you certainly don\u2019t need to become a CSS master to build great websites.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_No_CSS_maintenance\"><\/span>6. No CSS maintenance<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This is a great sigh of relief for developers considering how hard CSS maintenance can be once your project matures at a certain level. So it\u2019s always a better idea to create your MVP without using CSS and once you receive a positive response from the customers and finalize the design, you can go with CSS if your project demands great customization which will be hard to imitate with UI libraries.<\/p>\n<p>For that to happen you always need to keep the future versions in mind while writing CSS to optimize and maintain the code in such a way that it doesn\u2019t break while implementing a future feature.<\/p>\n<p>Therefore, it\u2019s better to stay away from the extra headache of CSS maintenance when you already have to develop the whole product itself.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Cross-browser_compatible\"><\/span>7. Cross-browser compatible<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Writing CSS that works in a browser is one thing and writing CSS that works in all browsers is another. If you don\u2019t take this thing seriously, it may haunt your dreams once the project acquires a high customer base.<\/p>\n<p>Again UI libraries come to the rescue, most of the popular libraries offer great cross-browser compatibility enough for you to sleep peacefully at night only dreaming about development and solutions of problems both in your app and business instead of being haunted by the dark dream of making your app work on different browsers.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Whats_Next\"><\/span>What\u2019s Next?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I\u2019ve given you enough reasons to not jump into CSS directly when working on a new project. In the initial phase, collecting feedback from the users and working on the product are the two most important tasks.<\/p>\n<p>Once you\u2019ve everything figured out, your MVP is successful and the future vision of the product is cleared, you can finally sit with your team to finalize the future tech stack and designs of the project.<\/p>\n<p>From here, whether you\u2019ll use UI libraries or CSS preprocessors or Vanilla CSS or something else is your own call. This decision should be made collectively taking into consideration all the crucial details of your project like its design, user base, future vision, complexity, etc.<\/p>\n<p>No one method is better than another, you have to just think deeply before making your choices.<\/p>\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong>\n<\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/thenextweb.com\/news\/react-devs-heres-ui-libraries-will-improve-apps-syndication\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#Hey, React devs! Here\u2019s why UI libraries will improve your apps&#8221; Slow and steady wins the race. We\u2019ve all heard this phrase thousands of times, but is it really true for our modern time where new businesses and technologies are getting launched every day? You can definitely finish the race being slow and steady but&#8230;<\/p>\n","protected":false},"author":1,"featured_media":379719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/img-cdn.tnwcdn.com\/image\/tnw?filter_last=1&fit=1280,640&url=https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/12\/Untitled-1.jpg&signature=ddc1f89db023ae4efd9facaa41e0206e","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-379718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/379718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=379718"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/379718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/379719"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=379718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=379718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=379718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}