Class Component, Functional Component, JSX, Without JSX in React JS

#react #javascript

Theory :

Components: Components are like JavaScript functions. They accept input and return output like other functions. In the output, components describe what should appear on the screen. Components are part of the User Interface. They are reuseable and nested inside other components.

There are two types of Components.
1) Stateless functional components.
2) Stateful Class components.

JSX :
JSX (JavaScript XML ) write XML code for elements and components . It allows us to write HTML in React . JSX tags have a tag name , attributes and children .

Functional Components :

Class Components:

With JSX :

Without JSX :

Top comments (1)

Yamiteru • Mar 7 '22

Hmm what do you think about this syntax?

// Shared
import s from "./article.module.css";

type Article = {
  title: string;
  date: string;
  text: string;
};

type Articles = {
  data: Article[];
};

// Functional

const article: Component<Article> = ({ title, date, text }) => 
  box(s.article, [
    title(s.title, title),
    date(s.date, date),
    text(s.text, text)
  ]);

const articles: Component<Articles> = ({ data }) =>
  box(s.articles, [
    map(data, (v) => article(...v))
  ]);

// JSX
const Article = FunctionComponent<Article> = ({ title, date, text }) => (
  <div className={styles.article}>
    <div className={styles.title}>{title}</div>
   <div className={styles.date}>{date}</div>
   <div className={styles.text}>{text}</div>
  </div>
);

const Articles = FunctionComponent<Articles> = ({ data }) => (
  <div className={styles.articles}>
    { data.map((v) => <Article {...v} />) }
  </div>
);

DEV Community

Class Component, Functional Component, JSX, Without JSX in React JS

Top comments (1)

Read next

Building a Highly Reactive Page in React: A Deep Dive into Gladiator Crash

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

My Deloitte Interview Experience: On-Campus Placement Drive 2024 (Product Engineering Analyst Role)