An Intro to REACT with and without JSX

Introduction

React is a versatile JavaScript library, developed and maintained by Facebook, used to build dynamic and interactive user interfaces. It’s primarily used for creating single-page applications, giving developers the tools to create fast and immersive web experiences.

One cornerstone of React is that it handles only the view layer of an application, thereby making it less complex and more flexible to integrate with various libraries. React encapsulates interface elements into reusable components, minimizing redundancy and offering a clean and manageable codebase.

This guide presumes you have basic knowledge of JavaScript. If you’re new to JavaScript, it’s recommended you familiarize yourself with it first, before diving into React. With that in mind, let’s delve into the fundamental concepts of React!

React Basics

Components

JSX

JSX, a syntax extension for JavaScript, bears resemblance to HTML. Though not mandatory, it enhances the readability of React code and makes writing React more straightforward. If you would like to include JSX, please follow our guide.

JSX Install Guide

Linux – Windows – MacOS

Example

Here’s an example of how JSX makes rendering HTML lists more readable:

React with JSX:

class ShoppingList extends React.Component {
  render() {
    return (
      <div>
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }

Equivalent JavaScript without JSX:

class ShoppingList extends React.Component {
  render() {
    return React.createElement('div', {},
      React.createElement('h1', {}, `Shopping List for ${this.props.name}`),
      React.createElement('ul', {},
        React.createElement('li', {}, 'Instagram'),
        React.createElement('li', {}, 'WhatsApp'),
        React.createElement('li', {}, 'Oculus')
      )
    );
  }
}

Components form the bedrock of React applications. A component is a self-sufficient module of code that generates HTML using a render method. Here’s an example of a basic React component:

React with JSX:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Equivalent JavaScript without JSX:

class Welcome extends React.Component {
  render() {
    return React.createElement('h1', null, `Hello, ${this.props.name}`);
  }
}

Props

Props serve as the medium for data flow between components. If you need to share data from one component to another, you use props. Here’s how you could use the Welcome component and pass it a prop:

React with JSX:

<Welcome name="Sara" />

Equivalent JavaScript without JSX:

React.createElement(Welcome, {name: 'Sara'})

State

State refers to the data a component maintains and can change. State resembles props, but it is private to the component. Here’s an example of a component with state:

React with JSX:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Equivalent JavaScript without JSX:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return React.createElement('div', {},
      React.createElement('h1', {}, 'Hello, world

!'),
      React.createElement('h2', {}, `It is ${this.state.date.toLocaleTimeString()}.`)
    );
  }
}

React’s main premise is that the UI is a function of the state. When the state updates, React automatically refreshes the relevant parts of the UI. This principle results in an effective and declarative code.

These fundamental concepts form the backbone of React. They provide a strong basis from which you can further explore more advanced topics like Hooks, Context, Lifecycle methods, and so forth. Happy coding!