ReactJS Creating a React Application

Last modified on: September 7, 2025

<h1 data-start="392" data-end="426"><strong data-start="394" data-end="426">Creating a React Application</strong></h1>
<p data-start="428" data-end="616">ReactJS allows developers to build <strong data-start="463" data-end="495">interactive and reusable UIs</strong>. To start a React project, you can use <strong data-start="535" data-end="561">Create React App (CRA)</strong>, <strong data-start="563" data-end="571">Vite</strong>, or a <strong data-start="578" data-end="591">CDN setup</strong> for learning purposes.</p>
<hr data-start="618" data-end="621" />
<h2 data-start="623" data-end="646"><strong data-start="626" data-end="646">1. Prerequisites</strong></h2>
<p data-start="647" data-end="694">Before creating a React app, ensure you have:</p>
<ul data-start="695" data-end="729">
<li data-start="695" data-end="729">
<p data-start="697" data-end="729"><strong data-start="697" data-end="716">Node.js and npm</strong> installed:</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>node -v
npm -v
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="759" data-end="852">
<li data-start="759" data-end="798">
<p data-start="761" data-end="798">A <strong data-start="763" data-end="778">code editor</strong> like <strong data-start="784" data-end="795">VS Code</strong>.</p>
</li>
<li data-start="799" data-end="852">
<p data-start="801" data-end="852">Basic knowledge of <strong data-start="820" data-end="849">HTML, CSS, and JavaScript</strong>.</p>
</li>
</ul>
<hr data-start="854" data-end="857" />
<h2 data-start="859" data-end="907"><strong data-start="862" data-end="907">2. Method 1: Using Create React App (CRA)</strong></h2>
<p data-start="909" data-end="943"><strong data-start="909" data-end="943">Step 1: Create a new React app</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>npx create-react-app my-app
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="984" data-end="1070">
<li data-start="984" data-end="1017">
<p data-start="986" data-end="1017"><code data-start="986" data-end="994">my-app</code> is the project name.</p>
</li>
<li data-start="1018" data-end="1070">
<p data-start="1020" data-end="1070"><code data-start="1020" data-end="1025">npx</code> ensures the latest version of CRA is used.</p>
</li>
</ul>
<p data-start="1072" data-end="1114"><strong data-start="1072" data-end="1114">Step 2: Navigate to the project folder</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>cd my-app
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1138" data-end="1178"><strong data-start="1138" data-end="1178">Step 3: Start the development server</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>npm start
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="1201" data-end="1298">
<li data-start="1201" data-end="1251">
<p data-start="1203" data-end="1251">Opens <code data-start="1209" data-end="1232">http://localhost:3000</code> in your browser.</p>
</li>
<li data-start="1252" data-end="1298">
<p data-start="1254" data-end="1298">You will see the default React welcome page.</p>
</li>
</ul>
<p data-start="1300" data-end="1322"><strong data-start="1300" data-end="1322">Project Structure:</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>my-app/
├─ node_modules/
├─ public/
│  └─ index.html
├─ src/
│  ├─ App.js
│  ├─ index.js
│  └─ components/
└─ package.json
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1455" data-end="1458" />
<h2 data-start="1460" data-end="1511"><strong data-start="1463" data-end="1511">3. Method 2: Using Vite (Faster Alternative)</strong></h2>
<p data-start="1513" data-end="1546"><strong data-start="1513" data-end="1546">Step 1: Create a Vite project</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>npm create vite@latest my-app
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="1589" data-end="1650">
<li data-start="1589" data-end="1650">
<p data-start="1591" data-end="1650">Choose <strong data-start="1598" data-end="1607">React</strong> and either <strong data-start="1619" data-end="1647">JavaScript or TypeScript</strong>.</p>
</li>
</ul>
<p data-start="1652" data-end="1684"><strong data-start="1652" data-end="1684">Step 2: Install dependencies</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>cd my-app
npm install
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1720" data-end="1760"><strong data-start="1720" data-end="1760">Step 3: Start the development server</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>npm run dev
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="1785" data-end="1842">
<li data-start="1785" data-end="1842">
<p data-start="1787" data-end="1842">Opens a local server (e.g., <code data-start="1815" data-end="1838">http://localhost:5173</code>).</p>
</li>
</ul>
<p data-start="1844" data-end="1903">Vite is <strong data-start="1852" data-end="1871">faster than CRA</strong> and has a modern build process.</p>
<hr data-start="1905" data-end="1908" />
<h2 data-start="1910" data-end="1963"><strong data-start="1913" data-end="1963">4. Method 3: Using HTML &amp; CDN (Quick Learning)</strong></h2>
<p data-start="1965" data-end="2004"><strong data-start="1965" data-end="2004">Step 1: Create an <code data-start="1985" data-end="1997">index.html</code> file</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;React App&lt;/title&gt;
    &lt;script src="https://unpkg.com/react@18/umd/react.development.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
      const App = () =&gt; &lt;h1&gt;Hello, React!&lt;/h1&gt;;
      ReactDOM.createRoot(document.getElementById("root")).render(&lt;App /&gt;);
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2557" data-end="2586"><strong data-start="2557" data-end="2584">Step 2: Open in browser</strong></p>
<ul data-start="2587" data-end="2627">
<li data-start="2587" data-end="2627">
<p data-start="2589" data-end="2627">You&rsquo;ll see <code data-start="2600" data-end="2615">Hello, React!</code> rendered.</p>
</li>
</ul>
<blockquote data-start="2629" data-end="2722">
<p data-start="2631" data-end="2722"><strong data-start="2631" data-end="2640">Note:</strong> This method is for quick testing or learning; for real projects, use CRA or Vite.</p>
</blockquote>
<hr data-start="2724" data-end="2727" />
<h2 data-start="2729" data-end="2766"><strong data-start="2732" data-end="2766">5. Running &amp; Verifying the App</strong></h2>
<ul data-start="2767" data-end="2980">
<li data-start="2767" data-end="2890">
<p data-start="2769" data-end="2890">After running the development server (<code data-start="2807" data-end="2818">npm start</code> or <code data-start="2822" data-end="2835">npm run dev</code>), your app should open automatically in the browser.</p>
</li>
<li data-start="2891" data-end="2980">
<p data-start="2893" data-end="2980">Any changes you make in the <code data-start="2921" data-end="2926">src</code> folder are reflected <strong data-start="2948" data-end="2956">live</strong> due to hot-reloading.</p>
</li>
</ul>
<hr data-start="2982" data-end="2985" />
<h2 data-start="2987" data-end="3034"><strong data-start="2990" data-end="3034">6. Next Steps After Creating a React App</strong></h2>
<ol data-start="3035" data-end="3286">
<li data-start="3035" data-end="3079">
<p data-start="3038" data-end="3079">Learn <strong data-start="3044" data-end="3076">components, props, and state</strong>.</p>
</li>
<li data-start="3080" data-end="3125">
<p data-start="3083" data-end="3125">Implement <strong data-start="3093" data-end="3104">routing</strong> with React Router.</p>
</li>
<li data-start="3126" data-end="3158">
<p data-start="3129" data-end="3158">Handle <strong data-start="3136" data-end="3155">forms and input</strong>.</p>
</li>
<li data-start="3159" data-end="3212">
<p data-start="3162" data-end="3212">Fetch data from APIs using <code data-start="3189" data-end="3196">fetch</code> or <strong data-start="3200" data-end="3209">Axios</strong>.</p>
</li>
<li data-start="3213" data-end="3286">
<p data-start="3216" data-end="3286">Start building small projects like a <strong data-start="3253" data-end="3268">Counter App</strong> or <strong data-start="3272" data-end="3285">To-Do App</strong>.</p>
</li>
</ol>

Web Technology View More