React Must Know Topics

React is a declarative, component based javascript library for building user interfaces. Its primary goal is to divide the UI into a collection of components. React only chose to implement the View layer instead of the full MVC stack.

Here we discuss few must know topics of react.

JSX

const element = <h1>Hello, world!</h1>

Here, the h1 tag syntax is neither a string nor HTML.

It is called JSX (JavaScript XML). JSX is optional in react. You can also write html code instead of JSX. It allows you to working with UI inside the JavaScript code.

JSX produces React elements.

Embedding Expressions in JSX

// exp = variable or function or JS expressions
const exp = "Wrold"
const element = <h1>Hello, {exp}</h1>

ReactDOM.render(element, document.getElementById("root"))

JSX is an Expression Too

You can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>
  }
  return <h1>Hello, Stranger.</h1>
}

React DOM uses camelCase property naming convention instead of HTML attribute names.

For example, class becomes className in JSX, and tabindex becomes tabIndex.

Elements

Elements are the smallest building blocks of React apps.

An element describes what you want see on the screen:

const element = <h1>Hello, world</h1>

Components and Props

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

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

const element = <Welcome name="Sara" />

ReactDOM.render(element, document.getElementById("root"))

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

All React components must act like pure functions with respect to their props.