Getting Started with React

Welcome to the React.js Masters course! In this section, we will guide you through the process of setting up your development environment and creating your first React application.

Prerequisites

Before you begin, ensure you have the following prerequisites:

• Node.js: React requires Node.js to run. You can download and install it from Node.js official website.
• npm or Yarn: Node Package Manager (npm) or Yarn will be used to manage dependencies. npm is installed with Node.js. You can install Yarn from Yarn's official website.

Setting Up Your Development Environment

To create a new React application, we will use the Create React App tool, which sets up everything you need to start coding in React.

For detailed installation instructions, refer to the Installation Guide.

Quick Setup Instructions

Step 1: Create a New React Application

Create a new React application by running:

npx create-react-app my-first-app

Replace my-first-app with the name of your project. This command will create a new directory with the same name, initialize a new React project, and install the required dependencies.

Step 2: Navigate to Your Project Directory

Change into your project directory:

cd my-first-app

Step 3: Start the Development Server

Start the development server to see your new React application in action:

npm start

This command will open your default web browser and navigate to http://localhost:3000, where you will see the default React welcome page.

Project Structure

After creating your project, you will see a file structure like this:

my-first-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── ... logo.svg, reportWebVitals.js, setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock or package-lock.json

• node_modules/: Contains all the npm packages that your project depends on.
• public/: Public folder in a React application is used for storing static assets like HTML, images, and configuration files. Directory containing static assets to be served as-is to the client.
  • index.html: The main HTML file serving as the entry point of the application, where the React app is mounted.
  • favicon.ico: The icon file displayed in the browser tab or bookmark bar, representing the application.
• src/: Contains the React components and other source code.
  • App.css: CSS file containing styles specific to the App component.
  • App.js: JavaScript file defining the main App component.
  • App.test.js: Test file for testing the App component.
  • index.css: CSS file containing global styles for the application.
  • index.js: JavaScript file serving as the entry point of the application, where ReactDOM renders the main App component.
  • logo.svg: SVG file, typically used for the logo of the application.
  • reportWebVitals.js: JavaScript file used for reporting web vitals like performance metrics.
  • setupTests.js: JavaScript file for setting up testing environment configurations.
• .gitignore: Specifies intentionally untracked files to ignore, preventing them from being included in the version control system.
• package.json: Metadata file for the Node.js project, containing project information, dependencies, scripts, and other configurations.
• README.md: Markdown file providing information about the project, including its purpose, installation instructions, usage, and other relevant details.
• yarn.lock or package-lock.json: Lock file automatically generated by package managers (Yarn or npm, respectively) to lock dependencies to specific versions, ensuring consistent installs across different machines.

Your First React Component

Now, let's create a simple React component. Open src/App.js and replace its content with the following:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  );
}

export default App;

Save the file, and you should see the changes reflected in your browser.

Congratulations! You've successfully set up your development environment and created your first React application.