{"id":38,"date":"2021-09-28T08:03:19","date_gmt":"2021-09-28T08:03:19","guid":{"rendered":"https:\/\/www.gadgetappdevelopment.com\/blog\/?page_id=38"},"modified":"2021-10-04T14:56:56","modified_gmt":"2021-10-04T14:56:56","slug":"react-js","status":"publish","type":"page","link":"https:\/\/www.gadgetappdevelopment.com\/blog\/react-js\/","title":{"rendered":"React JS"},"content":{"rendered":"\n<p><strong>React<\/strong>&nbsp;is a JavaScript library for building user interfaces. Learn what React is all about on&nbsp;<a href=\"https:\/\/reactjs.org\/\">our homepage<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\">in the tutorial<\/a>.<\/p>\n\n\n\n<h5 id=\"try-react\">Try React<\/h5>\n\n\n\n<p>React has been designed from the start for gradual adoption, and&nbsp;<strong>you can use as little or as much React as you need.<\/strong>&nbsp;Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.<\/p>\n\n\n\n<h3 id=\"online-playgrounds\"><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html#online-playgrounds\"><\/a><\/h3>\n\n\n\n<h5 id=\"online-playgrounds\">Online Playgrounds<\/h5>\n\n\n\n<p>If you\u2019re interested in playing around with React, you can use an online code playground. Try a Hello World template on&nbsp;<a href=\"https:\/\/reactjs.org\/redirect-to-codepen\/hello-world\" target=\"_blank\" rel=\"noreferrer noopener\">CodePen<\/a>,&nbsp;<a href=\"https:\/\/codesandbox.io\/s\/new\" target=\"_blank\" rel=\"noreferrer noopener\">CodeSandbox<\/a>, or&nbsp;<a href=\"https:\/\/stackblitz.com\/fork\/react\" target=\"_blank\" rel=\"noreferrer noopener\">Stackblitz<\/a>.<\/p>\n\n\n\n<p>If you prefer to use your own text editor, you can also&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/raw.githubusercontent.com\/reactjs\/reactjs.org\/main\/static\/html\/single-file-example.html\" target=\"_blank\">download this HTML file<\/a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we\u2019d only recommend using this for simple demos<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5 id=\"add-react-to-a-website\">Add React to a Website<\/h5>\n\n\n\n<p>You can&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/add-react-to-a-website.html\">add React to an HTML page in one minute<\/a>. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.<\/p>\n\n\n\n<h3 id=\"create-a-new-react-app\"><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html#create-a-new-react-app\"><\/a><\/h3>\n\n\n\n<h5 id=\"create-a-new-react-app\">Create a New React App<\/h5>\n\n\n\n<p>When starting a React project, a&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/add-react-to-a-website.html\">simple HTML page with script tags<\/a>&nbsp;might still be the best option. It only takes a minute to set up!<\/p>\n\n\n\n<p>As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5 id=\"learn-react\">Learn React<\/h5>\n\n\n\n<p>People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you\u2019ll find this section helpful.<\/p>\n\n\n\n<ul><li>If you prefer to&nbsp;<strong>learn by doing<\/strong>, start with our&nbsp;<a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\">practical tutorial<\/a>.<\/li><li>If you prefer to&nbsp;<strong>learn concepts step by step<\/strong>, start with our&nbsp;<a href=\"https:\/\/reactjs.org\/docs\/hello-world.html\">guide to main concepts<\/a>.<\/li><\/ul>\n\n\n\n<p>Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you&nbsp;<em>will<\/em>&nbsp;get the hang of it.<\/p>\n\n\n\n<h3 id=\"first-examples\"><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html#first-examples\"><\/a><\/h3>\n\n\n\n<h5 id=\"first-examples\">First Examples<\/h5>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/reactjs.org\/\">React homepage<\/a>&nbsp;contains a few small React examples with a live editor. Even if you don\u2019t know anything about React yet, try changing their code and see how it affects the result.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.gadgetappdevelopment.com\/blog\/react-js-beginners\/\" data-type=\"URL\" data-id=\"https:\/\/www.gadgetappdevelopment.com\/blog\/react-js-beginners\/\">Beginners Tutorial<\/a><\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5 id=\"react-for-designers\">React for Designers<\/h5>\n\n\n\n<p>If you\u2019re coming from a design background,\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/reactfordesigners.com\/\" target=\"_blank\">these resources<\/a>\u00a0are a great place to get started.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 id=\"javascript-resources\">JavaScript Resources<\/h3>\n\n\n\n<p>The React documentation assumes some familiarity with programming in the JavaScript language. You don\u2019t have to be an expert, but it\u2019s harder to learn both React and JavaScript at the same time.<\/p>\n\n\n\n<p>We recommend going through&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/A_re-introduction_to_JavaScript\" target=\"_blank\" rel=\"noreferrer noopener\">this JavaScript overview<\/a>&nbsp;to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.<\/p>\n\n\n\n<h3 id=\"practical-tutorial\"><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html#practical-tutorial\"><\/a><\/h3>\n\n\n\n<h3 id=\"javascript-resources\"><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html#javascript-resources\"><\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>React&nbsp;is a JavaScript library for building user interfaces. Learn what React is all about on&nbsp;our homepage&nbsp;or&nbsp;in the tutorial. Try React React has been designed from the start for gradual adoption, and&nbsp;you can use as little or as much React as you need.&nbsp;Whether you want to get a taste of React, add some interactivity to a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":""},"_links":{"self":[{"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/pages\/38"}],"collection":[{"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":5,"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/pages\/38\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/www.gadgetappdevelopment.com\/blog\/wp-json\/wp\/v2\/media?parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}