{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnReactNative-Part1","result":{"data":{"blog":{"frontmatter":{"title":"LEARN REACT NATIVE - PART 1","thumbnail":"blog60","date":"April 29, 2021","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                  for creating UIs & React-DOM is used to render these UI\n                  components in the browser.\n                  <strong>React Native</strong> is a library that can compile\n                  react components into native components/widgets. It allows us\n                  to use React to create both Android & iOS applications.\n                </p>\n                <p>\n                  Usually, an iOS app and Android App are completely seperate\n                  apps built using Swift/Objective-C and Java/Kotlin languages\n                  respectively. But using React Native, we can build\n                  applications for both iOS and Android platforms using single\n                  codebase. This saves alot of time and money.\n                </p>\n                <p>\n                  Knowing the basics of\n                  <a href=\"/blogs/learnJavascript\">JavaScript</a> and\n                  <a href=\"/blogs/learnReactJS\">ReactJS</a> is must for getting\n                  into React Native.\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 <strong>basics</strong> in React\n                  Native.\n                </p>\n              </div>\n              <div class=\"col-md-7 my-1\">\n                <h5>Topics to cover:</h5>\n                <ul class=\"pl-4\">\n                  <li>Expo CLI vs React Native CLI</li>\n                  <li>View</li>\n                  <li>Text</li>\n                  <li>Stylesheet</li>\n                  <li>Button</li>\n                  <li>TouchableOpacity</li>\n                  <li>TextInput</li>\n                  <li>FlatList</li>\n                  <li>Alerts & Toast Messages</li>\n                  <li>ScrollView</li>\n                  <li>TouchableWithoutFeedback</li>\n                  <li>KeyboardAvoidingView</li>\n                </ul>\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/0-S5a0eXPoc\"\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/qSRrxpdMpVc\"\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/4Cc75EC1IlE\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n                <strong>Similar posts:</strong>\n                <a href=\"/blogs/learnReactNative-Part2\"\n                >Intermediate Topics - Part 2</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part1\"\n                >Projects - Part 1</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part2\"\n                >Projects - Part 2</a\n                > \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                  for creating UIs & React-DOM is used to render these UI\n                  components in the browser.\n                  <strong>React Native</strong> is a library that can compile\n                  react components into native components/widgets. It allows us\n                  to use React to create both Android & iOS applications.\n                </p>\n                <p>\n                  Usually, an iOS app and Android App are completely seperate\n                  apps built using Swift/Objective-C and Java/Kotlin languages\n                  respectively. But using React Native, we can build\n                  applications for both iOS and Android platforms using single\n                  codebase. This saves alot of time and money.\n                </p>\n                <p>\n                  Knowing the basics of\n                  <a href=\"/blogs/learnJavascript\">JavaScript</a> and\n                  <a href=\"/blogs/learnReactJS\">ReactJS</a> is must for getting\n                  into React Native.\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 <strong>basics</strong> in React\n                  Native.\n                </p>\n              </div>\n              <div class=\"col-md-7 my-1\">\n                <h5>Topics to cover:</h5>\n                <ul class=\"pl-4\">\n                  <li>Expo CLI vs React Native CLI</li>\n                  <li>View</li>\n                  <li>Text</li>\n                  <li>Stylesheet</li>\n                  <li>Button</li>\n                  <li>TouchableOpacity</li>\n                  <li>TextInput</li>\n                  <li>FlatList</li>\n                  <li>Alerts & Toast Messages</li>\n                  <li>ScrollView</li>\n                  <li>TouchableWithoutFeedback</li>\n                  <li>KeyboardAvoidingView</li>\n                </ul>\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/0-S5a0eXPoc\"\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/qSRrxpdMpVc\"\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/4Cc75EC1IlE\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n                <strong>Similar posts:</strong>\n                <a href=\"/blogs/learnReactNative-Part2\"\n                >Intermediate Topics - Part 2</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part1\"\n                >Projects - Part 1</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part2\"\n                >Projects - Part 2</a\n                > \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='M40%202l-7%206c-6%204-7%205-7%2014-2%2013-9%2024-20%2028l-5%202-1%2086v87h42l3-4%204-4v-1c-1-1-1-1%202-1l12%207%202%203h318l-7-14-7-17%201-1c-1-1%205-7%2010-8h20v20l1-65c0-90%200-100-3-98l-9%201c-10%200-16-2-23-9-9-8-11-8-19-5-10%205-22%201-28-8-2-4-2-5-2-13V0H42l-2%202m12%2032c-3%202-6%207-6%2012%200%204%203%204%203%200l3-6c4-6%205-6%2038-6%2020%200%2030%200%2029-1l-32-1c-30%200-32%200-35%202m9%202c-6%202-10%207-10%2011v3l38-1h37v-5c-1-8-1-8-34-9l-31%201m-15%2076c0%2052%200%2059%202%2059l1-59-1-59c-2%200-2%207-2%2059m5-57v116h75V53H51v2m117%2041l-1%209v5l8-1c15%200%2014%200%2014-2s-1-2-4-2c-2%200-3%200-2-1l3-1%202-2-2-2c-4%200-4-2%200-2%203%200%204-1%204-2%200-2-1-2-5-2-7%200-6%200-7%206%200%205%200%206-3%206-2%200-3-1-3-6-1-8-3-10-4-3m90-3h-5v8c-1%209-1%209%206%208%204%200%205-1%205-2%200-2-1-2-3-2-5%200-5-2-1-2%204-1%204-4%200-4l-3-1%203-1c3%200%204%200%204-2%201-2%201-3-6-2m25%202c-6%206-3%2017%204%2014%203-1%205-5%204-6l-3%201-2%202v-8c0-3%202-2%202%200-1%202-1%202%201%202s3%200%203-2c0-6-5-7-9-3m72%200c-2%207-1%2015%201%2015s2-1%203-8v-7l2%207c1%206%202%208%204%208s2-1%204-7l3-8-2-2c-2-1-2-1-3%203s-3%205-3%201c0-3-1-4-5-4-4-1-4-1-4%202m23-2h-5v17l6-1c4%200%205-1%205-2%200-2-1-2-3-2-5%200-5-2-1-2%204-1%204-4%200-4l-3-1%204-1%204-2c1-2-1-3-7-2m-184%205c-3%208-4%2012-1%2012l3-2%202-2%201%202c2%203%205%203%205-1%200-8-2-13-5-14-2%200-3%201-5%205m12%200a964%20964%200%20001%2012c2%200%202-1%202-2%200-4%201-4%203-1%201%202%203%203%204%201v-6l1-5c0-3-1-4-6-4h-5v5m14-4l-1%208c0%207%200%208%202%208s2%200%202-4v-4l2%204c3%207%205%205%206-5%200-7%200-8-2-8s-2%201-2%203v3l-2-3c-1-3-4-4-5-2m20%207v8c1%202%203%201%203-1%200-4%201-4%203-1%201%202%203%203%204%201v-6l1-5c0-3-1-4-6-4h-5v8m28%200l-2%208h4c1-3%204-3%204-1%200%201%201%202%203%202s2%200%201-9c-2-7-3-8-5-8s-3%201-5%208m25-5c0%202%200%202%202%201%202%200%202%200%202%206s0%207%202%207c1%200%202-1%202-7%200-5%200-6%202-6l2-2c0-2-1-2-6-2-6%200-6%200-6%203m21%202c-2%209-1%2012%201%2012s3-1%203-4l1-3v3c1%203%203%205%205%203l1-8c1-8%200-8-2-8s-2%201-2%203v3l-1-3c-2-5-6-4-6%202m16-1l-3%2012c1%202%204%201%204%200%200-3%204-3%204-1l3%202c2%200%202-4%200-13-2-6-5-6-8%200m11-1c0%202%200%202%202%202%202-1%202-1%202%205s0%207%202%207%202-1%202-6c0-6%200-7%202-7l2-2c0-2-1-2-6-2-6%200-6%200-6%203M51%20180c0%206%202%2010%207%2012%204%202%207%202%2032%202l29-1c4-1%206-5%206-12l1-5-38-1H51v5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/2eb02f23b0c32a6c9e223dbe74b1319f/ee604/blog60.png","srcSet":"/static/2eb02f23b0c32a6c9e223dbe74b1319f/69585/blog60.png 200w,\n/static/2eb02f23b0c32a6c9e223dbe74b1319f/497c6/blog60.png 400w,\n/static/2eb02f23b0c32a6c9e223dbe74b1319f/ee604/blog60.png 800w,\n/static/2eb02f23b0c32a6c9e223dbe74b1319f/f3583/blog60.png 1200w,\n/static/2eb02f23b0c32a6c9e223dbe74b1319f/e4d72/blog60.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnReactNative-Part1","thumbnail":"thumbnails/blog60.png"}},"staticQueryHashes":["2987289216","63159454"]}