TGViewer
Web Development - HTML, CSS & JavaScript Web Development - HTML, CSS & JavaScript @javascript_courses · 55.7K subscribers
Post #1954 3.54K
How React's ES6 syntax is different from ES5 syntax?

1. require vs. Import
// ES5
var React = require('react');

// ES6
import React from 'react';



2. exports vs. export
// ES5
module.exports = Component;

// ES6
export default Component;



3. component and function
// ES5
var MyComponent = React.createClass({
render: function() {
return(
<h3>Hello JavaTpoint</h3>
);
}
});

// ES6
class MyComponent extends React.Component {
render() {
return(
<h3>Hello Javatpoint</h3>
);
}
}



4. props
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return(
<h3>Hello, {this.props.name}!</h3>
);
}
});

// ES6
class App extends React.Component {
render() {
return(
<h3>Hello, {this.props.name}!</h3>
);
}
}
  • 👍 8
  • ❤ 1
More from @javascript_courses
  1. Oct 17, 2026𝗜𝗕𝗠 𝗙𝗥𝗘𝗘 𝗧𝗘𝗖𝗛 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 𝟮𝟬𝟮𝟲! 🎓 Explore IBM Cognitive Class and build…
  2. Oct 16, 2026𝗗𝗮𝘁𝗮 𝘀𝗰𝗶𝗲𝗻𝗰𝗲 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗪𝗶𝘁𝗵 𝗔𝗜😍 Future Ready Data Scien…
  3. Oct 16, 2026SQL Detailed Roadmap | | | |-- Fundamentals | |-- Introduction to Databases | | |-- What S…
  4. Oct 13, 2026𝗧𝗢𝗣 𝗙𝗥𝗘𝗘 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 𝗧𝗢 𝗕𝗢𝗢𝗦𝗧 𝗬𝗢𝗨𝗥 𝗦𝗞𝗜𝗟𝗟𝗦 𝗜𝗡 𝟮𝟬𝟮𝟲! Explor…
  5. Oct 12, 2026doesn't work because "a" is block-scoped. ⭐ 1️⃣5️⃣ What Is an Execution Context? When Java…
  6. Oct 12, 2026When "inner()" looks for: name it finds it in its own scope. For: city JavaScript looks in…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →