Getting started with ReactJS, Tutorial for beginners

ReactJS is a popular JavaScript library for building user interfaces. In this tutorial, we will create a simple ReactJS app that displays a list of tasks.

Step 1: Set up a ReactJS project

To get started with ReactJS, you’ll need to have Node.js and npm installed on your machine. Once you have those, you can create a new ReactJS project using a tool like Create React App. To do this, run the following command in your terminal:

lua

npx create-react-app my-app

This will create a new ReactJS project in a directory called “my-app”.

Step 2: Create a Task Component

In ReactJS, components are the building blocks of your app. We will create a Task component that will display a single task. To do this, create a new file called “Task.js” in the “src” directory and add the following code:

javascript

import React from 'react';

function Task({ task }) {
  return <div>{task.text}</div>;
}

export default Task;

This code defines a simple Task component that takes a task as a prop and returns a div containing the task text.

Step 3: Create a Task List Component

Next, we will create a TaskList component that will display a list of tasks. To do this, create a new file called “TaskList.js” in the “src” directory and add the following code:

javascript

import React from 'react';
import Task from './Task';

function TaskList({ tasks }) {
  return (
    <div>
      {tasks.map((task) => (
        <Task key={task.id} task={task} />
      ))}
    </div>
  );
}

export default TaskList;

This code defines a TaskList component that takes an array of tasks as a prop and returns a div containing a Task component for each task.

Step 4: Update the App Component

Finally, we will update the App component to display our TaskList. Open the “App.js” file in the “src” directory and replace the code with the following:

javascript

import React from 'react';
import TaskList from './TaskList';

function App() {
  const tasks = [
    { id: 1, text: 'Task 1' },
    { id: 2, text: 'Task 2' },
    { id: 3, text: 'Task 3' },
  ];

  return (
    <div className="App">
      <TaskList tasks={tasks} />
    </div>
  );
}

export default App;

This code defines an App component that returns a TaskList component with an array of tasks as a prop.

Step 5: Start the app

Now that we have created our components, we can start the app. To do this, run the following command in your terminal:

sql

npm start

This will start a development server and you should be able to see the list of tasks displayed in your browser.