The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Build a JSX Live Compiler as a React Component

Build a JSX Live Compiler as a React Component

5:09
As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.
Watch this lesson now
Avatar
egghead.io

As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.

Avatar
Michael Dyer

I'm using react 13.1 and getting warnings that JSXTransformer is not defined. This lesson seems to target an older version of react that supports
/** @jsx React.DOM */

In reply to egghead.io
Avatar
juzten

Did you update both the react and JSXTransformer scripts that include them into the project? I am using:
"https://fb.me/react-0.13.1.js"
"https://fb.me/JSXTransformer-0.13.1.js"

Also, change React.renderComponent to React.render

In reply to Michael Dyer
Avatar
Daniel

Looks like there is a slight type with importing the bootstrap css. The link should go to http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css instead of //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Avatar
Michel

This works if you use a web server to preview the page, because using "//" uses the same protocol as was used to load the page. This won't work if you're previewing by doing "Open File" from your browser, because the protocol is "file://".

In reply to Daniel
Avatar
Chris Kobrzak

At the time of writing this post the JSBin snippet is using React 0.14.3 and it doesn't seem to work in the browser.
Adding the type="text/babel" attribute to the index.js <script> tag in index.html seems to have resolved this issue (tested in Safari 9 and Chrome Canary 49).

Avatar
Seb

Nice lesson. I love how you can just bosh out the CSS without any kind of effort or much typing because of the macros and seemingly infinite experience.

Avatar
Jun

Thank you for posting this. The type="text/babel" attribute saved me tons of time debugging.

In reply to Chris Kobrzak
Avatar
dirakkk

Hi Joe.What is the snippet you use to replace .container with ? thanks

In reply to egghead.io
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?