Some Random Notes

Component

2 min read

Definition

Component

Each React component is a JavaScript function

  • that may contain (/ return ??) some markup that React renders into the browser
  • React components use a syntax extension called JSX to represent that markup

From Docs

A React component is a JavaScript function that you can sprinkle with markup.

  • Reusable
  • Building blocks of user interface
  • allow you to build self-contained, reusable snippets of code.
  • This modularity allows your code to be more maintainable as it grows because you can add, update, and delete components without touching the rest of our application.
  • The nice thing about React components is that they are just JavaScript
  • In React, components are functions that return UI elements.
  • React components are regular JavaScript functions, but **their names must start with a capital letter** or they won’t work!
  • To render this component to the DOM, pass it as the first argument in the root.render() method:
  • First, React components should be capitalized to distinguish them from plain HTML and JavaScript:
  • Second, you use React components the same way you’d use regular HTML tags, with angle brackets <>:
  • you can define a component once, and then use it in as many places and as many times as you like.
  • In a React app, every piece of UI is a component.

Nesting components

As the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.** https://react.dev/learn/writing-markup-with-jsx#jsx-putting-markup-into-javascript

Warning

Components can render other components, but you must never nest their definitions

Why

HTML doesn’t let you create reusable templates. If you wanted to create a new page, you would need to copy and paste the snippet and edit the header and content yourself. This isn’t great if we have a lot of content on our site that shares a lot of similar layout. The smart people who created React also had similar complaints and invented the concept of Components — JavaScript functions that return JSX — to solve the code duplication problem.

In effect, components allow you to write a JavaScript function that takes some data and produces HTML as an output. 

Does react component then contain html tags and css snippet only ? no data ?

Backlinks