ReactJS Intro: With and without JSX and Babel for beginners

NOTE: This is not a setup tutorial. I will be just giving an overview about the available options for beginners to select their path quickly and easily.I will be covering about setup in another post. Stay tuned.

When I started learning ReactJS, there are so many ways to use it that I’m literally confused. To avoid confusion I’m gonna give a brief overview about the available options for beginners to select their path quickly and easily.

The available options are:

1. Using JSX to code and Babel to compile it to JavaScript. (Compilation during development phase).
2. Using JSX to code and Babel to compile it to JavaScript. (Compilation during production phase).
3. Using JavaScript ES6 to code and Babel to compile it to JavaScript ES5. (Compilation during development phase).
4. Using JavaScript ES6 to code and Babel to compile it to JavaScript ES5. (Compilation during production phase).
5. Using JavaScript ES5 to code.

In the above list, we can see 2 phases: 1) Development Phase and 2) Production Phase.

Usually we don’t prefer Production Phase because it is slower and takes up clients resources.

Read this another article to know why.

First we’ll go through some basic definitions.

What is Development Phase?

This is where we develop an application.

What is Production Phase?

This is where we deploy an application after we have finished with the development phase.

What is JSX?

It is a syntax extension for JavaScript.

It was written to be used with React. JSX code looks a lot like HTML.

What does “syntax extension” mean?

In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it!

If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

What is Babel?

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don’t support certain features natively, Babel will help you compile those features down to a supported version.

IN:

// ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

OUT:

[1, 2, 3].map(function(n) {
  return n + 1;
});

ES5 vs. ES6

There are 2 most popular JavaScript versions we come across most frequently. They are ES5 and ES6.

So where does that leave us in terms of terminology? The following list might be helpful:

• ECMAScript: A language standardized by ECMA International and overseen by the TC39 committee. This term is usually used to refer to the standard itself.
• JavaScript: The commonly used name for implementations of the ECMAScript standard. This term isn’t tied to a particular version of the ECMAScript standard, and may be used to refer to implementations that implement all or part of any particular ECMASCript edition.
• ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers
• ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers. To see the state of implementation by different browsers and tools, check out these compatibility tables.
• ECMAScript 2016: The expected 7th edition of ECMAScript. This is scheduled to be released next summer. The details of what the spec will contain have not been finalized yet
• ECMAScript Proposals: Proposed features or syntax that are being considered for future versions of the ECMAScript standard. These move through a process of five stages: Strawman, Proposal, Draft, Candidate and Finished.

Why we need to convert ES6 to ES5?

That is because ES6 has been partially implemented in most browsers.

What if some visitors your website still using Internet Explorer from their Windows 7 machine? You don’t want to show a broken website to them which obviously makes them leave.

That is the reason we convert our ES6 code to ES5 code.

By using ES6 version, we can use most useful and convenient features while coding during development phase and later we convert it to ES5 while delivering it to the clients, visitors etc. during production phase.

Using JSX to code and Babel to compile it to JavaScript. (Compilation during development phase).

This is the most preferred and easiest way to write ReactJS Apps.

As I told above, JSX need to be converted to ES5 using Babel because browsers doesn’t support JSX natively.

We use Webpack and Babel to compile in this phase.

Using JSX to code and Babel to compile it to JavaScript. (Compilation during production phase).

This is only preferred for testing purposes. It is not at all recommended for release version.

In this method, we use JSX to code our App but we use Babel to convert JSX to ES5 on the fly in the web browser every time the web page is visited instead of compiling on our machine only once.

This may take up resources on clients web browser. So, it is not preferred.

You can read why in more detail here.

Using JavaScript ES6 to code and Babel to compile it to JavaScript ES5. (Compilation during development phase).

This is for them who don’t want to waste their time learning new languages.

From the Official Page: React without JSX

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment.

But for backward compatibility of old web browsers, we still need to convert it to ES5. We convert it in our machine only.

Using JavaScript ES6 to code and Babel to compile it to JavaScript ES5. (Compilation during production phase).

This is similar to the above concept but we compile ES6 to ES5 on the fly inside the web browser every time the web page is visited instead of compiling on our machine only once.

Using JavaScript ES5 to code. *No compilation required*

This is the least or never used method of using ReactJS.

In this method, we code our app directly in ES5.

Advantage: There is no need for compilation stage.

Disadvantage: Pain in the ass. You don’t get to use some of the most useful and convenient features provided by the JSX and ES6.

So, never ever use this!

Even though if you wanted to use this, nobody can stop you. Follow the official tutorial.

Conclusion:

Most of the tutorials in the web are about using JSX because it is one of the advantage of using React. JSX is a syntactic sugar. You can write less code with JSX.

Try this online Babel compiler to see how JSX is converted to JavaScript and how much more code is generated.

So, always go with the Using JSX to code and Babel to compile it to JavaScript. (Compilation during development phase). method to use ReactJS.

Got any doubts/questions/suggestions? Comment down below.