{"id":15,"date":"2026-07-03T22:56:26","date_gmt":"2026-07-03T22:56:26","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/react\/2026\/07\/03\/02-react-setup\/"},"modified":"2026-07-04T10:14:08","modified_gmt":"2026-07-04T10:14:08","slug":"02-react-setup","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/react\/02-react-setup\/","title":{"rendered":"React Setup \u2014 Create Your First App with Vite"},"content":{"rendered":"<p><!-- ktg-updated-banner --><\/p>\n<div class=\"ktg-updated-banner\" style=\"margin:0 0 1.25em;padding:0.75em 1em;background:#fefce8;border-left:4px solid #ca8a04;border-radius:4px;\">\n<p><strong>Updated July 4, 2026.<\/strong> Refreshed for React 19 and current SEO best practices.<\/p>\n<\/div>\n<p><!-- ktg-series-toc --><\/p>\n<nav class=\"ktg-series-toc\" aria-label=\"React tutorial table of contents\" style=\"margin:1.5em 0;padding:1em 1.25em;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;\">\n<h2>Table of Contents<\/h2>\n<p>Follow the React tutorial series in order:<\/p>\n<ol>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">Lesson 1: React Tutorial \u2014 Introduction (2026)<\/a><\/li>\n<li><strong aria-current=\"page\">Lesson 2: React Setup \u2014 Create Your First App with Vite<\/strong><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/03-react-jsx-and-components\/\">Lesson 3: React JSX and Components \u2014 Build Your First UI<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/04-react-state-usestate\/\">Lesson 4: React State and useState \u2014 Interactive UI (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/05-react-useeffect\/\">Lesson 5: React useEffect \u2014 Side Effects and Data Fetching (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/06-react-forms\/\">Lesson 6: React Forms \u2014 Controlled Inputs and Validation (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/07-react-router\/\">Lesson 7: React Router \u2014 Multi-Page Navigation (React 19+)<\/a><\/li>\n<li><a href=\"https:\/\/www.kindsonthegenius.com\/react\/\">\u2190 Back to React Tutorial hub<\/a><\/li>\n<\/ol>\n<\/nav>\n<p><!-- ktg-react-modern --><\/p>\n<div class=\"ktg-react-modern\" style=\"margin:1.5em 0;padding:1em;background:#eff6ff;border-left:4px solid #2563eb;border-radius:4px;\">\n<h4>React 19 Notes<\/h4>\n<p>Use <strong>Node.js 20 LTS<\/strong> or newer. Scaffold projects with <code>npm create vite@latest<\/code> and choose the React template. Install the <strong>ES7+ React\/Redux\/React-Native snippets<\/strong> extension in VS Code for faster component authoring.<\/p>\n<\/div>\n<p>In this lesson you will complete your <strong>React setup<\/strong> using <strong>Vite<\/strong> \u2014 the fast, modern build tool recommended for new React projects in 2026. By the end you will have a running dev server and a hello-world component you can edit live in the browser.<\/p>\n<p><strong>Prerequisites:<\/strong> Lesson 1 (<a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">React Introduction<\/a>). <strong>Estimated time:<\/strong> 40\u201350 minutes.<\/p>\n<h4 id=\"install-node\">1. Install Node.js 20+<\/h4>\n<p>React development requires <strong>Node.js<\/strong> (which includes <strong>npm<\/strong>, the package manager). Download the <strong>LTS<\/strong> version from <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">nodejs.org<\/a>.<\/p>\n<p>Verify the installation in your terminal (Terminal on Mac, PowerShell or Windows Terminal on Windows):<\/p>\n<pre><code class=\"language-bash\">node --version\nnpm --version\n<\/code><\/pre>\n<p>You should see Node <code>v20.x<\/code> or newer and npm <code>10.x<\/code> or newer. If either command fails, restart the terminal after installing Node.<\/p>\n<figure style=\"margin:1.5em 0;text-align:center;\"><img decoding=\"async\" src=\"https:\/\/www.kindsonthegenius.com\/react\/wp-content\/uploads\/2026\/07\/02-react-setup-section-1.jpg\" alt=\"VS Code editor for React development\" width=\"1200\" height=\"675\" loading=\"lazy\" style=\"max-width:100%;height:auto;border-radius:8px;border:1px solid #dee2e6;\" \/><figcaption style=\"font-size:0.85em;color:#666;margin-top:0.5em;\">Photo by <a href=\"https:\/\/unsplash.com\/@cdr6934?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Chris Ried<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Unsplash<\/a><\/figcaption><\/figure>\n<h4 id=\"create-vite\">2. Create a React Project with Vite<\/h4>\n<p>Open a folder where you keep projects (for example <code>~\/projects<\/code>) and run:<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest my-react-app -- --template react\ncd my-react-app\nnpm install\n<\/code><\/pre>\n<p>When prompted, Vite may ask for confirmation \u2014 accept the defaults. The <code>react<\/code> template gives you a minimal React 19 app with JSX and hot module replacement (HMR).<\/p>\n<p>Alternative templates:<\/p>\n<ul>\n<li><code>react-ts<\/code> \u2014 React + TypeScript (use when you are ready for types)<\/li>\n<li><code>react-swc<\/code> \u2014 same as react but uses SWC for faster compiles<\/li>\n<\/ul>\n<figure style=\"margin:1.5em 0;text-align:center;\"><img decoding=\"async\" src=\"https:\/\/www.kindsonthegenius.com\/react\/wp-content\/uploads\/2026\/07\/02-react-setup-section-2.jpg\" alt=\"Terminal running npm commands for a React project\" width=\"1200\" height=\"675\" loading=\"lazy\" style=\"max-width:100%;height:auto;border-radius:8px;border:1px solid #dee2e6;\" \/><figcaption style=\"font-size:0.85em;color:#666;margin-top:0.5em;\">Photo by <a href=\"https:\/\/unsplash.com\/@fl__q?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Taiki Ishikawa<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=kindsonthegenius&#038;utm_medium=referral\" rel=\"noopener noreferrer\" target=\"_blank\">Unsplash<\/a><\/figcaption><\/figure>\n<h4 id=\"project-structure\">3. Understand the Project Structure<\/h4>\n<p>After scaffolding, your folder looks like this:<\/p>\n<pre><code>my-react-app\/\n\u251c\u2500\u2500 public\/           # Static assets (favicon, etc.)\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 App.jsx       # Root component\n\u2502   \u251c\u2500\u2500 App.css       # Styles for App\n\u2502   \u251c\u2500\u2500 main.jsx      # Entry point \u2014 mounts React to #root\n\u2502   \u2514\u2500\u2500 index.css     # Global styles\n\u251c\u2500\u2500 index.html        # Single HTML shell\n\u251c\u2500\u2500 package.json      # Dependencies and scripts\n\u2514\u2500\u2500 vite.config.js    # Vite configuration\n<\/code><\/pre>\n<p>Key files:<\/p>\n<ul>\n<li><code>index.html<\/code> \u2014 contains <code>&lt;div id=\"root\"&gt;&lt;\/div&gt;<\/code> where React attaches<\/li>\n<li><code>src\/main.jsx<\/code> \u2014 calls <code>createRoot(document.getElementById('root')).render(&lt;App \/&gt;)<\/code><\/li>\n<li><code>src\/App.jsx<\/code> \u2014 your main UI component (edit this often while learning)<\/li>\n<\/ul>\n<h4 id=\"dev-server\">4. Run the Development Server<\/h4>\n<p>Start the local dev server:<\/p>\n<pre><code class=\"language-bash\">npm run dev\n<\/code><\/pre>\n<p>Vite prints a local URL, typically <code>http:\/\/localhost:5173<\/code>. Open it in your browser. You should see the default Vite + React welcome page with a counter button.<\/p>\n<p>While the server runs, edit <code>src\/App.jsx<\/code> \u2014 save the file and the browser updates instantly without a full reload. This <strong>HMR<\/strong> workflow is why Vite is preferred over older Create React App tooling.<\/p>\n<h4 id=\"hello-world\">5. Your First Custom Component<\/h4>\n<p>Replace the contents of <code>src\/App.jsx<\/code> with a simple hello-world:<\/p>\n<pre><code class=\"language-jsx\">function App() {\n  return (\n    &lt;main style={{ fontFamily: 'system-ui', padding: '2rem' }}&gt;\n      &lt;h1&gt;Hello, React!&lt;\/h1&gt;\n      &lt;p&gt;My first React app on Kindson The Genius.&lt;\/p&gt;\n    &lt;\/main&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<p>Save and confirm the page shows your heading. Congratulations \u2014 you have a working <strong>react setup vite<\/strong> project.<\/p>\n<h4 id=\"vscode\">6. VS Code Setup (Recommended)<\/h4>\n<p><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> is a free editor well suited for React. Install these extensions:<\/p>\n<ul>\n<li><strong>ES7+ React\/Redux\/React-Native snippets<\/strong> \u2014 shortcuts for components<\/li>\n<li><strong>ESLint<\/strong> \u2014 catch common JavaScript mistakes<\/li>\n<li><strong>Prettier<\/strong> \u2014 consistent formatting (optional but helpful)<\/li>\n<\/ul>\n<p>Open your project folder with <code>code .<\/code> from the project directory. Use the integrated terminal (<code>Ctrl+`<\/code> or <code>View \u2192 Terminal<\/code>) to run <code>npm run dev<\/code> without leaving the editor.<\/p>\n<h4 id=\"build-preview\">7. Build for Production<\/h4>\n<p>When you are ready to deploy, create an optimized production build:<\/p>\n<pre><code class=\"language-bash\">npm run build\nnpm run preview\n<\/code><\/pre>\n<p><code>npm run build<\/code> outputs static files to <code>dist\/<\/code>. Host them on Netlify, Vercel, GitHub Pages, or any static file server. <code>npm run preview<\/code> serves the production build locally for testing.<\/p>\n<h4 id=\"troubleshooting\">8. Common Setup Issues<\/h4>\n<ul>\n<li><strong>Port 5173 in use<\/strong> \u2014 Vite picks the next free port; read the terminal output for the correct URL<\/li>\n<li><strong>Permission errors on npm<\/strong> \u2014 avoid <code>sudo npm install<\/code>; fix npm permissions or use nvm<\/li>\n<li><strong>Old Node version<\/strong> \u2014 upgrade to Node 20 LTS; React 19 expects modern JavaScript features<\/li>\n<li><strong>Blank page<\/strong> \u2014 check the browser console (F12) for syntax errors in JSX<\/li>\n<\/ul>\n<h4 id=\"next\">9. Next Steps<\/h4>\n<p>Your environment is ready. Continue to <a href=\"https:\/\/www.kindsonthegenius.com\/react\/03-react-jsx-and-components\/\">Lesson 3 \u2014 React JSX and Components<\/a> to learn how JSX works and how to split UI into reusable components.<\/p>\n<p>Back to <a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">Lesson 1 \u2014 React Introduction<\/a><\/p>\n<h4 id=\"faq\">Frequently Asked Questions<\/h4>\n<p><strong>What do I need to install before learning React?<\/strong><br \/>\nInstall Node.js 20 or newer and npm. Vite scaffolds a React project in one command.<\/p>\n<p><strong>Should I use Vite or Create React App?<\/strong><br \/>\nUse Vite. It is faster, officially recommended for new React projects, and is the default toolchain in this tutorial series.<\/p>\n<p><strong>Can I use yarn or pnpm instead of npm?<\/strong><br \/>\nYes. Replace <code>npm install<\/code> with <code>yarn<\/code> or <code>pnpm install<\/code> if you prefer those package managers.<\/p>\n<p><!-- ktg-faq-schema --><br \/>\n<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What do I need to install before learning React?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Install Node.js 20 or newer and npm. Vite scaffolds a React project in one command.\"}},{\"@type\":\"Question\",\"name\":\"Should I use Vite or Create React App?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Use Vite. It is faster, officially recommended for new React projects, and is the default toolchain in this tutorial series.\"}}]}<\/script><\/p>\n<p><!-- ktg-lesson-nav --><\/p>\n<nav class=\"ktg-lesson-nav\" aria-label=\"Lesson navigation\">\n<p><strong>Previous:<\/strong> <a href=\"https:\/\/www.kindsonthegenius.com\/react\/01-react-introduction\/\">Lesson 1: React Tutorial \u2014 Introduction (2026)<\/a><\/p>\n<p><strong>Next:<\/strong> <a href=\"https:\/\/www.kindsonthegenius.com\/react\/03-react-jsx-and-components\/\">Lesson 3: React JSX and Components \u2014 Build Your First UI<\/a><\/p>\n<\/nav>\n<p><!-- ktg-alkademy-cta --><\/p>\n<div class=\"ktg-alkademy-cta\">\n<p><strong>Want live React or frontend classes?<\/strong> Join <a href=\"https:\/\/www.alkademy.com\/courses\" target=\"_blank\" rel=\"noopener noreferrer\">Alkademy<\/a> for instructor-led React and JavaScript courses with hands-on projects.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Updated July 4, 2026. Refreshed for React 19 and current SEO best practices. Table of Contents Follow the React tutorial series in order: Lesson 1: React Tutorial \u2014 Introduction (2026) Lesson 2: React Setup \u2014 Create Your First App with Vite Lesson 3: React JSX and Components \u2014 Build Your First UI Lesson 4: React [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-tutorials"],"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":7,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/posts\/15\/revisions\/88"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/media\/12"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/react\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}