{"id":115,"date":"2026-02-19T06:00:00","date_gmt":"2026-02-19T06:00:00","guid":{"rendered":"https:\/\/charliestelling.co.uk\/?p=115"},"modified":"2026-02-17T18:09:27","modified_gmt":"2026-02-17T18:09:27","slug":"creating-a-react-local-enviroment","status":"publish","type":"post","link":"https:\/\/charliestelling.co.uk\/?p=115","title":{"rendered":"Creating a React Local Enviroment"},"content":{"rendered":"\n<p class=\"\">Download and Install Node.js<\/p>\n\n\n\n<p class=\"\">Node.js is the engine that runs JavaScript on your computer, and npm (Node Package Manager) is the tool that lets you download React libraries.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Go to the official site: Visit <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">nodejs.org<\/a>.<\/li>\n\n\n\n<li class=\"\">Pick the LTS Version: You will see two options. Always choose the LTS (Long Term Support) version. It\u2019s the most stable and guaranteed to work with React.<\/li>\n\n\n\n<li class=\"\">Run the Installer: Open the downloaded file and click through the prompts (the default settings are perfect).<\/li>\n<\/ul>\n\n\n\n<p class=\"\">2. Verify the Installation<\/p>\n\n\n\n<p class=\"\">Once the installer finishes, you need to make sure your computer &#8220;sees&#8221; the new tools. Open your Terminal (on Mac\/Linux) or Command Prompt\/PowerShell (on Windows) and type the following:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"\">Check Node version: node -v<\/li>\n\n\n\n<li class=\"\">Check npm version: npm -v<\/li>\n<\/ol>\n\n\n\n<p class=\"\">Note: If you see a version number (like v20.x.x), you\u2019re good to go! If you get a &#8220;command not found&#8221; error, try restarting your terminal or computer.&nbsp;<\/p>\n\n\n\n<p class=\"\">3. Create your react app<\/p>\n\n\n\n<p class=\"\">Now that you have Node.js installed you are ready to start your first project.<\/p>\n\n\n\n<p class=\"\">Open your terminal or command prompt and navigate to the folder where you want your project to live (e.g., cd Documents). Then run:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"\"><strong>Initialize the project:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"\">Bash<\/p>\n\n\n\n<p class=\"\">npx create-react-app my-react-app<\/p>\n\n\n\n<p class=\"\">Replace my-react-app with the name of your app.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li class=\"\"><strong>Select your settings:<\/strong> Use your arrow keys to select <strong>React<\/strong> and then <strong>JavaScript<\/strong> (or TypeScript if you&#8217;re feeling adventurous).<\/li>\n\n\n\n<li class=\"\"><strong>Enter the folder and install dependencies:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"\">Bash<\/p>\n\n\n\n<p class=\"\">cd my-react-app<\/p>\n\n\n\n<p class=\"\">npm install<\/p>\n\n\n\n<p class=\"\"><em>4. Launch the Local Environment<\/em><\/p>\n\n\n\n<p class=\"\">To see your app live, run:<\/p>\n\n\n\n<p class=\"\">Bash<\/p>\n\n\n\n<p class=\"\">npm start<\/p>\n\n\n\n<p class=\"\">5. The golden Standard<\/p>\n\n\n\n<p class=\"\">In early 2025 the React Team depreciated Create-React-App and since then the industry has split into two separate \u201cGolden Standards\u201d depending on what you are building.<\/p>\n\n\n\n<p class=\"\"><strong>1. The Standard for SPAs &amp; Learning: Vite<\/strong><\/p>\n\n\n\n<p class=\"\">If you are building a <strong>Single Page Application (SPA)<\/strong>\u2014like a dashboard, a tool that requires a login, or a personal project\u2014Vite is the undisputed king.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Why:<\/strong> It is the direct successor to the old way of building React. It is lightweight, stays out of your way, and is compatible with almost every React library ever made.<\/li>\n\n\n\n<li class=\"\"><strong>Example:<\/strong> &#8220;I want to write React components and have them show up on the screen immediately.&#8221;<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>2. The Standard for Production &amp; SEO: Next.js<\/strong><\/p>\n\n\n\n<p class=\"\">If you are building a <strong>public-facing website<\/strong>\u2014like an e-commerce store, a blog, or a marketing site\u2014the &#8220;Golden Standard&#8221; is actually <strong>Next.js<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Why:<\/strong> Next.js is a framework built <em>on top<\/em> of React. It handles things Vite doesn&#8217;t, like SEO (Search Engine Optimization), image optimization, and &#8220;Server Components&#8221; (which make your site load faster for users).<\/li>\n\n\n\n<li class=\"\"><strong>Example:<\/strong> &#8220;I am building a professional product that needs to rank on Google and handle thousands of users.&#8221;<\/li>\n<\/ul>\n\n\n\n<p class=\"\">For your local environment and for learning the core of React, Vite is the absolute best choice. It gives you a &#8220;pure&#8221; React experience without the extra rules and complexity that frameworks like Next.js or Remix introduce.<\/p>\n\n\n\n<p class=\"\">Most developers today start with <strong>Vite<\/strong> to master the fundamentals, then move to Next.js once they need to build a full-scale commercial product.<\/p>\n\n\n\n<p class=\"\">For the Puposes of this tutorial we are going to create a application using <strong>Vite<\/strong><\/p>\n\n\n\n<p class=\"\">6. Open your terminal or command prompt and navigate to the folder where you want your project to live (e.g., cd Documents). Then run:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"\"><strong>Initialize the project:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"\">Bash<\/p>\n\n\n\n<p class=\"\">npm create vite@latest my-react-app<\/p>\n\n\n\n<p class=\"\">Replace my-react-app with the name of your app.<\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li class=\"\"><strong>Select your settings:<\/strong> Use your arrow keys to select <strong>React<\/strong> and then <strong>JavaScript<\/strong> (or TypeScript if you&#8217;re feeling adventurous).<\/li>\n\n\n\n<li class=\"\"><strong>Enter the folder and install dependencies:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"\">cd my-react-app<\/p>\n\n\n\n<p class=\"\">npm install<\/p>\n\n\n\n<p class=\"\"><em>4. Launch the Local Environment<\/em><\/p>\n\n\n\n<p class=\"\">To see your app live, run:<\/p>\n\n\n\n<p class=\"\">Bash<\/p>\n\n\n\n<p class=\"\">npm run dev<\/p>\n\n\n\n<p class=\"\">5. create a .batch file to launch the local development<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Create a new local.bat file<\/li>\n\n\n\n<li class=\"\">Add the following code<\/li>\n<\/ol>\n\n\n\n<p class=\"\">@echo off<\/p>\n\n\n\n<p class=\"\">Call npm start<\/p>\n\n\n\n<p class=\"\">pause<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Download and Install Node.js Node.js is the engine that runs JavaScript on your computer, and npm (Node Package Manager) is the tool that lets you download React libraries. 2. Verify the Installation Once the installer finishes, you need to make sure your computer &#8220;sees&#8221; the new tools. Open your Terminal (on Mac\/Linux) or Command Prompt\/PowerShell [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":116,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=115"}],"version-history":[{"count":1,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/115\/revisions\/117"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=\/wp\/v2\/media\/116"}],"wp:attachment":[{"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charliestelling.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}