Create React App: with npm, npx and yarn

Introduction

The world of web development is full of possibilities and React is a powerful JavaScript library for building dynamic and interactive user interfaces. Create React App is perfect starting point ! In this comprehensive guide, we’ll walk through everything you need to know to kickstart your React journey with npm, npx and yarn setup.

What is Create React App?

Create React App is a tool built which help Frontend developers quickly build a new React application. It provides a pre-configured environment with all necessary tools pre-installed, including Babel for modern JS features, Webpack for tie together your code, and ESLint for catching errors early on. With create React App, you can focus on writing code and building features instead of focusing on configuration and basic code.

Getting Started with Create React App

You can create React app in three different ways:

npm init react-app my-app

Method #2: Using npx (Recommended for Beginners)

npx comes bundled with npm versions 5.2 and above, so you don’t need to install any additional tools.

1. Open your terminal and navigate to the directory where you want to create the project.
2. Run the following command, replacing my-app with your designed project name

npx create-react-app my-app

Method #3: Using yarn

1. Ensure you have Yarn as a package manager installed on your system. If you don’t have, download them from the official Yarn website https://classic.yarnpkg.com/lang/en/docs/install/
2. Open your terminal or command prompt and navigate to the directory where you want to create the project.
3. Run the following command, replacing my-app with your designed project name:

yarn create react-app my-app

Exploring the Project Structure

Once your project is set up, take a moment to familiarize yourself with the project structure:

npm and Yarn

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── index.js
│   ├── App.js
│   ├── components/
│   │   └── Header.js
│   ├── styles/
│   │   └── styles.css
│   └── assets/
│       └── images/
│           └── logo.png
├── package.json
└── README.md

npx

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── index.js
│   ├── App.js
│   ├── components/
│   │   └── Header.js
│   ├── styles/
│   │   └── styles.css
│   └── assets/
│       └── images/
│           └── logo.png
└── README.md

• public/: This directory contains the HTML file and other assets like images, that are publicly accessible.
• src/: All of your React components and JavaScript files will live here.
• package.json: This file holds metadata about your project and dependencies.
• node_modules/: This directory contains all the project’s dependencies.

Running Your React App

Now that your project is set up. Navigate to your project directory and run the following command:

npm start

(If you used Yarn, the command would be yarn start)

This command starts the development server, which typically runs on http://localhost:3000 by default.

Exploring the src Folder: Building your app

The src folder is where the real development happens. It has all the essential components that set up your React application. Let’s delve into some key elements within this folder:

Components:

React applications are built upon reusable components. each component is a self contained unit responsible for rendering a specific part of the UI. You can create multiple components to represent different sections of your app like the header and login form.

For example, let’s create a Header.js component:

// Header.js
import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Welcome to My App</h1>
    </header>
  );
}

export default Header;

Styles:

You can style your React Components using CSS, Sass or any other CSS-in-JS solution. It provides you with the options to choose your preferred styling.

For example, you can create a styles.css file and import it into your components:

/* styles.css */
header {
  background-color: #333;
  color: white;
  padding: 20px;
}
h1 {
  margin: 0;
}

App.js:

This file serves as the entry point for your application. It typically renders the main component that defines the overall structure of your app.

// App.js

import React from 'react';
import Header from './Header';
import './styles.css';

const App = () => {
  return (
    <div>
      <Header />
      {/* Other components */}
    </div>
  );
}

export default App;

Useful Dependencies to Create React App:

When setting up a React app, you’ll need to install essential dependencies to build and run your application effectively.

• React: The core library for building React applications.
• ReactDOM: Responsible for rendering React components in the DOM.
• Babel: A JavaScript compiler that enables the use of modern JavaScript features and JSX syntax.
• Webpack: A module bundler for compiling and bundling JavaScript files, CSS, and other assets.
• ESLint: A static code analysis tool for identifying and reporting patterns in JavaScript code.

If using npm (Node Package Manager):

npm install react react-dom @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli eslint --save-dev

If using yarn:

yarn add react react-dom @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli eslint --dev

Conclusion

Congratulations! You’ve successfully set up your first React project using Create React App. From here, the sky’s the limit. Experiment with different components, explore third-party libraries, and start building amazing web applications. Happy coding!

Remember: The React ecosystem is vast and constantly evolving. Stay curious, explore the official React documentation https://legacy.reactjs.org/docs/getting-started.html, experiment with different libraries and tools, and actively engage with the vibrant React community. With dedication and practice, you’ll be building amazing React applications in no time!

Stay tuned every Tuesday for fresh insights into frontend topics, because keeping up with the latest in web development has never been more exciting!