Introduction to React

Posted on by Panther

React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components that can be used to build rich and interactive web applications. React was developed by Facebook and is used by many big companies such as Netflix, Instagram, and Dropbox.

In this tutorial, we will cover the basics of React and show you how to get started building your own React applications.

Getting started with React

Before we dive into building our first React application, let’s do a quick overview of what we need to set up.

Installation

First, we need to install Node.js on our computer. Node.js is a JavaScript runtime that allows us to run JavaScript code outside of the browser. It is required to use React and many other JavaScript libraries.

You can download the latest version of Node.js from the official website:

https://nodejs.org/en/download/

Once Node.js is installed, we can use the npm command to install React:

npm install react

We will also need a package manager such as npm or yarn to manage our project dependencies. Here, we will use npm. You can install npm by running the following command in your terminal:

npm install npm@latest -g

Create a React project

Once we have npm installed, we can create a new React project by running the following command:

npx create-react-app my-app

This will create a new React project called my-app in our current directory. It will also automatically install all required dependencies and set up a basic project structure.

Project structure

When we open our project in a code editor, we will see the following folder structure:

my-app/
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ node_modules/
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ public/
โ”‚   โ”œโ”€โ”€ favicon.ico
โ”‚   โ”œโ”€โ”€ index.html
โ”‚   โ””โ”€โ”€ manifest.json
โ””โ”€โ”€ src/
    โ”œโ”€โ”€ App.css
    โ”œโ”€โ”€ App.js
    โ”œโ”€โ”€ App.test.js
    โ”œโ”€โ”€ index.css
    โ”œโ”€โ”€ index.js
    โ””โ”€โ”€ logo.svg

public/index.html: This is the main HTML file for our project. It contains the root div element where we will render our React components.

src/index.js: This is the entry point for our React application. It sets up the React app and renders our main App component.

src/App.js: This is where we will create our main App component. We will build our UI by composing multiple other components.

Building a Simple Counter Component

Now that we have our project set up and we understand the file structure, let’s create our first React component.

In this section, we will create a simple counter component that increments its value every time we click on a button.

Step 1: Update App.js

In our src/App.js file, we will replace the code with the following:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

Let’s break down the code:

First, we import React and useState from the react library. useState is a hook that allows us to add state to our functional components.

import React, { useState } from 'react';

Next, we define our App component. It returns a div element containing a header with the current count and a button to increment the count.

function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Inside our App component, we define a state variable called count using the useState hook. The initial value of count is 0.

const [count, setCount] = useState(0);

We also define a function called increment that updates the count state variable whenever the button is clicked.

const increment = () => {
  setCount(count + 1);
};

Finally, we render the div element containing our header and button, passing the count and increment variables as props.

return (
  <div className="App">
    <h1>Counter: {count}</h1>
    <button onClick={increment}>Increment</button>
  </div>
);

Step 2: Start the application

To start our application, we need to run the following command in our terminal:

npm start

This will start a development server and launch our application in the browser. If everything is set up correctly, we should see our counter component rendered on the screen.

Step 3: Test the component

To test our component, we can click on the increment button and verify that the count is increasing. We can also inspect the component in the browser dev tools and see how the state is changing.

Conclusion

In this tutorial, we learned the basics of React and how to build a simple counter component. We covered topics such as installation, project structure, component creation, and state management.

React is a powerful tool for building modern web applications. It allows developers to create reusable UI components that can be easily composed to build complex user interfaces.

We hope this tutorial has given you a good introduction to React and inspired you to explore its capabilities further. Happy coding!

Related Post