ReactJS - React Without ES6 ECMAScript

Hello there, aspiring programmers! Today, we're going to embark on an exciting journey into the world of ReactJS, but with a twist - we'll be doing it without ES6. Don't worry if you don't know what ES6 is yet; we'll explain everything as we go along. Imagine we're building a time machine to take us back to the early days of React. Ready? Let's dive in!

What is React and Why Are We Learning the "Old" Way?

React is a popular JavaScript library for building user interfaces. It's like LEGO for web developers - you create small, reusable pieces (components) and put them together to build complex applications.

Now, you might be wondering, "Why are we learning React without ES6?" Well, my dear students, it's like learning to drive a manual car before an automatic. It gives you a deeper understanding of how things work under the hood. Plus, you might encounter older codebases that use this syntax, so it's good to be familiar with it.

Create React Class (create-react-class)

In the pre-ES6 world of React, we used something called createReactClass to create components. Let's look at a simple example:

var React = require('react');
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
});

Let's break this down:

1. We're requiring (importing) React and the create-react-class package.
2. We create a component called Greeting using createReactClass.
3. Inside the component, we define a render function that returns JSX (the HTML-like syntax you see).

Now, if we were using ES6, this same component would look like:

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

See the difference? The createReactClass way might seem a bit more verbose, but it has some unique features that we'll explore next.

Set Default Value for Props (getDefaultProps)

In React, we often want to set default values for props. With createReactClass, we use a special method called getDefaultProps. Here's how it works:

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'World'
    };
  },
  render: function() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
});

In this example:

1. We define a getDefaultProps function that returns an object.
2. This object contains default values for our props.
3. If no name prop is provided when using this component, it will default to 'World'.

So, if we use <Greeting />, it will render "Hello, World!". But if we use <Greeting name="Alice" />, it will render "Hello, Alice!".

In ES6 React, we would achieve the same thing using static properties:

class Greeting extends React.Component {
  static defaultProps = {
    name: 'World'
  };
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Set Initial State (getInitialState)

State is like a component's personal data storage. With createReactClass, we set the initial state using getInitialState:

var Counter = createReactClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  incrementCount: function() {
    this.setState({
      count: this.state.count + 1
    });
  },
  render: function() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

Let's break this down:

1. getInitialState returns an object that defines the initial state.
2. We're setting an initial count of 0.
3. We have an incrementCount function that updates the state.
4. In the render method, we display the count and a button to increment it.

In ES6 React, we would typically set the initial state in the constructor:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  // ... rest of the component
}

Methods Comparison

Here's a handy table comparing the methods we've discussed:

createReactClass	ES6 Class	Purpose
getDefaultProps	static defaultProps	Set default prop values
getInitialState	constructor	Set initial state
render	render	Render the component

Conclusion

And there you have it, folks! We've taken a journey back in time to explore React without ES6. Remember, understanding these concepts will make you a more well-rounded React developer. It's like knowing the history of a language - it gives you a deeper appreciation for the modern features.

As we wrap up, I'm reminded of a story. Once, I was working on a legacy project that used this older syntax. My team members were stumped, but thanks to understanding these basics, I was able to swoop in like a React superhero and save the day!

Keep practicing, stay curious, and before you know it, you'll be building amazing things with React - whether it's with the old syntax or the new. Happy coding, and may your components always render flawlessly!

Credits: Image by storyset