MERN Stack Lesson 1 | React සිංහලෙන් Part 1 | React Sinhala

Welcome to the first lesson of MERN Stack with React in Sinhala! In this lesson, we will be introducing the basics of React and how to create a simple React component.

What is MERN Stack?

MERN Stack stands for MongoDB, Express, React, and Node.js. It is a popular and powerful stack for building modern web applications. React is the frontend framework in the MERN Stack, and it allows developers to create dynamic user interfaces with ease.

Introduction to React

React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of an application efficiently. React uses a virtual DOM to optimize performance, and it is widely used in the industry for building single-page applications.

Creating a Simple React Component

Let’s start by creating a simple React component. We will create a component that displays a “Hello, World!” message on the screen.

“`jsx
import React from ‘react’;

class HelloWorldComponent extends React.Component {
render() {
return (

);
}
}

export default HelloWorldComponent;
“`

In this code snippet, we are creating a class component called `HelloWorldComponent`. The `render` method returns a JSX element that displays the “Hello, World!” message. We then export the component to be used in other parts of our application.

Conclusion

That’s it for the first part of our React lesson in Sinhala. We have introduced the basics of React and created a simple React component. In the next lesson, we will dive deeper into React and explore more advanced concepts.