In this tutorial, we explore the creation of an ES6 React component, leveraging ES6 classes and JSX, while learning how to import and export modules in Node.js. By the end, you’ll understand how to write reusable, maintainable React components and separate logic for clean and modular application development.

1. Introduction to ES6 and React Components

React components are the building blocks of a React application. This tutorial introduces you to creating components using ES6 class syntax. ES6 classes provide a structured way to define components, ensuring reusability and readability. Additionally, we delve into JSX, a syntax extension that allows writing HTML elements directly within JavaScript.

---

2. Setting Up the Project

We start with a project that has a client.js file containing a basic React component. The problem? The file is cluttered with both client-specific logic and component definitions. To resolve this, we create a dedicated App.js file to house our React component, following isomorphic JavaScript principles. This separation makes the code more modular and reusable.

1. Create a new file:

   • In the project directory, create a file named App.js.

2. Define the component class:

   • Use the ES6 class syntax to define a React component.
   • Extend the React.Component base class to inherit React features.

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

export default App;

3. Export the component:
   • Use the export default syntax to make the App component available for import in other files.

---

3. Updating the Client Logic

Now that we’ve created the App.js component, update the client.js file to import and render the new component:

1. Import the App component:
   • Use the import statement to include the App component.

import ReactDOM from 'react-dom';
import App from './App';

2. Render the component into the DOM:
   • Use ReactDOM.render to attach the App component to the root element in the HTML file.

ReactDOM.render(<App />, document.getElementById('root'));

---

4. Understanding JSX in React

JSX simplifies writing React components by allowing you to embed HTML-like syntax directly into JavaScript. A few key points about JSX:

• Use className instead of class for defining CSS classes (as class is a reserved keyword in JavaScript).
• Inline styles must be defined as JavaScript objects. For example:

const styles = { backgroundColor: 'blue', color: 'white' };
<div style={styles}>Hello, World!</div>

• Components are distinguished from HTML elements by using PascalCase (e.g., <App />).

---

5. Why Separate Component Logic?

By moving the component logic into App.js, we achieve:

• Modularity: Each component is self-contained, making it easier to reuse across the project.
• Maintainability: The client.js file focuses solely on client-specific tasks, while App.js handles the component logic.
• Scalability: This setup allows seamless rendering of the component on multiple platforms (e.g., web, server, mobile).

---

6. Testing the Setup

After making the updates, refresh your browser to ensure everything works as expected. The rendered output should display the content of the App component without any visual changes.

If any errors occur (e.g., target container not found), double-check the id attribute in your HTML file to ensure it matches the ReactDOM.render target.

---

In this tutorial, we created a foundational React component using ES6 syntax and organized it into a modular structure. This approach prepares us for building more complex React applications. In the next tutorial, we will enhance our React components by adding a reusable Bootstrap button component.