DEV Community: lucky chauhan

How to Start a React Native Project and Build Your First “Hello World” App

lucky chauhan — Fri, 26 Dec 2025 14:43:06 +0000

Below is a complete, production-ready article you can publish directly.
It covers environment setup → project creation → running → Hello World → common errors in a clean, structured way.

How to Start a React Native Project and Build Your First “Hello World” App

React Native allows you to build native Android and iOS apps using JavaScript and React. Instead of maintaining separate codebases for each platform, you write once and ship everywhere.

This guide walks through everything from zero to your first running app.

What You Will Build

A simple React Native application that displays:

Hello World 🚀
Welcome to React Native

Running on:

Android Emulator or Physical Device

Prerequisites

Before starting, ensure the following are installed:

Required Tools

Tool	Purpose
Node.js (LTS)	JavaScript runtime
npm / yarn	Package manager
Java JDK (17 recommended)	Android build system
Android Studio	Emulator + SDK
Code Editor	VS Code recommended

1. Install Android Studio

Install Android SDK
Enable:
- Android SDK Platform 33+
- Android SDK Build Tools
- Android Emulator

2. Set Environment Variables (Windows)

ANDROID_HOME=C:\Users\<username>\AppData\Local\Android\Sdk

Add to PATH:

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator

Verify:

adb --version

Two Ways to Start a React Native Project

React Native supports two official approaches:

Approach	Use Case
Expo (Recommended for beginners)	Faster setup
React Native CLI	Full native control

This article uses React Native CLI for real-world understanding.

Step 1: Create a New React Native Project

Run:

npx react-native init HelloWorldApp

What this does:

Downloads React Native template
Creates Android & iOS folders
Installs dependencies

Move into project:

cd HelloWorldApp

Step 2: Understand Project Structure

HelloWorldApp/
 ├── android/        # Native Android code
 ├── ios/            # Native iOS code
 ├── node_modules/
 ├── App.js          # Main entry file
 ├── package.json
 └── index.js

Key file:

App.js → main UI component

Step 3: Start Android Emulator

Options:

Android Studio → AVD Manager → Start Emulator
Or connect physical device with USB debugging

Verify connection:

adb devices

Step 4: Run the App

npx react-native run-android

This command:

Builds Android app
Installs APK
Launches emulator

First build may take 2–5 minutes.

Step 5: Write Your First “Hello World”

Open App.js and replace content:

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Hello World 🚀</Text>
      <Text style={styles.subtitle}>Welcome to React Native</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 28,
    fontWeight: '700',
  },
  subtitle: {
    fontSize: 16,
    marginTop: 10,
    color: '#555',
  },
});

Save file → App reloads automatically.

Hot Reload Explained

React Native uses Fast Refresh:

Save file
UI updates instantly
App state preserved

No rebuild required.

Common Errors & Fixes

❌ `SDK location not found`

Fix:

cd android
gradlew clean

Ensure ANDROID_HOME is set.

❌ `react-native-safe-area-context missing`

Fix:

npm install
cd android && gradlew clean

❌ Emulator detected but app not launching

Fix:

adb kill-server
adb start-server

Next Steps After Hello World

Once setup is done, learn:

Components (View, Text, Image)
Navigation (react-navigation)
Styling (StyleSheet, NativeWind)
API calls (fetch, Axios)
State management (Context, Redux)

Summary

You learned how to:

Set up React Native environment
Create a new project
Run Android emulator
Write and run a Hello World app
Understand project structure

This foundation is enough to start building real mobile applications.

🚀 Where `npx` Exists & What You Can Change (Deep Practical Guide)

lucky chauhan — Fri, 26 Dec 2025 09:15:45 +0000

npx is often misunderstood as a single command or binary. In reality, it is an execution chain composed of multiple layers involving the shell, PATH resolution, Node.js, npm internals, and environment variables.
Because of this design, you can change its location, runtime behavior, and even influence port usage indirectly—without modifying npx source code.

🔍 `npx` Is Not a Single File — It’s a Chain

Physically and logically, npx exists as a multi-step pipeline:

