React - Component (User-defined Element)

About

A component is a user-defined react element in the React tree.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They:

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. See Conditional rendering

Syntax

Functional vs Class

A valid React component:

  • accepts a single props object argument with data and returns a React element.
  • has a name starting with a capital letter (In order to detect a DOM tag from a React tag. For example, <div/> represents a DOM tag, but represents a component and requires Welcome to be in scope.
  • must return a single root element. Generally, a <div> is added to contain all the others element.



The two below syntax's are equivalent:

What is a React Class Component? (in jsx)
class Welcome extends React.Component {

   // Optional. Needed to set state
  constructor(props) {
     super(props); // Always call the base constructor with props.
  }
  
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
  
}

Feature only available to class

Type

Parent/Child

Hierarchy

see React - Tree (Virtual DOM) - Component Hierarchy

Management

Create

Jsx

Element are created generally from a JSX expression that compiles to the What is a React Element? function.

createElement

Note that the jsx function element above is equivalent in Native javascript to:

function Welcome(props) {
  return React.createElement('h1',{}, `Hello, ${props.name}`);
}

where the createElement function permits to create React element (node in the virtual dom tree).

Design: Extracting Components

A good rule of thumb is that if a part of your UI:

  • is used several times (Button, Panel, Avatar),
  • or is complex enough on its own (App, FeedStory, Comment),

it is a good candidate to be a reusable component.

Documentation Creation / Workbench

Documentation of Component and creations testing framework are called Workbench. List of Workbench

Workbench:

Doc:

Libary

Component

Date

Vis

icon

Documentation / Reference





Discover More
Bootstrap - React

for Bootstrap From why-react-bootstrap This two library: are based on the react css file. The Css file can be composed...
CSS - CSS In Js

css in js is the manipulation of css rule completely with the help of javascript. The css is not in a stylesheet but in Javascript code. Css in Js is used mostly to style react components rather than...
Card Puncher Data Processing
D3 - React

D3 in react By using the ref attribute
React Typescript Children Override Error
How to define the React children type in Typescript?

This article will show you how to override/define the type of children of your react component to a specific type. In this example, we have a layout component that expects only buttons as children...
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
How to render a List of React Elements (Component, )?

This page is Loop in React and Jsx. Example with Pure Javascript map is the Reference/Global_Objects/Array/mapArray Map function with an Arrow function as argument Example in React By adding...
Card Puncher Data Processing
MDX (Markdown + JSX)

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. It implements the logic of docs as code and supports arbitrarily-complex JavaScript logic. It allows users to...
Parent Component

A Parent component is a component that encapsulates other components in the react tree. They can manipulate their children by passing / forwarding a ref.
React Render Element Splittsing
React - (Component) Updating

updating is a lifecycle render step that updates a component. An update is triggered by a change of state. See See React DOM compares the new element and its children to the previous one,...



Share this page:
Follow us:
Task Runner