React is a JavaScript library used to build user interfaces. With ES6 (ECMAScript 2015), we can write more readable and maintainable code due to the introduction of classes, arrow functions, destructuring, template strings, and more.
React applications are built using components. Components can be class-based or functional with ES6.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
Hello, World!
</div>
);
}
}
export default App;
import React from 'react';
const App = () => (
<div>
Hello, World!
</div>
);
export default App;
State holds the local state of the component, and props are used to pass data between components.
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
}
const Greeting = (props) => {`Hello, ${props.name}!`};
Arrow functions allow us to write concise function expressions and avoid issues with `this` binding.
class App extends Component {
handleClick = () => {
console.log('Button Clicked!');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
Destructuring allows you to unpack properties from objects or arrays.
const user = { name: 'John', age: 30 };
const { name, age } = user; // Extracts name and age from user
Template strings allow embedded expressions.
const name = 'World';
const greeting = `Hello, ${name}!`;
ES6 introduced a way to modularize code.
// exporting module
export const add = (a, b) => a + b;
// importing module
import { add } from './math';
Class components have lifecycle methods which can be overridden to run code at particular times in the process.
class App extends Component {
componentDidMount() {
console.log('Component Did Mount!');
}
}
Let’s create a small React application using ES6 features that encompasses the aspects mentioned above.
import React, { Component } from 'react';
import Greeting from './Greeting';
import Counter from './Counter';
class App extends Component {
state = { name: 'John' };
render() {
const { name } = this.state; // Destructuring
return (
<div>
<Greeting name={name} /> {/* Props */}
<Counter />
</div>
);
}
}
export default App;
import React from 'react';
const Greeting = ({ name }) => {`Hello, ${name}!`}; // Destructuring and Template String
export default Greeting;
import React, { Component } from 'react';
class Counter extends Component {
state = { count: 0 }; // State
handleIncrement = () => { // Arrow Function
this.setState((prevState) => ({ count: prevState.count + 1 }));
}
render() {
const { count } = this.state; // Destructuring
return (
<div>
<p>{count}</p> {/* Template String */}
<button onClick={this.handleIncrement}>Increment</button> {/* Event Handling */}
</div>
);
}
}
export default Counter;
This example utilizes various ES6 features in a React application including class components, functional components, state, props, destructuring, arrow functions, and template strings. When each component is put together, we get a small application with a greeting message and a counter that can be incremented.
React combined with ES6 provides a powerful toolset for developing modern web applications. Utilizing ES6 features like classes, arrow functions, and modules can greatly enhance the readability, maintainability, and modularity of your React applications.
Practical use and hands-on experience will offer a more in-depth understanding, so try to build applications using these concepts and explore more advanced topics like hooks, context API, and advanced state management with Redux or MobX. Keep learning and building!
UPCET Exam
Click Here
SAAT Exam
Click Here
MHT CET Exam
Click Here
IPU CET Exam
Click Here
KCET Exam
Click Here
COMEDK UG Exam
Click Here
VITEEE Exam
Click Here
BITSAT
Click Here
DSAT: Dayanand Sagar Admission Test
Click Here
Career In Animation in india
Click Here
Merchant Navy Courses in india
Click Here
Interior Design Career in india
Click Here
UGC NET Exam
Click Here
B. Ed Exam
Click Here
AFCAT - Air Force Common Admission Test
Click Here
GATE Exam
Click Here
Joint Entrance Examination (JEE)
Click Here
Common Admission Test (CAT)
Click Here
CDS - Combined Defence Services Exam
Click Here