<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Akhil</title>
    <description>The latest articles on DEV Community by Akhil (@undefinedhere).</description>
    <link>https://dev.to/undefinedhere</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F696244%2F696cd5a7-40a1-49a3-b1c1-66c8eb33a579.jpg</url>
      <title>DEV Community: Akhil</title>
      <link>https://dev.to/undefinedhere</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/undefinedhere"/>
    <language>en</language>
    <item>
      <title>Every React Developer should know these libraries</title>
      <dc:creator>Akhil</dc:creator>
      <pubDate>Wed, 08 Sep 2021 19:01:43 +0000</pubDate>
      <link>https://dev.to/undefinedhere/every-react-developer-should-know-these-libraries-17mg</link>
      <guid>https://dev.to/undefinedhere/every-react-developer-should-know-these-libraries-17mg</guid>
      <description>&lt;p&gt;Hey, Devs! I'm here to share some best &lt;code&gt;React component libraries&lt;/code&gt; that are popular among developers for their usability and accessibility.&lt;/p&gt;

&lt;p&gt;Picking the correct library for an application can be tricky, When it comes to creating modern React applications, these component libraries save us ample time and effort.&lt;/p&gt;

&lt;p&gt;So, let’s begin.&lt;/p&gt;

&lt;h1&gt;
  
  
  React Libraries
&lt;/h1&gt;

&lt;h3&gt;
  
  
  1. Forms &amp;amp; Validation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://formik.org/"&gt;Formik &amp;amp; Yup&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://react-hook-form.com/"&gt;React Hook Form&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://final-form.org/react"&gt;React Final Form&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. State Management
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://react-redux.js.org/"&gt;Redux&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.apollographql.com/docs/react/local-state/local-state-management/"&gt;Apollo Client&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://mobx.js.org/getting-started"&gt;Mobx&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://recoiljs.org/"&gt;Recoil&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Routing &amp;amp; Type Checking
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://reactrouter.com/"&gt;React-Router&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://flow.org/en/docs/react/"&gt;Flow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.typescriptlang.org/docs/handbook/react.html"&gt;Typescript&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Styling
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://styled-components.com/"&gt;Styled Components&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/"&gt;CSS Module&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;&lt;a href="https://tailwindcss.com/"&gt;Tailwind Css&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  5. UI Components libs
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://reactstrap.github.io/"&gt;Reactstrap&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://material-ui.com/"&gt;Material UI&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ant.design/"&gt;Ant Design&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://chakra-ui.com/"&gt;Chakra UI&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://tailwindui.com/"&gt;Tailwind UI&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  6. API Client
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.npmjs.com/package/axios"&gt;Axios&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://graphql.org/"&gt;GraphQL&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Wrapping Up!
&lt;/h2&gt;

&lt;p&gt;That’s all from my side. Although there are multiple other React libraries that developers find helpful, I have mentioned only best ones.&lt;/p&gt;

&lt;p&gt;Let me know if you found this post helpful!&lt;br&gt;
Have any suggestions? Reach out to me on &lt;a href="https://twitter.com/undefinedhere"&gt;Twitter&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>React Practice Project for Beginner to Advance</title>
      <dc:creator>Akhil</dc:creator>
      <pubDate>Wed, 01 Sep 2021 19:11:12 +0000</pubDate>
      <link>https://dev.to/undefinedhere/react-practice-project-for-beginner-to-advance-18da</link>
      <guid>https://dev.to/undefinedhere/react-practice-project-for-beginner-to-advance-18da</guid>
      <description>&lt;p&gt;Many &lt;code&gt;developers&lt;/code&gt; or &lt;code&gt;beginners&lt;/code&gt; just learn all the fundamentals concepts but they don't implement those concepts. So &lt;strong&gt;Projects&lt;/strong&gt; are one of the best ways to implement those concepts.&lt;/p&gt;

&lt;h3&gt;
  
  
  Here are some projects which are defined by level.
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Beginner Projects (React Basics)&lt;/li&gt;
&lt;li&gt;Intermediate Projects (Beyond Basics)&lt;/li&gt;
&lt;li&gt;Advance Projects (Optimization)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Beginner (React Basics)
&lt;/h2&gt;

&lt;p&gt;So here you just have to focus on basics concepts of React such as &lt;code&gt;Basic Hooks&lt;/code&gt; (useState and useEffect), &lt;code&gt;Props&lt;/code&gt;, &lt;code&gt;Incline Styling&lt;/code&gt;, &lt;code&gt;Forms&lt;/code&gt;, and &lt;code&gt;JSX&lt;/code&gt;. Take your time and just understand these concepts in detail. After that practice given below projects ideas.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Simple Counter App
2. Calculator App
3. Todo App
4. Weather API App
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Intermediate (Beyond Basics)
&lt;/h2&gt;

&lt;p&gt;First of all, appreciate yourself as you're &lt;code&gt;consistent&lt;/code&gt; and now you're on the intermediate level.&lt;/p&gt;

&lt;p&gt;Building the understanding of basic concepts boosts your confidence to make some little but &lt;code&gt;complex&lt;/code&gt; applications. Here you will understand the &lt;code&gt;state management&lt;/code&gt; of your entire application also you will learn about the &lt;code&gt;life cycle of components&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Blog App
2. Resume Builder App
3. Management App
4. Score Board App
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Advance (Optimization)
&lt;/h2&gt;

&lt;h4&gt;
  
  
  Alright Alright Alright, you're near to conqueror React.
&lt;/h4&gt;

&lt;p&gt;Now if you are at this level then you have already gotten the idea about how these applications can be made. However, remember at this point you should have to build these applications in an &lt;code&gt;optimized&lt;/code&gt; way.&lt;/p&gt;

&lt;p&gt;You have to write much more &lt;code&gt;structured&lt;/code&gt; as well as &lt;code&gt;maintainable&lt;/code&gt; code. Keep in mind how very well your application work while &lt;code&gt;scaling&lt;/code&gt; or handling &lt;code&gt;concurrent&lt;/code&gt; users at a time.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Online Trading App 
2. Ecommerce App
3. Productivity App
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Reference Links
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://reactjs.org/"&gt;React&lt;/a&gt;&lt;br&gt;
&lt;a href="https://reactjs.org/docs/hello-world.html"&gt;React Hello World&lt;/a&gt;&lt;br&gt;
&lt;a href="https://reactjs.org/docs/hooks-intro.html"&gt;React Hooks&lt;/a&gt;&lt;br&gt;
&lt;a href="https://devhints.io/react"&gt;Ultimate React cheatsheet&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.udemy.com/course/react-tutorial/?ranMID=39197&amp;amp;ranEAID=JVFxdTr9V80&amp;amp;ranSiteID=JVFxdTr9V80-IC2uTX64TKt5E9lwqC47fg&amp;amp;LSNPUBID=JVFxdTr9V80&amp;amp;utm_source=aff-campaign&amp;amp;utm_medium=udemyads"&gt;React JS Frontend Web Development for Beginners&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.toptal.com/react/interview-questions"&gt;21 Essential React.js Interview Questions&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Wrapping Up
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt;&lt;br&gt;
I would like say that after conquerored &lt;code&gt;React&lt;/code&gt; also maintain consistency for your entire developer journey. Learn new things and keep up to date yourself with current industry tech stacks.&lt;/p&gt;

&lt;p&gt;Let me know if you found this post helpful!&lt;br&gt;
Have any suggestions? Reach out to me on &lt;a href="https://twitter.com/undefinedhere"&gt;Twitter!&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
