ReactJS CLI Commands

Last modified on: September 7, 2025

<h1 data-start="431" data-end="457"><strong data-start="433" data-end="457">ReactJS CLI Commands</strong></h1>
<p data-start="459" data-end="629">When working with React, you&rsquo;ll often use the <strong data-start="505" data-end="537">command-line interface (CLI)</strong> to create projects, run the development server, build apps for production, and run tests.</p>
<p data-start="631" data-end="722">Depending on the setup, you may use <strong data-start="667" data-end="693">Create React App (CRA)</strong>, <strong data-start="695" data-end="703">Vite</strong>, or <strong data-start="708" data-end="719">Next.js</strong>.</p>
<hr data-start="724" data-end="727" />
<h2 data-start="729" data-end="774"><strong data-start="732" data-end="774">1. Create React App (CRA) CLI Commands</strong></h2>
<h3 data-start="776" data-end="806"><strong data-start="780" data-end="806">Create a new React app</strong></h3>
<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>
<p data-start="847" data-end="904">👉 Creates a new React project with all configurations.</p>
<hr data-start="906" data-end="909" />
<h3 data-start="911" data-end="938"><strong data-start="915" data-end="938">Navigate to project</strong></h3>
<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>
<hr data-start="962" data-end="965" />
<h3 data-start="967" data-end="999"><strong data-start="971" data-end="999">Start development server</strong></h3>
<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>
<p data-start="1022" data-end="1024">or</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>yarn start
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1048" data-end="1102">👉 Runs the app locally at <code data-start="1075" data-end="1099">http://localhost:3000/</code>.</p>
<hr data-start="1104" data-end="1107" />
<h3 data-start="1109" data-end="1141"><strong data-start="1113" data-end="1141">Build app for production</strong></h3>
<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 build
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1168" data-end="1227">👉 Creates optimized static files in the <code data-start="1209" data-end="1217">build/</code> folder.</p>
<hr data-start="1229" data-end="1232" />
<h3 data-start="1234" data-end="1251"><strong data-start="1238" data-end="1251">Run tests</strong></h3>
<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 test
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1273" data-end="1305">👉 Runs unit tests using Jest.</p>
<hr data-start="1307" data-end="1310" />
<h3 data-start="1312" data-end="1355"><strong data-start="1316" data-end="1355">Eject configuration (rarely needed)</strong></h3>
<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 eject
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1382" data-end="1456">👉 Exposes all hidden config (Webpack, Babel, ESLint). <strong data-start="1437" data-end="1454">Irreversible!</strong></p>
<hr data-start="1458" data-end="1461" />
<h2 data-start="1463" data-end="1518"><strong data-start="1466" data-end="1518">2. Vite CLI Commands (Modern Alternative to CRA)</strong></h2>
<p data-start="1520" data-end="1542">Install Vite globally:</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>
<p data-start="1586" data-end="1608">Navigate into project:</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="1632" data-end="1653">Install dependencies:</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 install
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1679" data-end="1696">Start dev server:</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>
<p data-start="1722" data-end="1739">Build production:</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 build
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1767" data-end="1800">Preview production build locally:</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 preview
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1830" data-end="1833" />
<h2 data-start="1835" data-end="1887"><strong data-start="1838" data-end="1887">3. Next.js CLI Commands (For React + SSR/SSG)</strong></h2>
<p data-start="1889" data-end="1908">Create Next.js app:</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-next-app my-app
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1949" data-end="1972">Run development server:</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>
<p data-start="1998" data-end="2015">Build production:</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 build
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2043" data-end="2067">Start production server:</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>
<p data-start="2091" data-end="2104">Lint project:</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 lint
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2131" data-end="2134" />
<h2 data-start="2136" data-end="2168"><strong data-start="2139" data-end="2168">4. Useful Global Commands</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2170" data-end="2455">
<thead data-start="2170" data-end="2195">
<tr data-start="2170" data-end="2195">
<th data-start="2170" data-end="2180" data-col-size="sm">Command</th>
<th data-start="2180" data-end="2195" data-col-size="sm">Description</th>
</tr>
</thead>
<tbody data-start="2222" data-end="2455">
<tr data-start="2222" data-end="2284">
<td data-start="2222" data-end="2238" data-col-size="sm"><code data-start="2224" data-end="2237">npm install</code></td>
<td data-start="2238" data-end="2284" data-col-size="sm">Installs dependencies from <code data-start="2267" data-end="2281">package.json</code>.</td>
</tr>
<tr data-start="2285" data-end="2351">
<td data-start="2285" data-end="2306" data-col-size="sm"><code data-start="2287" data-end="2305">npm run &lt;script&gt;</code></td>
<td data-start="2306" data-end="2351" data-col-size="sm">Runs a custom script from <code data-start="2334" data-end="2348">package.json</code>.</td>
</tr>
<tr data-start="2352" data-end="2405">
<td data-start="2352" data-end="2370" data-col-size="sm"><code data-start="2354" data-end="2369">npm audit fix</code></td>
<td data-start="2370" data-end="2405" data-col-size="sm">Fixes security vulnerabilities.</td>
</tr>
<tr data-start="2406" data-end="2455">
<td data-start="2406" data-end="2423" data-col-size="sm"><code data-start="2408" data-end="2422">npm outdated</code></td>
<td data-start="2423" data-end="2455" data-col-size="sm">Shows outdated dependencies.</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2457" data-end="2460" />
<h2 data-start="2462" data-end="2478">✅ <strong data-start="2467" data-end="2478">Summary</strong></h2>
<ul data-start="2480" data-end="2733">
<li data-start="2480" data-end="2559">
<p data-start="2482" data-end="2559"><strong data-start="2482" data-end="2493">CRA CLI</strong> &rarr; <code data-start="2496" data-end="2525">npx create-react-app my-app</code> &rarr; <code data-start="2528" data-end="2539">npm start</code> &rarr; <code data-start="2542" data-end="2557">npm run build</code></p>
</li>
<li data-start="2560" data-end="2647">
<p data-start="2562" data-end="2647"><strong data-start="2562" data-end="2574">Vite CLI</strong> &rarr; Faster alternative &rarr; <code data-start="2598" data-end="2629">npm create vite@latest my-app</code> &rarr; <code data-start="2632" data-end="2645">npm run dev</code></p>
</li>
<li data-start="2648" data-end="2733">
<p data-start="2650" data-end="2733"><strong data-start="2650" data-end="2665">Next.js CLI</strong> &rarr; For SSR/SSG apps &rarr; <code data-start="2687" data-end="2715">npx create-next-app my-app</code> &rarr; <code data-start="2718" data-end="2731">npm run dev</code></p>
</li>
</ul>

Web Technology View More

ReactJS CLI Commands

Learn Ansible

Learn HTML

Learn Angular 3

Learn PHP

Learn Angular 2.0

Learn Python

Learn C# Sharp

Learn CSS

Learn Node Js

Learn JQuery Framework

Learn ReactJS

Learn SQL Tutorial

Learn MySql

Learn PHP 7.1

Learn CodeIgniter

Learn Angular 3

Learn Angular 2

Learn HTML5

Learn Angular 2

Learn Angular 3.0

Learn Bootstrap 3

Learn Bootstrap 4

Learn Bootstrap 5

Learn JQuery Tutorials