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

react-hook-form demo

TC39 JavaScript Updates, TypeScript 5.7 Beta, Node.js v20.18.0 and more

#3 How to fetch the store details and print to the fronted using react Next.

Exploring JavaScript's Modern Primitives: BigInt and Symbol