{"id":8516,"date":"2021-08-07T06:55:03","date_gmt":"2021-08-07T06:55:03","guid":{"rendered":"https:\/\/exceptionly.com\/?p=8516"},"modified":"2022-06-29T16:42:26","modified_gmt":"2022-06-29T16:42:26","slug":"how-to-start-coding-react-in-60-minutes","status":"publish","type":"post","link":"https:\/\/exceptionly.com\/ar\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/","title":{"rendered":"How to start coding React in 60 minutes"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"8516\" class=\"elementor elementor-8516\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d34ddcc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d34ddcc\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-da551f2\" data-id=\"da551f2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5f3688a elementor-widget elementor-widget-text-editor\" data-id=\"5f3688a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Why is React so popular among developers these days? If you are familiar with front-end development, by any chance, you have probably heard about React and seen dozens of tutorials that explain why with justification. As this tutorial aims for hands-on practice, I will try to make this as simple as possible to encourage you to start coding right away in React by giving core reasons.<\/p><p>Before getting hands-on experience, let&#8217;s understand some facts about React.<\/p><ul><li>React is a free and open-source JavaScript library for building fast and interactive user interfaces which are designed &amp; maintained by Facebook and a community of developers.<\/li><li>React is one of the fastest JavaScript libraries &amp; frameworks out there. It has excellent performance at runtime and uses Virtual Dom to improve rendering performance. In addition, virtual DOM helps the library to detect the components that require re-rendering. You can find benchmark results for various libraries, frameworks <a href=\"https:\/\/stefankrause.net\/js-frameworks-benchmark8\/table.html\">\u0647\u0646\u0627<\/a>.<\/li><li>React has an optional feature, <a href=\"https:\/\/reactjs.org\/docs\/introducing-jsx.html\">JSX<\/a>, which lets you create JavaScript objects with HTML syntax. In addition, it simplifies the creation of React tree nodes with attributes.<\/li><li>Easy to learn and has an excellent documentation<\/li><li>One-way data binding<\/li><li>React is used for web applications development, and React Native framework is used for mobile applications.<\/li><\/ul><h2>How to start playing with React?<\/h2><h3><strong><span style=\"font-size: 13pt; font-family: Arial; color: #000000; background-color: transparent; vertical-align: baseline;\">Online playgrounds for React<\/span><\/strong><\/h3><p><span style=\"font-weight: 400;\">If you don\u2019t want to bother with installations but only challenge yourself, then you are at the right place! Online playgrounds such as <\/span><a href=\"https:\/\/reactjs.org\/redirect-to-codepen\/hello-world\"><span style=\"font-weight: 400;\">CodePen<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/codesandbox.io\/s\/new\"><span style=\"font-weight: 400;\">CodeSandbox<\/span><\/a><span style=\"font-weight: 400;\">, or <\/span><a href=\"https:\/\/stackblitz.com\/fork\/react\"><span style=\"font-weight: 400;\">Stackblitz<\/span><\/a><span style=\"font-weight: 400;\"> are great choices for you. They provide a simple Hello World template. Then, you can hack it as you wish.<\/span><\/p><h3><span style=\"color: #000000;\"><strong><span style=\"font-size: 13pt; font-family: Arial; background-color: transparent; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;\">Coding in your text editor<\/span><\/strong><\/span><\/h3><p><span style=\"font-weight: 400;\">If you prefer to use your own text editor, you can also <\/span><a href=\"https:\/\/raw.githubusercontent.com\/reactjs\/reactjs.org\/main\/static\/html\/single-file-example.html\"><span style=\"font-weight: 400;\">download this HTML file<\/span><\/a><span style=\"font-weight: 400;\">, edit it, and open it from the local filesystem in your browser.<\/span><\/p><h3><b>Create your first React application<\/b><\/h3><p><span style=\"font-weight: 400;\">Make sure you have a recent version of <\/span><a href=\"https:\/\/nodejs.org\/en\/\"><span style=\"font-weight: 400;\">node.js<\/span><\/a> installed. <span style=\"font-weight: 400;\">Once installation is done, <\/span><span style=\"font-weight: 400;\">create a react app;<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f00fa9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0f00fa9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3f786a6\" data-id=\"3f786a6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c15793e elementor-widget elementor-widget-code-highlight\" data-id=\"c15793e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>$ npx create-react-app my-first-react-app\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ab51c2f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ab51c2f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae78e88\" data-id=\"ae78e88\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c9d513 elementor-widget elementor-widget-text-editor\" data-id=\"9c9d513\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>#tip: Using npx instead of npm not to install packages globally!<\/p><p>Run <span style=\"color: #3366ff;\">&#8220;npm start&#8221;<\/span> in the project folder to start the application;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ad561d3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ad561d3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ca3423f\" data-id=\"ca3423f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e84f911 elementor-widget elementor-widget-code-highlight\" data-id=\"e84f911\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-jsx\">\n\t\t\t\t<code readonly=\"true\" class=\"language-jsx\">\n\t\t\t\t\t<xmp>$ cd my-first-react-app\n$ npm start\n\nCompiled successfully!\nYou can now view my-first-react-app in the browser.\n\n  Local: http:\/\/localhost:3000\n  \nNote that the development build is not optimized.\nTo create a production build, use npm run build.\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-160d4a2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"160d4a2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5dd48ad\" data-id=\"5dd48ad\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c73c531 elementor-widget elementor-widget-text-editor\" data-id=\"c73c531\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Congratulations! You can enjoy your first user interface from <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a> in the browser. Feel free to add some interactivity or start a more complex application. Reactjs.org has an excellent <a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\">practical tutorial<\/a> that builds a small game for beginners who does not have any previous knowledge. If you are interested in concepts, then I will take you to <a href=\"https:\/\/reactjs.org\/docs\/hello-world.html\">the details page<\/a>.\u00a0<\/p><p>As <a href=\"https:\/\/exceptionly.com\/ar\/\">Exceptionly<\/a>, we have a series of \u201chow to start coding \u2026 in 60 minutes\u201d for various languages and frameworks. Find out how you can start <a href=\"https:\/\/exceptionly.com\/ar\/2021\/07\/07\/how-to-start-coding-java-in-60-minutes\/\">Java<\/a> or <a href=\"https:\/\/exceptionly.com\/ar\/2021\/07\/21\/how-to-start-coding-python-in-60-minutes\/\">Python<\/a> in 60 minutes!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Why is React so popular among developers these days? If you are familiar with front-end development, by any chance, you have probably heard about React and seen dozens of tutorials that explain why with justification. As this tutorial aims for hands-on practice, I will try to make this as simple as possible to encourage you [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":8582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[105,213,220,103,113,107,106,101,102,104],"class_list":["post-8516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-front-end-development","tag-frontend","tag-fullstack","tag-interactive-user-interface","tag-javascript","tag-modern-js-frameworks","tag-react","tag-reactjs","tag-virtual-dom","tag-vuejs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.5 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to start coding React in 60 minutes - Exceptionly<\/title>\n<meta name=\"description\" content=\"How to start coding ReactJS in 60 minutes - Exceptionly is creating content for enabling beginner front end developers to start painlessly\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/exceptionly.com\/ar\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to start coding React in 60 minutes\" \/>\n<meta property=\"og:description\" content=\"Why is React so popular among developers these days? If you are familiar with front-end development, by any chance, you have probably heard about React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/exceptionly.com\/ar\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/\" \/>\n<meta property=\"og:site_name\" content=\"Exceptionly\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/exceptionly\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-07T06:55:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-29T16:42:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/08\/how-to-start-coding-react-in-60-minutes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1930\" \/>\n\t<meta property=\"og:image:height\" content=\"766\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fatma Elverir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@exceptionly\" \/>\n<meta name=\"twitter:site\" content=\"@exceptionly\" \/>\n<meta name=\"twitter:label1\" content=\"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatma Elverir\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u062f\u0642\u0627\u0626\u0642\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/\"},\"author\":{\"name\":\"Fatma Elverir\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/person\\\/a2600170dfb4513350affede916c0ccf\"},\"headline\":\"How to start coding React in 60 minutes\",\"datePublished\":\"2021-08-07T06:55:03+00:00\",\"dateModified\":\"2022-06-29T16:42:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/\"},\"wordCount\":443,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/how-to-start-coding-react-in-60-minutes.jpg\",\"keywords\":[\"front-end development\",\"Frontend\",\"Fullstack\",\"interactive user interface\",\"JavaScript\",\"Modern JS Frameworks\",\"React\",\"ReactJS\",\"Virtual DOM\",\"VueJS\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/\",\"name\":\"How to start coding React in 60 minutes - Exceptionly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/how-to-start-coding-react-in-60-minutes.jpg\",\"datePublished\":\"2021-08-07T06:55:03+00:00\",\"dateModified\":\"2022-06-29T16:42:26+00:00\",\"description\":\"How to start coding ReactJS in 60 minutes - Exceptionly is creating content for enabling beginner front end developers to start painlessly\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/how-to-start-coding-react-in-60-minutes.jpg\",\"contentUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/how-to-start-coding-react-in-60-minutes.jpg\",\"width\":1930,\"height\":766,\"caption\":\"How to start coding React in 60 minutes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/2021\\\/08\\\/07\\\/how-to-start-coding-react-in-60-minutes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/exceptionly.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to start coding React in 60 minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#website\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/\",\"name\":\"Exceptionly\",\"description\":\"Remote software talent acquisition at scale\",\"publisher\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/exceptionly.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#organization\",\"name\":\"Exceptionly\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/exceptionly-search-logo.png\",\"contentUrl\":\"https:\\\/\\\/exceptionly.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/exceptionly-search-logo.png\",\"width\":400,\"height\":400,\"caption\":\"Exceptionly\"},\"image\":{\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/exceptionly\\\/\",\"https:\\\/\\\/x.com\\\/exceptionly\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/exceptionly\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCet5wATTyif6knI0h4vUkNA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/exceptionly.com\\\/#\\\/schema\\\/person\\\/a2600170dfb4513350affede916c0ccf\",\"name\":\"Fatma Elverir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g\",\"caption\":\"Fatma Elverir\"},\"sameAs\":[\"https:\\\/\\\/exceptionly.com\"],\"url\":\"https:\\\/\\\/exceptionly.com\\\/ar\\\/author\\\/fatmaelverir\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to start coding React in 60 minutes - Exceptionly","description":"How to start coding ReactJS in 60 minutes - Exceptionly is creating content for enabling beginner front end developers to start painlessly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/exceptionly.com\/ar\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/","og_locale":"ar_AR","og_type":"article","og_title":"How to start coding React in 60 minutes","og_description":"Why is React so popular among developers these days? If you are familiar with front-end development, by any chance, you have probably heard about React","og_url":"https:\/\/exceptionly.com\/ar\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/","og_site_name":"Exceptionly","article_publisher":"https:\/\/www.facebook.com\/exceptionly\/","article_published_time":"2021-08-07T06:55:03+00:00","article_modified_time":"2022-06-29T16:42:26+00:00","og_image":[{"width":1930,"height":766,"url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/08\/how-to-start-coding-react-in-60-minutes.jpg","type":"image\/jpeg"}],"author":"Fatma Elverir","twitter_card":"summary_large_image","twitter_creator":"@exceptionly","twitter_site":"@exceptionly","twitter_misc":{"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629":"Fatma Elverir","\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"3 \u062f\u0642\u0627\u0626\u0642"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#article","isPartOf":{"@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/"},"author":{"name":"Fatma Elverir","@id":"https:\/\/exceptionly.com\/#\/schema\/person\/a2600170dfb4513350affede916c0ccf"},"headline":"How to start coding React in 60 minutes","datePublished":"2021-08-07T06:55:03+00:00","dateModified":"2022-06-29T16:42:26+00:00","mainEntityOfPage":{"@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/"},"wordCount":443,"commentCount":5,"publisher":{"@id":"https:\/\/exceptionly.com\/#organization"},"image":{"@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/08\/how-to-start-coding-react-in-60-minutes.jpg","keywords":["front-end development","Frontend","Fullstack","interactive user interface","JavaScript","Modern JS Frameworks","React","ReactJS","Virtual DOM","VueJS"],"articleSection":["Tutorials"],"inLanguage":"ar","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/","url":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/","name":"How to start coding React in 60 minutes - Exceptionly","isPartOf":{"@id":"https:\/\/exceptionly.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#primaryimage"},"image":{"@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/08\/how-to-start-coding-react-in-60-minutes.jpg","datePublished":"2021-08-07T06:55:03+00:00","dateModified":"2022-06-29T16:42:26+00:00","description":"How to start coding ReactJS in 60 minutes - Exceptionly is creating content for enabling beginner front end developers to start painlessly","breadcrumb":{"@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#primaryimage","url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/08\/how-to-start-coding-react-in-60-minutes.jpg","contentUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/08\/how-to-start-coding-react-in-60-minutes.jpg","width":1930,"height":766,"caption":"How to start coding React in 60 minutes"},{"@type":"BreadcrumbList","@id":"https:\/\/exceptionly.com\/2021\/08\/07\/how-to-start-coding-react-in-60-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/exceptionly.com\/"},{"@type":"ListItem","position":2,"name":"How to start coding React in 60 minutes"}]},{"@type":"WebSite","@id":"https:\/\/exceptionly.com\/#website","url":"https:\/\/exceptionly.com\/","name":"Exceptionly","description":"Remote software talent acquisition at scale","publisher":{"@id":"https:\/\/exceptionly.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/exceptionly.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/exceptionly.com\/#organization","name":"Exceptionly","url":"https:\/\/exceptionly.com\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/exceptionly.com\/#\/schema\/logo\/image\/","url":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/05\/exceptionly-search-logo.png","contentUrl":"https:\/\/exceptionly.com\/wp-content\/uploads\/2021\/05\/exceptionly-search-logo.png","width":400,"height":400,"caption":"Exceptionly"},"image":{"@id":"https:\/\/exceptionly.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/exceptionly\/","https:\/\/x.com\/exceptionly","https:\/\/www.linkedin.com\/company\/exceptionly\/","https:\/\/www.youtube.com\/channel\/UCet5wATTyif6knI0h4vUkNA"]},{"@type":"Person","@id":"https:\/\/exceptionly.com\/#\/schema\/person\/a2600170dfb4513350affede916c0ccf","name":"Fatma Elverir","image":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93179e5b3e943c5bcda6ea20d6b37723c01dedb150ab7724bb4fb9af22eb3de6?s=96&d=mm&r=g","caption":"Fatma Elverir"},"sameAs":["https:\/\/exceptionly.com"],"url":"https:\/\/exceptionly.com\/ar\/author\/fatmaelverir\/"}]}},"_links":{"self":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts\/8516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/comments?post=8516"}],"version-history":[{"count":0,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/posts\/8516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/media\/8582"}],"wp:attachment":[{"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/media?parent=8516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/categories?post=8516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/exceptionly.com\/ar\/wp-json\/wp\/v2\/tags?post=8516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}