React JS Tutorial #1 – Tutorial for Hopeless Beginner | Learn ReactJS ES6 App Development in 2016

Javascript By Builder

React js tutorial for beginners with EcmaScript6 (es6) is my recent web app development tutorial in the reactjs series. Here you will learn how to set up react from scratch step by step. We’ll install node.js (nodejs) use npm (node package manager) command line tool to install babel, babel watch, es2015 presets, react and react-dom. (no webpack installation needed for this tutorial.)

This react tutorial goes over the set up process and setting up the development environment from the command line (cmd) on a PC under Windows 7 Operating System (OS). I tried to make this tutorial as simple as possible, because I was thinking more along the lines of a tutorial for beginners

Get my book React Gems at http://www.reactgems.net for more web development education goodness.

— Setting up reactive web development environment —

Okay honestly, when we did the plain vanilla HTML and JavaScript development, all we had to do was add a few files using script tags, maybe write some CSS? Just put all these files in one directory and you’re good to go.

But react development assumes setting up your web development environment in the way that professional web developers do. It requires basic knowledge of the command line tool in Windows. On Mac OSX you would use the Terminal to do the same.

It’s actually kind of fun once you figure out how the command line tools like npm work.

— All of these other dependencies! —

React depends on node.js, babel, es2015 preset, JSX preprocessor and optionally webpack. Node’s npm (node package manager) is the tool used to install all of the required presets and plugins.

The good news is that all you have to do is install node js from their website and you’re good to go. It includes everything you need.

I know this sounds like a bunch of gibberish if you’ve never heard of these programs and libraries before. But by following my tutorial to build your first react application you will see & quickly understand how they all work.

It might take a bit of time to sink in, but this is the kind of thing professional web developers use who work at Instagram and Netflix. And I made sure that my tutorial explains in great detail and insight of how it all works.

If you ever plan on pursuing a career in web development this really prepares you for that. In a way that’s why Facebook is so fired up about something that to many casual JavaScript programmers looks “too complicated” to learn. But it really doesn’t have to be.

The most difficult thing about coming to react from basic JavaScript programming is understanding how to properly set up the development environment. And from then on it’s a breeze. It’s really worth going through.

— What in the world is babel & transpiling? —

Here is the thing. Chrome, Safari and Firefox are not even capable of executing JavaScript with EcmaScript 6 specification released in 2015. But this is what React is based on. So how do we deal with that?

There is a command line program tool called “babel”, which is part of node js installation.

Babel transpiler is the tool that makes converting ES6 to ES5 possible. Developers of babel have already figured out and implemented ES6 standard. Including the import keyword that no browser supports today as of this writing.

Node for windows comes as a simple .msi installer file. Just click “Next” button until it’s finished and you’re ready to start using it and all the packages it includes.

Once instaled… simply go to cmd.exe on your Windows and install babel using node’s npm tool and you’re ready to start transpiling. My video tutorial explains how to do it.

You may have heard of code being compiled before. But wait, what in the world is transpiling? You know how in JavaScript, your code is first compiled behind the scenes until it actually executes in the browser? This is called “just in time compilation” so this is why you never really noticed it or thought about it.

And if you’ve never heard of JIT compiling before. What shall we say about transpiling?

Transpiling is the act of converting source code of one language into another. In this particular case of EcmaScript, we will actually be transpiling ES6 back to ES5. Again, this process is detailed in my tutorial. Just watch it and you will learn how it works.

— Not even Chrome —

Today no browser supports EcmaScript 6 fully. No, not even Chrome. But we can start writing ES6 code today and run it in Chrome. And that’s the magic of transpiling.

Until that time its just a wise thing to learn so you can be ahead of your peers. This can help you pass a job interview because you’d be one of the few qualified candidates while everyone else is still learning and “react js” on their resume and on their lips but not in their hearts!

source