Overview of Components in Reactjs

Tram Ho

Hi guys, I wish you a happy and healthy weekend. Today I will introduce components in reactjs. Don’t let you wait long, let’s start with the article. This article will have 2 parts, part 1 will talk about definitions, components types and simple examples.

1. What is JSX?

  • In ReactJS, JSX still stands for JavaScript XML. Is an extension of JavaScript, used to create and manage user interface elements in web applications. It allows you to write HTML-like code in JavaScript to create UI elements, instead of having to create them using JavaScript functions.
  • For example:

  • With JSX, you can create UI elements using HTML tags just like in regular web pages, but using JavaScript expressions to create dynamic content. JSX also allows you to use HTML attributes, JavaScript expressions, and events like onClick and onSubmit to create interactive UI elements.

2. Components in Reactjs

  • Component is a JavaScript object used to create user interface components. It helps to separate an application into smaller pieces that are easy to manage and reuse.
  • Components are created to help separate an application into smaller, manageable and reusable parts. They can be used to create UI elements like buttons, menus, charts, forms, tables, etc. image.png
  • For example, in the image above, we can divide a web page into smaller components and these components are organized in a tree structure. We can reuse these components on different pages if needed.

3. Types of components in reactjs

  • Functional Components (also known as Stateless Components): Are components written in the form of functions, no state and no lifecycle method of its own.
    • For example:

  • Class Components (also known as Stateful Components) : Are components written in the form of classes, have state and have its own lifecycle methods.

  • Presentational Components: Are components that are only responsible for displaying data, without business logic. They are often referred to as “dumb components”.

  • Container Components: Are components responsible for handling business logic, accessing data and passing it down to Presentational Components. They are often referred to as “smart components”.

  • Above I list some common components and examples of how to use them.

4. Summary

  • Through this article, hopefully everyone has an overview of components in reactjs. Part 2 I will go into more practice.
  • Thank you to everyone who viewed the article. Have a nice weekend everyone. If you have questions about the parts of this article, you can inbox via facebook: https://www.facebook.com/FriendsCode-108096425243996 I will answer questions within my understanding. Thanks everyone!
  • Or contact me via my personal facebook: https://www.facebook.com/Flamesofwars/

5. Reference:

Share the news now

Source : Viblo