Shell
 ↓
npx / npx.cmd (shim)
 ↓
Node.js runtime
 ↓
npx-cli.js (npm internal JS logic)

Key implication:
You can control which npx runs and how it behaves by changing:

PATH order
Node version
npm configuration
environment variables

🪟 Windows: Where `npx` Lives & What You Can Modify

📍 Default Physical Locations

C:\Program Files\nodejs\npx.cmd
C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js

npx.cmd → thin command shim (no logic)
npx-cli.js → actual JavaScript implementation of npx

npx.cmd only forwards arguments to Node, which executes npx-cli.js.

🔧 Practical Things You Can Change on Windows

1️⃣ PATH Order Controls Which `npx` Runs

Check all available npx commands:

where npx

Example output:

C:\Program Files\nodejs\npx.cmd
C:\Users\You\AppData\Roaming\npm\npx.cmd

👉 The first match in PATH wins.

Inspect PATH:

echo %PATH%

Reordering PATH immediately switches:

active Node version
active npm
active npx

No reinstall required.

2️⃣ Multiple Node Versions = Multiple `npx`

If you use:

nvm
fnm
or multiple manual Node installs

Each Node installation ships with its own npm and its own npx.

Rule:

Change Node → npm changes → npx changes

This explains why npx behavior or version may differ across terminals or projects.

🐧 macOS / Linux: Location & Override Mechanics

📍 Default Location

which npx

Typical output:

/usr/local/bin/npx

Check what it actually points to:

ls -l $(which npx)

Usually:

npx -> ../lib/node_modules/npm/bin/npx-cli.js

👉 This is a symlink, not a real binary.

🔧 Switching `npx` via PATH

export PATH=~/.nvm/versions/node/v20.x.x/bin:$PATH

Effect:

npx → new Node → new npm → new npx

No config files touched—only PATH.

🌐 How Port Changes Are Related to `npx`

Important clarification:
npx does not control ports.
It only passes environment variables and arguments to the tool it runs.

Common Tools Run via `npx`

npx vite
npx react-native start
npx next dev

These tools read:

process.env.PORT
CLI flags like --port

🔧 Changing Port While Using `npx`

Method 1: Environment Variable (Preferred)

macOS / Linux:

PORT=4000 npx vite

Windows:

set PORT=4000 && npx vite

Method 2: CLI Flag

npx vite --port 4000
npx next dev -p 4000

Why This Works

Execution flow:

npx → Node child process → env variables → tool logic

npx simply forwards context.
The tool decides the port, not npx.

⚙️ npm Config Changes That Affect `npx`

Cache Location (Critical in Real Systems)

Check current cache:

npm config get cache

Change cache directory:

npm config set cache D:\npm-cache

Effects:

npx downloads temporary packages to new location
Fixes permission issues
Improves disk performance
Helps in CI/CD environments

🧪 Bypassing `npx` Entirely (Proof of Internals)

You can execute npx directly via Node:

node C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js create-react-app app

This proves:

npx is pure JavaScript
npx.cmd / symlink is optional
Node.js is mandatory

🧠 Real-World Summary

Component	Can You Change It?	How
`npx` location	✅	PATH / Node version
`npx` behavior	❌	Fixed npm logic
Port	✅	Env variables / flags
Cache path	✅	npm config
Node runtime	✅	nvm / fnm
npm version	✅	Upgrade / downgrade

🧩 Final Mental Model

PATH decides npx
npx decides npm context
npm decides cache
tool decides port

Understanding npx How It Really Works

lucky chauhan — Wed, 24 Dec 2025 06:50:26 +0000

npx stands for Node Package Execute. npx is one of the most-used tools in Node.js and yet its internals are not commonly understood. Most developers think that npx just downloads and runs packages. That's only the last step.

In practice, npx resolves an executable through a strict, ordered search process, and will install a package only if nothing is found locally or globally.

Overview

npx does the following:

npx searches for an executable and runs it.

It downloads it temporarily and runs the executable, if the executable is not available locally or globally.

Consider npx as an executable resolver, not a package manager.

Note

npx can both install and execute a package only if that package exposes an executable (via the bin field).

If the package is a CLI tool, npx will:

Download it temporarily (if not already available)

Execute its binary

Remove it after execution (unless cached)

Examples

npx vite

vite is a CLI package that exposes a binary. npx installs it (if missing) and runs the Vite dev server.

npx express

The express package is a library, not a CLI. It does not expose an executable, so npx express fails.

Key Rule

npx works only with packages that provide executables.

Libraries without a bin entry cannot be executed using npx.

Exact Resolution Order (Quick Scan)

What npx does?
Searches for a file and executes it.

Search Step-1
    Searches for package.json in current working directory
    Searches for name key in the json
    Searches for bin key

Search Step-2
    Searches for node_modules\.bin\hello in current working directory
    And executes this file

Search Step-3
    Searches for hello in global npm folder
    And executes this file

Search Step-4
    Searches for hello package in npx cache
    And executes this file

Search Step-5
    Searches for hello package in npm registry
    Prompts to install the package if found
    Downloads and installs

Execution stops immediately when a match is found.

Deep Explanation: How Each Step Works

Below is the Deep Explanation of each Step

Step: Project `package.json` — Project-Scoped CLI (Highest Priority)

npx first checks whether the current working directory contains a package.json.

If found, it inspects two fields:

→ name
→ bin

If the executed command matches:

→ the project name
→ a key exposed in the bin field

then npx executes the mapped file directly from the project, without any global installation.

Minimal Working Example (Test This Locally)

Create a new project folder

→ Open a terminal
→ Run:

mkdir hello-project
cd hello-project

Initialize `package.json`

→ Run:

npm init -y

→ Update package.json:

{
  "name": "hello",
  "version": "1.0.0",
  "bin": {
    "hello": "./index.js"
  }
}

Create the executable file

Folder structure:

hello-project/
├── package.json
└── index.js

→ Create index.js:

#!/usr/bin/env node

console.log("Hello from project-scoped CLI");

Make the file executable (Linux / macOS)

→ Run:

chmod +x index.js

→ Windows users can skip this step

Run the command using `npx`

→ Execute:

npx hello

→ Output:

Hello from project-scoped CLI

What Happens Internally

When you run npx hello, npx performs the following:

→ Detects package.json
→ Reads name → hello
→ Resolves bin → ./index.js
→ Executes the mapped file

→ No downloads
→ No global installs
→ No cache lookup

Why This Matters

→ Enables project-scoped CLIs
→ Prevents global version conflicts
→ Ensures project and CLI stay in sync
→ Ideal for internal tooling

Step 2: Local `node_modules/.bin` (Preferred Execution)

If Step 1 fails, npx checks the local project’s executable directory:

./node_modules/.bin/hello

This directory is automatically created by npm when a dependency exposes a bin field in its package.json.

Example: Local CLI Installation

npm install hello-cli

This produces the following structure:

project-root/
├─ package.json
├─ node_modules/
│  ├─ .bin/
│  │  ├─ hello          (macOS / Linux)
│  │  ├─ hello.cmd      (Windows)
│  │  └─ hello.ps1      (Windows PowerShell)
│  └─ hello-cli/
│     ├─ package.json
│     └─ index.js

The .bin files are shims generated by npm that point to the actual executable defined in the package’s bin field.

Execution

npx hello

npx resolves and executes:

./node_modules/.bin/hello

No global lookup occurs once a local match is found.

Key rule

Local project executables always override global ones.

This guarantees:

Version consistency per project
Predictable CLI behavior
Reproducible development and CI environments

Step 3: Global npm Binary Folder

If no local executable exists, npx checks the global npm executable path.

In modern npm versions, the npm bin -g command no longer exists. Instead, npx derives the global binary location from the global npm root:

npm root -g

Example (Windows):

C:\Users\username\AppData\Roaming\npm\node_modules

Global CLI executables are exposed one level above this directory:

C:\Users\username\AppData\Roaming\npm\

