InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

React Tutorials

  • Overview
  • Hello world (jsx)
  • jsx to javascript (babel cli)
  • jsx offline transformation
  • Hello world (javascript)
  • click hander (jsx)
  • click handler (javascript)
  • clock example
  • ajax
  • React FAQ
 
  • Home
  • > Tutorials
  • > Javascript
  • > React

React jsx hello world

on Feb 9, 2016

JSX is a JavaScript syntax extension that looks similar to XML. It is used by React code and it is optional to use JSX. Everything which is written in JSX can be written in javascript also.

JSX syntax

Here is how the JSF syntax look like:

<script type="text/babel">
// react jsx code
</script>

Note that here type value is text/babel which prevent browser to interpret it as Javascript. It also tells React and babel compiler javascript code to process it as jsx.

JSX hello world

Here is basic jsx example and how it renders. Note that we have used inline JSX for better readability. It is better to keep jsx code in separate file.

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<div id="hello"></div>
<script type="text/babel">
ReactDOM.render(
  <h1>Hello world</h1>,
  document.getElementById('hello')
);
</script>
refresh done
try it online

Few points to note

  1. If you inspect hello world element in Chrome, here is how the dom element looks like. Note the presence of data-reactid property of h1. React uses it internally to manage this element.
    react-jsx-hello-world-inspect-dom
  2. Babel javascript compiler is needed for parsing JSX code in the page.
  3. Earlier react was using JSTransform for transforming jsx code. JSTransform is now deprecated.
  4. It is better to transform JSX offline to avoid browser do extra work. Offline it is done only once.

Suggested posts:

  1. React jsx hello world with offline transformation
  2. React javascript render hello world
  3. React – JSXTransformer vs babel – which one should be used?
  4. ReactJS – convert jsx to javascript using babel cli
  5. React component tutorial with click handler – javascript version
  6. React component tutorial with click handler – jsx version
  7. React Overview
  8. React component ajax example
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Javascript, React, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress