{"id":901,"date":"2020-06-09T06:53:47","date_gmt":"2020-06-09T06:53:47","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?page_id=901"},"modified":"2026-01-29T04:06:40","modified_gmt":"2026-01-29T04:06:40","slug":"react-tutorial","status":"publish","type":"page","link":"https:\/\/codeinsightacademy.com\/blog\/javascript\/react-tutorial\/","title":{"rendered":"React"},"content":{"rendered":"<p>React Tutorial Content<\/p>\n<ol>\n<li>Prerequisites\n<ul>\n<li>var, let and const<\/li>\n<li>arrow function<\/li>\n<li>template literals<\/li>\n<li>array &#8211; map filter<\/li>\n<li>for of loop<\/li>\n<li>default parameters (optional)<\/li>\n<li>object literals (optional)<\/li>\n<li>rest spread operations (optional)<\/li>\n<li>destructuring assignment<\/li>\n<li>fetch api and axios<\/li>\n<\/ul>\n<\/li>\n<li>Installation and Hello World using vite<\/li>\n<li>Render Function and React Fragment\u00a0<\/li>\n<li>JSX (JavaScript XML)<\/li>\n<li>Components &#8211; Functional Component<\/li>\n<li>State and Props<\/li>\n<li>Events (onClick)<\/li>\n<li>Hooks &#8211; State and Effect<\/li>\n<li>Fetch data in useEffects and show in table using array map function<\/li>\n<li>Handling Forms using useState and event.target.value<\/li>\n<li>React router dom &#8211; &lt;Link to=&#8221;\/path&#8221; \/&gt;<\/li>\n<\/ol>\n\n\n<h2>Advanced (Optional for fasttrack\/online batch)<\/h2>\n\n\n\n<ol><li>Redux<\/li><li>Redux Saga<\/li><\/ol>\n\n\n\n<h2>Create React App using vite<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create vite@latest my-react-app<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/codeinsightacademy.com\/blog\/http:\/\/codeinsightacademy.com\/blog\/wp-content\/uploads\/2025\/03\/image.png\"><img loading=\"lazy\" width=\"990\" height=\"571\" src=\"https:\/\/codeinsightacademy.com\/blog\/http:\/\/codeinsightacademy.com\/blog\/wp-content\/uploads\/2025\/03\/image.png\" alt=\"\" class=\"wp-image-2802\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/codeinsightacademy.com\/blog\/http:\/\/codeinsightacademy.com\/blog\/wp-content\/uploads\/2025\/03\/image-1.png\"><img loading=\"lazy\" width=\"990\" height=\"571\" src=\"https:\/\/codeinsightacademy.com\/blog\/http:\/\/codeinsightacademy.com\/blog\/wp-content\/uploads\/2025\/03\/image-1.png\" alt=\"\" class=\"wp-image-2804\"\/><\/a><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>  cd my-react-app\n  npm install\n  npm run dev\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React Tutorial Content Prerequisites var, let and const arrow function template literals array &#8211; map filter for of loop default parameters (optional) object literals (optional) rest spread operations (optional) destructuring assignment fetch api and axios Installation and Hello World using vite Render Function and React Fragment\u00a0 JSX (JavaScript XML) Components &#8211; Functional Component State and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":842,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/901"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=901"}],"version-history":[{"count":11,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/901\/revisions"}],"predecessor-version":[{"id":2949,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/901\/revisions\/2949"}],"up":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/pages\/842"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}