How to Get Started with React: A Step-by-Step Guide for Beginners

React is a JavaScript library created by Facebook to build user interfaces with reusable components. To create your first app, you just need Node.js installed and to run a command in the terminal — this guide shows each step, from the environment to the build.

• What is React?
• Prerequisites for learning React
• How to create your first React app?
• Is Create React App still worth it in 2026?
• npx, npm, or Yarn: which to use to create the project?
• Create React App templates
• React project file structure
• Conclusion

What is React?

React is an open-source library for building user interfaces on the web, maintained by Meta (formerly Facebook) and used in production since 2013. Instead of manipulating the DOM (Document Object Model) manually, the developer describes the interface in declarative components, and React updates the screen efficiently through the Virtual DOM — an in-memory representation that minimizes costly browser operations.

React dominates front-end development: according to the Stack Overflow Developer Survey 2025, 44.7% of developers worked with React in the last year, the highest index among interface libraries and frameworks — in the web technologies category, only Node.js appears ahead, with 48.7%.

React components are written in JSX (JavaScript XML), a syntax that combines HTML-like markup with JavaScript logic in the same file. This component-based approach simplifies code reuse: a button, a form, or a product card is defined once and used anywhere in the application. It is this combination of productivity, performance, and a mature ecosystem that makes React the most common starting point for those entering modern web development.

Prerequisites for learning React

Learning React requires three foundations: HTML, CSS, and JavaScript. Since JSX mixes markup and logic, solid knowledge of semantic HTML and JavaScript is essential for writing components and diagnosing problems — here at CodeCrush you can find a selection of sites to practice JavaScript before taking this step.

In addition, you need:

1. Node.js 14 or higher installed on the development machine (not required on the production server). Node.js provides the environment that runs the build tools.
2. Basic familiarity with the terminal: navigating between folders and running commands is enough for this guide.
3. A code editor, such as VS Code, with JavaScript support.

To switch between Node versions in different projects, use nvm (macOS/Linux) or nvm-windows (Windows). This flexibility avoids conflicts when an old project requires a specific version of Node.js.

How to create your first React app?

Follow these steps to have a React app running locally in a few minutes:

1. Install Node.js 14 or higher and confirm the installation with node -v in the terminal.
2. Run the creation command: npx create-react-app my-app generates the complete project in the my-app folder.
3. Enter the project directory with cd my-app.
4. Start the development server with npm start.
5. Open http://localhost:3000 in the browser to see the app running, with automatic reload on every change.
6. Generate the production bundle with npm run build when you are ready to publish: the result is minified and optimized.

In short:

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

You do not need to install or configure tools like webpack or Babel: they come pre-configured and hidden, so the focus stays on the code. If at any point you installed create-react-app globally via npm install -g create-react-app, uninstall it with npm uninstall -g create-react-app — this ensures npx always downloads the latest version of the package.

Is Create React App still worth it in 2026?

Create React App (CRA) is no longer recommended for new projects. In an official announcement on February 14, 2025, the React team stated: "Today, we're deprecating Create React App for new apps". The official recommendation became a complete framework or a modern build tool like Vite.

Why learn the CRA commands then? Because thousands of projects in maintenance still use it, most classic tutorials reference it, and the concepts — folder structure, scripts, development server — are the same in modern tools. The reason for the deprecation is practical: CRA does not offer native solutions for routing, data fetching, and code splitting, common needs of real applications in production. Learn the flow with this guide and, when starting a new professional project, apply exactly the same concepts with Vite or Next.js.

npx, npm, or Yarn: which to use to create the project?

The three commands produce the same result; the choice depends on the package manager you already use day to day. The npx runner downloads and runs the package without global installation, while npm and Yarn are full managers — the differences between them are detailed in our guide on npm, Yarn, and pnpm package managers. The Create React App CLI (Command Line Interface) installs dependencies with npm or Yarn according to the tool used at creation.

npx

npx create-react-app my-app

npx is available from npm 5.2.

npm

npm init react-app my-app

npm init <initializer> is available from npm 6.

Yarn

yarn create react-app my-app

yarn create is available from Yarn 0.25.

Create React App templates

Templates let you start an app from a ready-made model by adding --template [template-name] to the creation command:

npx create-react-app my-app --template [template-name]

Without an explicit template, the project is created with the base JavaScript model. Template packages follow the cra-template-[template-name] format, but only [template-name] is passed in the command. The Create React App custom templates documentation describes how to build and publish your own model.

How to create a React app with TypeScript?

To start a project with TypeScript, add --template typescript to the creation command:

npx create-react-app my-app --template typescript

The TypeScript template generates files with the .tsx extension and the type configuration ready, with no manual adjustment.

React project file structure

The creation command generates a my-app directory with the project initial structure and all dependencies installed:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

The public folder holds the static files served directly (such as index.html), and the src folder concentrates the application code — it is there that you spend most of your time, starting with the App.js component. No extra configuration or complicated folder structures: just the files needed to build the app.

Which scripts come configured?

The newly created project includes built-in commands in package.json:

npm start   # or yarn start

npm start runs the app in development mode at http://localhost:3000, with automatic reload on every saved change. npm run build, mentioned in the previous steps, generates the minified production version in the build folder.

Conclusion

Creating your first React app is the easy part — a command in the terminal does it. What separates beginners from professionals is what comes after: understanding components, props, and state, and knowing how to choose the right tool for each context. In 2026, this means using this flow to learn the fundamentals, but starting new projects with Vite or Next.js, as the React team itself advises. Practice by recreating interfaces you use every day: fluency in React comes from repetition, not from reading.