{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnReactJS","result":{"data":{"blog":{"frontmatter":{"title":"LEARN REACT JS","thumbnail":"blog09","date":"August 21, 2020","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n<h4>Introduction</h4>\n<div class=\"m-2\">\n<p>\n    <strong>React JS</strong> is an open-source JavaScript Library\n    that is used for building user interfaces specifically for\n    single-page applications. It's used for handling the view\n    layer for web and mobile apps. React also allows us to create\n    reusable UI components and the main purpose of React is to be\n    fast, scalable, and simple.\n</p>\n<p>\n    React is becoming more popular day by day and is taking over\n    Frontend Dev.React can also render on the server using Node\n    and power mobile apps using React Native.\n</p>\n<p>\n    Knowing the basics of JavaScript is must for getting into\n    React.\n    <a href=\"/blogs/learnJavascript\">Click here</a> to know the\n    topics to be covered in JavaScript.\n</p>\n</div>\n</div>\n<div class=\"row my-2 p-2\">\n<div class=\"col-12\">\n<p class=\"p-1 lead\">\n    Let's see what topics you need to cover and my favourite\n    resources for learning React.\n</p>\n</div>\n<div class=\"col-md-7 my-1\">\n<h5>Topics to cover:</h5>\n<div class=\"m-2\">\n    <p><strong>Basics</strong></p>\n    <ul class=\"pl-4\">\n    <li>Create React App</li>\n    <li>Class Components</li>\n    <li>Functional Components</li>\n    <li>JSX</li>\n    <li>props and state</li>\n    <li>List and Keys</li>\n    <li>Simple Form</li>\n    </ul>\n    <p><strong>Intermediate</strong></p>\n    <ul class=\"pl-4\">\n    <li>Component Lifecycle Methods</li>\n    <li>Conditional Rendering</li>\n    <li>React Router</li>\n    <li>Context API</li>\n    <li>Render props</li>\n    <li>Error Boundaries</li>\n    <li>Higher Order Components</li>\n    <li>Portals</li>\n    <li>HTTP Requests</li>\n    </ul>\n    <p>\n    <strong>>Advanced</strong><br /><span\n        class=\"pl-2 text-muted\"\n        >React Hooks -Not really advanced</span\n    >\n    </p>\n    <ul class=\"pl-4\">\n    <li>useState Hook</li>\n    <li>useEffect Hook</li>\n    <li>useRef Hook</li>\n    <li>useContext Hook</li>\n    <li>useReducer Hook</li>\n    <li>useMemo Hook</li>\n    <li>Custom Hooks</li>\n    </ul>\n    <p><strong>Miscellaneous</strong></p>\n    <ul class=\"pl-4\">\n    <li>Redux</li>\n    <li>Styled Components</li>\n    <li>Formik</li>\n    <li>Storybook</li>\n    <li>Practical React</li>\n    <li>GatsBy</li>\n    <li>Next.Js</li>\n    </ul>\n</div>\n</div>\n<div class=\"col-md-5 my-1\">\n<h5>Resource:</h5>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/videoseries?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/sBws8MSXN7A\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/6Ied4aZxUzc\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/dGcsHMXbSOA\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<p class=\"pt-3\">\n    It would easy if you watch the above tutorials in the order\n    that I've mentioned.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<p class=\"\">\n<a href=\"/blogs/reactJsProjects\">Click here</a> for REACT JS\nPROJECTS.\n</p>\n</div>\n","html":"<div class=\"my-2 p-2\">\n<h4>Introduction</h4>\n<div class=\"m-2\">\n<p>\n    <strong>React JS</strong> is an open-source JavaScript Library\n    that is used for building user interfaces specifically for\n    single-page applications. It's used for handling the view\n    layer for web and mobile apps. React also allows us to create\n    reusable UI components and the main purpose of React is to be\n    fast, scalable, and simple.\n</p>\n<p>\n    React is becoming more popular day by day and is taking over\n    Frontend Dev.React can also render on the server using Node\n    and power mobile apps using React Native.\n</p>\n<p>\n    Knowing the basics of JavaScript is must for getting into\n    React.\n    <a href=\"/blogs/learnJavascript\">Click here</a> to know the\n    topics to be covered in JavaScript.\n</p>\n</div>\n</div>\n<div class=\"row my-2 p-2\">\n<div class=\"col-12\">\n<p class=\"p-1 lead\">\n    Let's see what topics you need to cover and my favourite\n    resources for learning React.\n</p>\n</div>\n<div class=\"col-md-7 my-1\">\n<h5>Topics to cover:</h5>\n<div class=\"m-2\">\n    <p><strong>Basics</strong></p>\n    <ul class=\"pl-4\">\n    <li>Create React App</li>\n    <li>Class Components</li>\n    <li>Functional Components</li>\n    <li>JSX</li>\n    <li>props and state</li>\n    <li>List and Keys</li>\n    <li>Simple Form</li>\n    </ul>\n    <p><strong>Intermediate</strong></p>\n    <ul class=\"pl-4\">\n    <li>Component Lifecycle Methods</li>\n    <li>Conditional Rendering</li>\n    <li>React Router</li>\n    <li>Context API</li>\n    <li>Render props</li>\n    <li>Error Boundaries</li>\n    <li>Higher Order Components</li>\n    <li>Portals</li>\n    <li>HTTP Requests</li>\n    </ul>\n    <p>\n    <strong>>Advanced</strong><br /><span\n        class=\"pl-2 text-muted\"\n        >React Hooks -Not really advanced</span\n    >\n    </p>\n    <ul class=\"pl-4\">\n    <li>useState Hook</li>\n    <li>useEffect Hook</li>\n    <li>useRef Hook</li>\n    <li>useContext Hook</li>\n    <li>useReducer Hook</li>\n    <li>useMemo Hook</li>\n    <li>Custom Hooks</li>\n    </ul>\n    <p><strong>Miscellaneous</strong></p>\n    <ul class=\"pl-4\">\n    <li>Redux</li>\n    <li>Styled Components</li>\n    <li>Formik</li>\n    <li>Storybook</li>\n    <li>Practical React</li>\n    <li>GatsBy</li>\n    <li>Next.Js</li>\n    </ul>\n</div>\n</div>\n<div class=\"col-md-5 my-1\">\n<h5>Resource:</h5>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/videoseries?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/sBws8MSXN7A\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/6Ied4aZxUzc\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/dGcsHMXbSOA\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n<p class=\"pt-3\">\n    It would easy if you watch the above tutorials in the order\n    that I've mentioned.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<p class=\"\">\n<a href=\"/blogs/reactJsProjects\">Click here</a> for REACT JS\nPROJECTS.\n</p>\n</div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M374%206l6%209%202%203%206%2010%208%2014%204%207v-5c0-4-3-9-16-29l-6-10c0-3-3-5-7-5-2%200-2%201%203%206M110%208c-3%200-4%200-4%203l2%202c2%200%202%201%202%206%200%206%200%206%203%206%202%200%202%200%202-6s0-7%202-7l2-2c0-3%200-3-9-2m13%201c-6%206-4%2016%202%2016%203%200%205-1%206-4%203-9-3-18-8-12m24%201l-1%209c0%206%200%206%203%206%202%200%202%200%202-3v-2l1%202c2%204%208%204%2011%200%202-3%200-5-3-3-2%203-3%202-3-1l2-6v2l2%201c3%200%203%200%203-3%200-6-8-6-12%201-1%202-1%202-1-1%200-4%200-5-2-5-1%200-2%201-2%203m43-2c-5%200-5%200-5%203l2%202c2%200%202%201%201%206%200%206%200%206%202%206%203%200%203%200%203-5%200-6%201-8%203-8l1-1V8h-7m12%200c-4%201-5%2012-2%2015%204%205%2010%201%2010-8%200-6-3-9-8-7m21%200c-4%202-6%2012-3%2015%203%204%2011%201%2011-3%200-2-2-2-4-1-2%203-3%202-3-1l2-6v2l2%201c2%200%203-1%203-2%201-1-1-5-2-5h-6m13%200c-4%203-5%2013-2%2015%205%205%2010%201%2010-7%201-7-4-11-8-8m17%203l-2%205v-4c-1-3-2-4-4-4s-2%200-2%202l2%209c1%206%201%206%204%206%202%200%203-1%205-8s2-8%201-9c-2-2-3-1-4%203m12-3c-6%200-6%201-6%2011v6h6c6%200%206%200%206-2%200-3-1-3-4-3l-3-1h3c4-2%204-5%200-5s-3-1%201-2c3%200%204-1%204-2%200-3-1-3-7-2m11%200c-3%200-3%200-3%205-2%2010-1%2012%201%2012s3-1%203-3l1-2%201%202c1%203%204%204%205%202l-1-4c-1-1%200-2%201-3%203-6%200-10-8-9M134%209l-1%209c-1%207%200%207%202%207l2-2c0-2%201-3%202-3%205%200%208-7%205-11h-10m34%201c-3%202-2%206%201%208s3%205%200%203c-2-1-3-1-3%201-1%202%201%203%205%203%206%200%208-7%202-10-1-1-1-1%201-1s3-1%203-2c0-4-6-6-9-2m22%2034c-5%206-2%2019%205%2017%205-2%207-13%202-17-3-3-4-3-7%200m-60%201l-2%204-1%204c-4%202%201%209%206%207h3c2%201%205-2%203-3v-7c-1%200-2-1-1-2%201-4-5-7-8-3m20%201l-1%209c0%205%200%206%202%206l2-2c0-4%201-4%203-1%201%203%202%203%204%202v-8c2-1%202-7%200-8l-6-1c-3%200-4%200-4%203m13%205c-1%2010-1%2010%206%209%204%200%205-1%205-2%200-2-1-2-4-2l-3-1%203-1c4-1%204-5%200-5-3%200-2%200%202-1l3-3c0-2-1-2-6-2h-6v8m15-6c-3%204-2%206%201%208%204%203%204%204%200%203-3%200-3%200-3%202%201%203%205%204%208%202%204-3%204-6%200-9l-3-4%202%201c0%202%204%201%204-1%200-4-7-6-9-2m23%206c0%207%200%208%202%209%203%202%205%201%208-1%203-4%203-16%200-16-2%200-3%204-3%2010%200%202-1%203-2%203V43h-2c-3%200-3%200-3%208m14-6l-1%209c0%206%200%207%202%207l2-3c0-4%201-4%203%200%201%203%202%203%203%202%202-1%202-2%201-4v-4c2-3%201-8-1-8-4-2-9-1-9%201m16%200c-5%205-5%2012%200%2015%204%202%2011-3%207-6h-2c-1%203-3%202-3-1l2-6%201%202c0%201%200%202%202%202s2%200%202-3c0-5-6-7-9-3m11%202l-1%209v5h4l6-1c2%200%202%200%202-2s-1-2-4-2l-3-1%203-1c2%200%203-1%203-2%200-2-1-2-3-2-4%200-4-2%201-2%203-1%204-1%204-3s-1-2-6-2h-6v4m15-2c-3%202-2%205%201%208s3%204-1%204c-3-1-3%202%200%203%207%202%2011-3%206-8l-2-3h2c3%200%204-1%202-4-1-3-6-3-8%200M126%2067l-20%201-2%2061a248%20248%200%20001%2065c1%201%200%202-1%203-2%202-1%203%202%203l5%201c11%205%2011%205%2045%206l82-1h50v-3l2-4c2-2%202-2%203%202%203%206%201%209-5%209l-103%201H87l-1-3%203-5%209-8%206-5H68a5736%205736%200%2001-64-1H0v36h401v-19c0-10%200-18-1-17l-1%201v-2c2-2%201-3-1-2l-2%203c0%202-2%201-11-4-13-7-15-9-11-12l5-2c2%200%203%200%203-2l-1-3%201-1c2-1%202-1%200-1s-4-2-1-2v-1c-2%200-3-2-1-2v-1c-2%200-3-2-1-2v-3l-1-1v-4c-2-1-2-1-1-2v-1l-1-3%201-9%209-33c3-7%202-9%200-4l-3%201v1l-1%201c-1-1-4%205-4%207l-2%203c-2%203-2%203-2%201-1-2-1-2-4%202l-2%206c-1%204-9%208-9%205h-2v3c2%202%202%202-1%202h-7c-1%201-2-2-4-7-2-7-3-9-4-8h-2l-1%204v2h-5l2%205c3%208%200%204-6-7-6-12-7-13-11-10-2%201-2%201-1%202%201%202%201%204-1%204l-3-6v-2c-2-1-2%204-1%206v5l2%203h-4l-1-3h-2l1%202%201%202%202%206%201%204v1l-1%201-2-1h-1l-1-1c0-2%200-3-2-4h-4l1-2c3-4%203-6%200-7-2%200-3-2-3-3l-2-2-2%2010-1%201c-1%200-2-2-2-5l-1%2014c0%2017%200%2020%202%2020l1-1h2c0-1%201-2%203-1%203%200%205%203%202%203l-1%201-2%204-2%203-1%202-1-4c0-2-2-6-3-5a586%20586%200%2000-1%2041c-1-3-2-3-12-3-9%200-8-1%202-2h9v-61c0-56%200-61-2-62H126m-18%2010v106h178V77l-89-1-89%201m84%2052c0%2016%200%2017%202%2017s2-1%202-7c0-8%202-9%203-2s2%209%204%208l2-2c-2-6-3-13-2-14l1-10c0-3-3-6-8-6h-4v16m59-11l-1%203-1%202%201%202%201%208c0%209%201%2012%205%2013%203%200%203%200%203-2l-1-3c-2%200-2-2-2-8s0-8%202-8l1-2-1-2c-1%200-2-1-2-3%200-3%200-3-2-3-3%200-3%200-3%203m-42%205c-2%201-3%2013-2%2017%202%208%2012%207%2012%200%200-4-4-4-4-1-1%203-3%204-4%201-1-4%201-6%204-6%204%200%204%200%204-4%200-8-6-12-10-7m15%200l-2%203c0%202%204%203%204%201%201-3%203-2%203%200s-1%203-3%205c-4%202-6%208-4%2011s3%203%205%202h4l2%201v-11c0-9%200-11-2-12-2-3-5-2-7%200m14%200c-3%203-3%2018%200%2021%204%204%209%202%209-3%200-4%200-4-2-4-1%200-2%201-2%203l-1%202-1-8%201-9%201%202c0%203%200%203%202%203%203-1%203-5%201-8-2-2-6-1-8%201m83%2043l1%2023%201%202c0%203%203%204%2019%204h15l5%204%2010%2010%205%205%2012%201h11v5l1-14c0-10%200-18-1-16l-1%202v1c2%200%201%203%200%203l-2%204%202%203%201%204v4h-5c-6%200-9-1-15-6-17-13-17-13-14-17s4-10%204-26c0-18%200-18-11-19-6%200-6%200-6%202%201%203-28%203-30%200-2-2-2-1-2%2021M4%20148H0v13l3-1c2%200%202%200%201%201h4v-6c1-5%201-5-1-5s-2%200%200-1c3-1%201-2-3-1m-1%2017l2%201v1c-1%200-2%201-1%202H1v7l-1%205c1%205%203%205%204%200%200-3%201-4%207-4%206-1%206-8%200-8-2%200-3-1-3-3s-5-3-5-1'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/199346766c8ef8c87f3128a309168f2e/ee604/blog09.png","srcSet":"/static/199346766c8ef8c87f3128a309168f2e/69585/blog09.png 200w,\n/static/199346766c8ef8c87f3128a309168f2e/497c6/blog09.png 400w,\n/static/199346766c8ef8c87f3128a309168f2e/ee604/blog09.png 800w,\n/static/199346766c8ef8c87f3128a309168f2e/f3583/blog09.png 1200w,\n/static/199346766c8ef8c87f3128a309168f2e/e4d72/blog09.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnReactJS","thumbnail":"thumbnails/blog09.png"}},"staticQueryHashes":["2987289216","63159454"]}