ReactJS - Creating a React Application

Hello there, future React developers! I'm thrilled to guide you through the exciting journey of creating your very first React application. As someone who's been teaching computer science for years, I can assure you that React is not only powerful but also fun to learn. So, let's dive in!

What is React?

Before we start coding, let's understand what React is. React is a popular JavaScript library for building user interfaces. It was developed by Facebook and is now used by many big companies like Netflix, Instagram, and Airbnb. Think of React as a set of Lego blocks that you can use to build complex web applications easily.

Getting Started

To create a React application, we need a few tools. Don't worry if you've never used these before - we'll go through each step together!

Prerequisites

Node.js and npm (Node Package Manager)
A code editor (I recommend Visual Studio Code)

If you haven't installed these yet, take a moment to do so. It's like preparing your kitchen before cooking a delicious meal!

Using Rollup bundler

Let's start with creating a React application using Rollup. Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex.

Step 1: Setting up the project

First, let's create a new directory for our project and initialize it:

mkdir my-react-app
cd my-react-app
npm init -y

This creates a new folder and initializes a new Node.js project. It's like laying the foundation of our house!

Step 2: Installing dependencies

Now, let's install the necessary packages:

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

Don't be overwhelmed by these long names. Think of them as ingredients for our React recipe!

Step 3: Creating the configuration files

Let's create two important files:

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    resolve(),
    commonjs(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    babel({
      presets: ['@babel/preset-react'],
    }),
    terser(),
  ],
};

This file tells Rollup how to bundle our application. It's like giving instructions to a chef on how to prepare a dish.

.babelrc:

{
  "presets": ["@babel/preset-react"]
}

This file configures Babel, which helps translate modern JavaScript into a version that older browsers can understand.

Step 4: Creating our React components

Now, let's create our first React component! Create a new file src/App.js:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to my first React application!</p>
    </div>
  );
}

export default App;

This is our main component. It's like the star of our show!

Next, create src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

This file is responsible for rendering our App component into the HTML.

Step 5: Creating the HTML file

Create a new file public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="../dist/bundle.js"></script>
</body>
</html>

This is where our React application will be mounted.

Step 6: Adding scripts to package.json

Update your package.json to include these scripts:

"scripts": {
  "build": "rollup -c",
  "start": "rollup -c -w"
}

These scripts will help us build and run our application.

Step 7: Building and running the application

Now, let's bring our creation to life! Run:

npm run build

This will create our bundled JavaScript file. To view your app, open public/index.html in a web browser. Congratulations! You've just created your first React application using Rollup!

Using Parcel bundler

Now that we've seen how to use Rollup, let's try another popular bundler: Parcel. Parcel is known for its zero-configuration approach, making it super easy to get started.

Step 1: Setting up the project

Let's create a new project:

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

Step 2: Installing dependencies

Install React and Parcel:

npm install react react-dom
npm install --save-dev parcel-bundler

Step 3: Creating our React components

Create src/App.js:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React with Parcel!</h1>
      <p>This app was bundled with Parcel.</p>
    </div>
  );
}

export default App;

Create src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 4: Creating the HTML file

Create src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Parcel React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>
</html>

Notice how we're directly linking to our index.js file. Parcel will take care of the bundling for us!

Step 5: Adding scripts to package.json

Update your package.json:

"scripts": {
  "start": "parcel src/index.html",
  "build": "parcel build src/index.html"
}

Step 6: Running the application

Now, let's start our application:

npm start

Parcel will automatically open your app in a browser. Any changes you make will be instantly reflected!

To build for production:

npm run build

This will create optimized files in the dist directory.

Comparing Rollup and Parcel

Here's a quick comparison of the two bundlers we've used:

Feature	Rollup	Parcel
Configuration	Requires configuration file	Zero-configuration
Speed	Fast	Very fast
Bundle size	Generally smaller	Slightly larger
Learning curve	Steeper	Gentle
Flexibility	Highly customizable	Less customizable

Both bundlers have their strengths, and the choice between them often depends on the specific needs of your project.

Conclusion

Congratulations! You've now created React applications using both Rollup and Parcel. Remember, the journey of a thousand miles begins with a single step, and you've just taken your first steps into the exciting world of React development.

As you continue to learn and grow, you'll discover that React opens up a whole new world of possibilities in web development. It's like learning to paint - at first, you might struggle with basic shapes, but soon you'll be creating masterpieces!

Keep practicing, stay curious, and most importantly, have fun! React is a powerful tool, but it's also a joy to use. Happy coding!

Credits: Image by storyset

Previous Tutorial:

ReactJS - Architecture

Next Tutorial:

ReactJS - JSX