Creating a React Application

Methods to Create a React App

1. Using Create React App (CRA)

The official and recommended way for beginners:

npx create-react-app my-app
cd my-app
npm start

Key Features:

Preconfigured Webpack and Babel
Development server with hot reloading
Jest testing framework
Production-ready build scripts

2. Using Vite

Modern alternative with faster development experience:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Advantages:

Instant server start
Lightning fast HMR (Hot Module Replacement)
Optimized production builds
Out-of-the-box TypeScript support

3. Manual Setup

For complete control over configuration:

Initialize project: npm init -y
Install React: npm install react react-dom

Install dev dependencies:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server css-loader style-loader babel-loader html-webpack-plugin

Configure Webpack and Babel
Set up scripts in package.json

Project Structure Walkthrough

my-react-app/
├── node_modules/       # All dependencies
├── public/            # Static files
│   ├── index.html     # Main HTML template
│   └── favicon.ico   # App icon
├── src/               # Application source
│   ├── App.js        # Root component
│   ├── index.js      # Entry point
│   ├── styles/       # CSS files
│   └── components/   # Reusable components
├── package.json      # Project configuration
└── README.md        # Project documentation

Best Practices:

Keep components small and focused
Organize by feature rather than file type
Use consistent naming conventions
Separate business logic from presentation

Customizing the Setup

Adding TypeScript

# For CRA
npx create-react-app my-app --template typescript

# For existing project
npm install --save typescript @types/react @types/react-dom

Adding CSS Preprocessor

npm install --save sass

Then rename CSS files to .scss/.sass

Adding Routing

npm install react-router-dom

Building for Production

# Create optimized build
npm run build

# Serve the production build locally
npm install -g serve
serve -s build

Production Tips:

Analyze bundle size with source-map-explorer
Implement code splitting
Use environment variables for configuration
Set up proper caching headers

React Application Interview Questions

1. What are the different ways to create a React application?

The main methods are:

Create React App (CRA): Official boilerplate with zero configuration
Vite: Modern build tool with faster development experience
Manual setup: Configuring Webpack and Babel manually
Framework-specific: Next.js, Gatsby, or other React frameworks

2. What is the purpose of the package.json file in a React project?

The package.json file:

Lists all project dependencies
Contains scripts for development and build processes
Defines project metadata (name, version, etc.)
Specifies which version of Node.js is required

3. How do you eject from Create React App?

npm run eject

This command:

Copies all configuration files to your project
Removes the single build dependency
Allows full customization of build tools
Warning: This operation is irreversible

4. What is the difference between development and production builds in React?

Development Build	Production Build
Includes helpful warnings	Minified and optimized
Slower performance	Faster execution
Source maps for debugging	No source maps (unless configured)
Hot reloading enabled	Static files ready for deployment

5. How would you add environment variables to a React project?

In Create React App:

Create a .env file in the root

Prefix variables with REACT_APP_:

REACT_APP_API_URL=https://api.example.com

Access in code via process.env.REACT_APP_API_URL

Note: You must restart the dev server after adding new variables.

6. What are the key files in a basic React application and their purposes?

public/index.html - Main HTML template
src/index.js - JavaScript entry point
src/App.js - Root React component
package.json - Project configuration
.gitignore - Specifies untracked files

7. How would you upgrade React to a newer version?

To safely upgrade React:

# Check current versions
npm list react react-dom

# Update to latest version
npm install react@latest react-dom@latest

Additional steps:

Check the React blog for breaking changes
Review deprecated APIs being used in your code
Test thoroughly after upgrading

8. What are the differences between Create React App and Vite?

Create React App	Vite
Uses Webpack under the hood	Uses esbuild and Rollup
Slower server start	Instant server start
Traditional bundling	Native ES modules
More established	Newer but growing fast

9. How would you add React Router to an existing React application?

Installation:

npm install react-router-dom

Basic setup in index.js:

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Then define routes in your components using Routes and Route components.

10. What are some common performance optimizations for React applications?

Code splitting: Using React.lazy and Suspense
Memoization: React.memo, useMemo, useCallback
Virtualization: For long lists (react-window or react-virtualized)
Bundle analysis: Identify large dependencies
Image optimization: Compress and lazy load images
Server-side rendering: For faster initial load

← React Architecture React Hooks →

ReactJS Tutorial