If a matching executable (for example hello.cmd or hello) exists in this location and is available in the system PATH, npx executes it immediately.

Reason for lower priority

Global CLIs:

Are shared across all projects
Can introduce version mismatches
Reduce reproducibility across environments

For this reason, npx always prefers project-local binaries over global ones.

Step 4: npx Cache — Fast Reuse

If the executable is still not found locally or globally, npx checks its local execution cache.

This cache is maintained by npm and reused by npx to avoid unnecessary network calls.

What the npx cache does

Stores previously downloaded CLI packages (temporary installs)
Reuses exact package versions across executions
Eliminates repeated downloads from the npm registry
Significantly improves execution speed for recurring commands

Where the cache lives

npx uses npm’s cache directory.

Check the active cache path:

npm config get cache

Example output:

Windows

C:\Users\<username>\AppData\Local\npm-cache

Linux / macOS

/home/<username>/.npm

npx creates and manages its execution cache inside this directory:

Step 5: npm Registry (Last Resort)

When all previous steps fail, npx queries the npm registry.

If a hello-named package does exist:

The package is downloaded
Its bin entry is resolved
The executable is run immediately
The package is cached

Example:

npx create-react-app my-app

Nothing is installed globally, nor saved to package.json.

This behavior is tightly integrated with Node.js, npm’s binary linking system, and shebang-based execution.

Mental Model to Remember

npx = resolve an executable, not install a dependency.

Installation occurs only when resolution fails.

Final Takeaway

npx is a command runner
Local project tools always win
Global tools are fallback
Cache avoids re-downloads
The registry fetch is the last step

Use npx when you want:

One-off CLI usage
Zero global installs
Version-safe tooling
Clean developer environments

Questions to Think About

Q1: If no version is specified, how does npx know which version to download?
Q2: What if the same command exists locally and globally?
Q3: Why is node_modules/.bin preferred over global binaries in npx resolution?

The Secret Trick to Customizing Console Logs with CSS

lucky chauhan — Thu, 15 May 2025 03:24:32 +0000

Tired of boring, plain-text console logs? Did you know you can style your browser’s console output with colors, custom fonts, backgrounds, and even animations—all using a simple JavaScript trick?

In this post, you’ll learn how to use the %c formatter to apply CSS styling to console.log() messages, making debugging more visually intuitive and even fun!

✨ Why Style Console Logs?

Before we dive into the code, here’s why you should care:

✅ Highlight important logs (errors in red, warnings in yellow)

✅ Organize debug output (API calls vs. state changes)

✅ Make debugging more enjoyable (because who doesn’t love colors?)

🛠 How It Works: The `%c` Formatter

The secret is the %c placeholder in console.log(). It tells the browser: “The next argument is CSS—apply it to this text!”

Basic Syntax

console.log("%cStyled Text", "CSS goes here");

Example: Colored & Bold Log

console.log(
  "%cHello, Console!",
  "color: white; background: #007BFF; font-weight: bold; padding: 4px;"
);

This logs a blue-background, bold, white text message.

🎨 Advanced Styling Tricks

1. Multiple Styles in One Log

Use multiple %c placeholders for different styles:

console.log(
  "%cError:%c File not found!",
  "color: red; font-weight: bold;",
  "color: #333;"
);

2. Backgrounds, Borders & Padding

Make logs stand out like notifications:

console.log(
  "%cSUCCESS",
  "background: #28A745; color: white; padding: 4px 8px; border-radius: 4px;"
);

3. Fun with Fonts & Shadows

console.log(
  "%c✨ Debug Mode Activated!",
  "font-family: sans-serif; font-size: 18px; text-shadow: 1px 1px 2px #ccc;"
);

🚀 Practical Uses

Color-code log levels (errors, warnings, info)
Highlight API request/response logs
Make debugging sessions less monotonous

🔍 Try It Yourself!

Open DevTools (F12 or Ctrl+Shift+I).
Paste any example above into the console.
Experiment with your own styles!

Pro Tip: Combine this with console.group() for neatly organized logs.

💬 Your Challenge

What’s the craziest style you can create? Try:

Gradient text
Animated logs (using @keyframes)
A full-width console "header"

📌 Key Takeaways

✔ Use %c to inject CSS into console.log().

✔ Style text, backgrounds, borders, and more.

✔ Great for debugging, logging, and fun experiments.

Now go make your console logs pop with color! 🎉

Tags: #JavaScriptTips #WebDevelopment #Debugging #FrontEnd

DEV Community: lucky chauhan

How to Start a React Native Project and Build Your First “Hello World” App

How to Start a React Native Project and Build Your First “Hello World” App

What You Will Build

Prerequisites

Required Tools

1. Install Android Studio

2. Set Environment Variables (Windows)

Two Ways to Start a React Native Project

Step 1: Create a New React Native Project

Step 2: Understand Project Structure

Step 3: Start Android Emulator

Step 4: Run the App

Step 5: Write Your First “Hello World”

Hot Reload Explained

Common Errors & Fixes

❌ SDK location not found

❌ react-native-safe-area-context missing

❌ Emulator detected but app not launching

Next Steps After Hello World

Summary

🚀 Where `npx` Exists & What You Can Change (Deep Practical Guide)

🔍 npx Is Not a Single File — It’s a Chain

🪟 Windows: Where npx Lives & What You Can Modify

📍 Default Physical Locations

🔧 Practical Things You Can Change on Windows

1️⃣ PATH Order Controls Which npx Runs

2️⃣ Multiple Node Versions = Multiple npx

🐧 macOS / Linux: Location & Override Mechanics

📍 Default Location

🔧 Switching npx via PATH

🌐 How Port Changes Are Related to npx

Common Tools Run via npx

🔧 Changing Port While Using npx

Method 1: Environment Variable (Preferred)

Method 2: CLI Flag

Why This Works

⚙️ npm Config Changes That Affect npx

Cache Location (Critical in Real Systems)

🧪 Bypassing npx Entirely (Proof of Internals)

🧠 Real-World Summary

🧩 Final Mental Model

Understanding npx How It Really Works

Overview

Exact Resolution Order (Quick Scan)

Deep Explanation: How Each Step Works

Step: Project package.json — Project-Scoped CLI (Highest Priority)

Minimal Working Example (Test This Locally)

Create a new project folder

Initialize package.json

Create the executable file

Make the file executable (Linux / macOS)

Run the command using npx

What Happens Internally

Why This Matters

Step 2: Local node_modules/.bin (Preferred Execution)

Example: Local CLI Installation

Execution

Key rule

Step 3: Global npm Binary Folder

Reason for lower priority

Step 4: npx Cache — Fast Reuse

What the npx cache does

Where the cache lives

Step 5: npm Registry (Last Resort)

Mental Model to Remember

Final Takeaway

Questions to Think About

The Secret Trick to Customizing Console Logs with CSS

✨ Why Style Console Logs?

🛠 How It Works: The %c Formatter

Basic Syntax

Example: Colored & Bold Log

🎨 Advanced Styling Tricks

1. Multiple Styles in One Log

2. Backgrounds, Borders & Padding

3. Fun with Fonts & Shadows

🚀 Practical Uses

🔍 Try It Yourself!

💬 Your Challenge

❌ `SDK location not found`

❌ `react-native-safe-area-context missing`

🔍 `npx` Is Not a Single File — It’s a Chain

🪟 Windows: Where `npx` Lives & What You Can Modify

1️⃣ PATH Order Controls Which `npx` Runs

2️⃣ Multiple Node Versions = Multiple `npx`

🔧 Switching `npx` via PATH

🌐 How Port Changes Are Related to `npx`

Common Tools Run via `npx`

🔧 Changing Port While Using `npx`

⚙️ npm Config Changes That Affect `npx`

🧪 Bypassing `npx` Entirely (Proof of Internals)

Step: Project `package.json` — Project-Scoped CLI (Highest Priority)

Initialize `package.json`

Run the command using `npx`

Step 2: Local `node_modules/.bin` (Preferred Execution)

🛠 How It Works: The `%c` Formatter