React BTS: First Time Setup & Guide

Oct 30, 2025 by Jhon Lennon 36 views

Alright, guys! So you're diving into the world of React and want to use BTS (likely referring to a build toolchain or maybe something else within your project)? Awesome! Getting started can feel a bit overwhelming, but don't sweat it. This guide will walk you through the initial setup, ensuring you're up and running smoothly. We'll cover everything from the basic prerequisites to creating your first React component. Let's get this show on the road!

Prerequisites

Before we jump into the code, let's make sure you have a few things installed. These are the fundamental tools you'll need to build and run your React application. Think of it as gathering your ingredients before you start cooking up a delicious web app.

Node.js and npm (or yarn)

First up, you'll need Node.js. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a browser. It's essential for running build tools and development servers. Along with Node.js comes npm (Node Package Manager), which is used to install and manage packages (libraries and tools) for your project. Alternatively, you can use yarn, which is another package manager that offers some performance improvements over npm.

Why do we need this? Great question! React itself is a JavaScript library, and the tools we use to build React applications (like webpack or Parcel) run on Node.js. Also, npm (or yarn) lets us easily add cool stuff like React Router or Material-UI to our project.

To install Node.js, head over to the official Node.js website (https://nodejs.org/) and download the LTS (Long Term Support) version. The LTS version is generally more stable and recommended for most users. Once downloaded, run the installer and follow the on-screen instructions. npm usually comes bundled with Node.js, so you should have it automatically. To check if Node.js and npm are installed correctly, open your terminal or command prompt and type:

node -v
npm -v

This should display the version numbers of Node.js and npm, respectively. If you prefer to use yarn, you can install it globally using npm:

npm install -g yarn

Then, check its version with:

yarn -v

Text Editor

You'll also need a good text editor or IDE (Integrated Development Environment) to write your code. There are many great options available, each with its own set of features and benefits. Some popular choices include:

Visual Studio Code (VS Code): A free, lightweight, and highly customizable editor with excellent support for JavaScript and React development.
Sublime Text: A fast and powerful editor with a clean interface and a wide range of plugins.
Atom: A hackable editor built by GitHub, offering a high degree of customization.
WebStorm: A commercial IDE specifically designed for web development, with advanced features like code completion and debugging.

Choose the editor that best suits your preferences and coding style. VS Code is a solid choice for beginners due to its ease of use and extensive ecosystem of extensions.

Creating a New React Application

Now that we have our prerequisites in place, it's time to create a new React application. The easiest way to do this is by using Create React App, a tool developed by Facebook that sets up a new React project with a sensible default configuration. It handles all the complex build configurations behind the scenes, allowing you to focus on writing code.

To create a new React application, open your terminal or command prompt, navigate to the directory where you want to create your project, and run the following command:

npx create-react-app my-app

Replace my-app with the desired name for your application. This command will create a new directory with the specified name and set up a basic React project inside it. The npx command ensures that you're using the latest version of Create React App without installing it globally.

Once the command finishes, navigate into your new project directory:

cd my-app

Now you can start the development server by running:

npm start

This will start a local development server and open your new React application in your web browser. You should see the default React welcome page. Congratulations, you've successfully created your first React application!

Understanding the Project Structure

Let's take a look at the structure of the project created by Create React App. Understanding the different files and directories will help you navigate and modify your application effectively.

node_modules: This directory contains all the installed npm packages (dependencies) for your project. You usually don't need to modify anything inside this directory.
public: This directory contains static assets like index.html, which is the main HTML file for your application, and favicon.ico, which is the icon displayed in the browser tab.
src: This directory contains the source code for your React application. This is where you'll be spending most of your time.
- index.js: This is the entry point of your application. It renders the main React component (App) into the DOM.
- App.js: This is the main component of your application. It contains the initial UI and logic.
- App.css: This file contains the CSS styles for the App component.
- index.css: This file contains global CSS styles for the entire application.

Writing Your First React Component

Now let's modify the App.js file to create our own React component. Open src/App.js in your text editor and replace the existing code with the following:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
        <p>My first React component.</p>
      </header>
    </div>
  );
}

export default App;

This code defines a functional component called App. A component is a reusable piece of UI that can be rendered in your application. In this case, the App component returns a div element containing a heading (h1) and a paragraph (p).

Save the file and refresh your browser. You should see the "Hello, React!" message displayed on the page. You've successfully modified your first React component!

Explanation:

import React from 'react';: This line imports the React library, which is necessary for creating React components.
import './App.css';: This line imports the CSS styles for the App component.
function App() { ... }: This defines a functional component called App. A functional component is a JavaScript function that returns JSX (JavaScript XML), which is a syntax extension that allows you to write HTML-like code in your JavaScript files.
return ( ... );: This returns the JSX code that will be rendered by the component.
<div className="App"> ... </div>: This is a JSX element representing a div element with the class name "App".
<header className="App-header"> ... </header>: This is a JSX element representing a header element with the class name "App-header".
<h1>Hello, React!</h1>: This is a JSX element representing a heading element.
<p>My first React component.</p>: This is a JSX element representing a paragraph element.
export default App;: This exports the App component, making it available for use in other files.

Styling Your React Component

Let's add some styles to our React component to make it look more appealing. Open src/App.css in your text editor and replace the existing code with the following:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

This code defines some CSS styles for the App and App-header classes. The App class centers the text within the component, and the App-header class sets the background color, height, display, and font size of the header.

Save the file and refresh your browser. You should see the styles applied to your React component.

What's Next?

Congratulations, you've successfully set up a React application and created your first React component! From here, the possibilities are endless. You can start exploring other React concepts like components, props, state, and events. You can also add more complex UI elements and interactions to your application.

Here are some resources to help you continue your React journey:

React Official Documentation: https://reactjs.org/docs/getting-started.html
Create React App Documentation: https://create-react-app.dev/docs/getting-started/
React Tutorial: https://reactjs.org/tutorial/tutorial.html

Keep practicing and experimenting, and you'll be building amazing React applications in no time! Good luck, and happy coding!

Remember to explore different libraries and frameworks that complement React, such as Redux for state management, React Router for navigation, and Material-UI or Ant Design for UI components. The React ecosystem is vast and constantly evolving, so there's always something new to learn.

By following this guide, you've laid a solid foundation for your React development journey. Embrace the challenges, celebrate the victories, and never stop learning. The world of web development awaits, and React is your key to unlocking its potential. Happy coding!