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 with offline transformation

on Feb 10, 2016

React JSX code can be compiled offline to transform into javascript code. This eliminates need to include babel code in browser. To see how it works in browser without offline transformation, you can visit JSX hello world. Here are the steps to do offline transformation in hello world example.

  1. Create jsx-hello.js in src directory with the following content.
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.getElementById('hello')
    );
    
  2. Convert src/jsx-hello.js into compiled and transformed build/jsx-hello.js using the following command. You can visit ReactJS – convert jsx to javascript using babel cli for babel installation instructions.

    $ babel --presets react src --out-dir build
    src/jsx-hello.js -> build/jsx-hello.js
    $ cat build/jsx-hello.js
    ReactDOM.render(React.createElement(
      'h1',
      null,
      'Hello world'
    ), document.getElementById('hello'));
    
  3. Here is the html code which makes use of generated jsx-hello.js file in build dir.
    <script src="https://fb.me/react-0.14.7.js"></script>
    <script src="https://fb.me/react-dom-0.14.7.js"></script>
    
    <div id="hello"></div>
    <script src="/demo2/react/build/jsx-hello.js"></script>
    
    refresh done
    try it online

Suggested posts:

  1. React jsx hello world
  2. ReactJS – convert jsx to javascript using babel cli
  3. React javascript render hello world
  4. React component tutorial with click handler – jsx version
  5. React component tutorial with click handler – javascript version
  6. React Overview
  7. React – JSXTransformer vs babel – which one should be used?
  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