ReactJS - Installation: A Beginner's Guide

Hello there, future React developers! I'm thrilled to be your guide on this exciting journey into the world of ReactJS. As someone who's been teaching computer science for years, I can assure you that learning React is like learning to ride a bicycle – it might seem daunting at first, but once you get the hang of it, you'll be cruising along in no time!

ReactJS - Installation

What is ReactJS?

Before we dive into installation, let's quickly understand what ReactJS is. React is a popular JavaScript library for building user interfaces, particularly for single-page applications. It's all about creating reusable UI components that manage their own state, making it easier to build complex interfaces.

Now, let's get our hands dirty and start setting up React!

Toolchain: Your React Toolkit

When working with React, we use a set of tools called a "toolchain." Think of it as your React Swiss Army knife – it has everything you need to start building amazing web applications.

Essential Tools in Our Toolchain

Tool	Purpose
Node.js	JavaScript runtime
npm (Node Package Manager)	Package manager for JavaScript
Babel	JavaScript compiler
Webpack	Module bundler
ESLint	Code linter
Jest	Testing framework

Don't worry if these terms sound like alien language right now. We'll explore each one as we go along!

The Serve Static Server: Your Local Playground

Before we jump into complex setups, let's start with something simple – a static server. This will allow us to serve our React application locally on our computer.

Setting Up a Simple Static Server

First, make sure you have Node.js installed. You can download it from nodejs.org.
Open your terminal or command prompt and run:

npm install -g serve

This command installs the 'serve' package globally on your system.

Now, create a new directory for your project:

mkdir my-react-app
cd my-react-app

Create a simple HTML file named index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My First React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Now, run the serve command:

serve

Voila! You should see a message telling you where your app is being served. Usually, it's at http://localhost:5000. Open this URL in your browser, and you'll see your first React app!

Babel Compiler: Translating the Future

Remember Babel from our toolchain? It's time to meet this magical translator! Babel is a JavaScript compiler that allows you to use the latest JavaScript features even if browsers don't support them yet.

Why Do We Need Babel?

Imagine you're writing a letter to a friend who speaks a different language. Babel is like having a translator who can instantly convert your letter into your friend's language. In the React world, Babel translates modern JavaScript and JSX (React's syntax extension) into a version of JavaScript that all browsers can understand.

Using Babel in Our Project

We've actually already included Babel in our simple HTML file above. Let's break down that part:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  // Your React code here
</script>

The first line includes the Babel standalone library. The second line tells Babel to compile the code inside the script tag.

Create React App Toolchain: The All-in-One Solution

Now that we've dipped our toes in the React waters, let's dive in with the Create React App toolchain. This is a comfortable, feature-rich environment for learning and building new React single-page applications.

Setting Up Create React App

Open your terminal and run:

npx create-react-app my-app

Once it's done, navigate to your new app:

cd my-app

Start the development server:

npm start

Your new React app should open automatically in your browser, usually at http://localhost:3000.

What's Inside?

Create React App sets up a fully-configured development environment. Let's take a peek at what we get:

Feature	Description
React	The core React library
webpack	Bundles your code and assets
Babel	Compiles modern JavaScript
ESLint	Checks your code for errors
Jest	Allows you to write tests
Hot Reloading	Instantly see your changes in the browser

Your First Component

Let's create a simple React component. Open src/App.js and replace its contents with:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
      <p>This is my first component!</p>
    </div>
  );
}

export default App;

Save the file and check your browser. You should see your new component rendered!

Conclusion

Congratulations! You've just taken your first steps into the exciting world of React development. We've covered a lot of ground – from setting up a simple static server to using the powerful Create React App toolchain.

Remember, learning React is a journey. Don't worry if everything doesn't click immediately. Keep practicing, keep building, and most importantly, keep having fun!

In our next lesson, we'll dive deeper into React components and start building more complex applications. Until then, happy coding!

Credits: Image by storyset

Previous Tutorial:

ReactJS - Introduction

Next Tutorial:

ReactJS - Features