JSX

The syntax of React-JavaScript can be tricky and when writing long applications, almost impossible to maintain, for that reason we have JSX a JSX = Javascript Syntanx eXtension.  Tuturials: Link1  –  Link2  –  Link3  –  Link4

See Example:

The problems is that the BROWSER  do not understand JSX, for that reason we need a Transpiler, and in this case we will use Babel-JS. For a quick online Transpiler: Babel.io/repl .

There are two ways the JSX code can be Transpile to Pure-JavaScript,

  • On the Fly, in the Browser = Used on Development
  • Build Time: In Productions System.

Ok now, we are developing, so lest see how to use Babel on the Fly for Development.

To do this we point the browser to the Online Traspiler, this is very In-Efficient but is good for Dev.

First lest go to the GitHub Repo: babel-standalone  — Daniel15 , get the link and paste to the “index.html” below the <script> links for React-Library from Facebook.

Now your Files should look like:

index.html

code.js

And this a basic explanation in how to use JSX + Babel + HTTP.server develop React-Apps.

.



Copyright 2017. All rights reserved.

Posted February 25, 2017 by Edmundo in category "React