In this lesson, we explored how to build React components using ES6 classes. Here's a comprehensive guide:

---

What Are ES6 React Classes?

• React components are reusable pieces of UI logic.
• Using ES6 classes to define components allows for a structured approach with built-in lifecycle methods like render.

---

Step-by-Step Guide to Creating a React Component

1. Setup:
   Ensure you have React and ReactDOM installed:

   npm install react react-dom
   

2. Create a Components Directory:

   • In your project’s src folder, create a new folder named components.
   • This structure keeps your React components organized.

3. Build the React Component:

   • Create a file named App.js inside the components folder.
   • Write the following code:

     import React from 'react';
     
     class App extends React.Component {
         render() {
             return (
                 <div>
                     <h1>Hello, World!</h1>
                 </div>
             );
         }
     }
     
     export default App;
     

4. Understand Key Concepts:

   • import React from 'react': Loads the React library to use JSX and define components.
   • class App extends React.Component: Defines a new React component named App.
   • render(): A required method that returns the component’s UI in JSX format.

5. Integrate the Component:

   • Open your client.js (or equivalent entry file) and import the App component:

     import React from 'react';
     import ReactDOM from 'react-dom';
     import App from './components/App';
     
     ReactDOM.render(<App />, document.getElementById('react-root'));
     

   • Ensure the index.html file contains a <div> with id="react-root".

6. Test the Application:

   • Run the development server:

     npm start
     

   • Open your browser and confirm that "Hello, World!" is displayed.

---

Why Use React and ReactDOM Separately?

• React: Handles the creation and management of components.
• ReactDOM: Manages rendering components to the DOM.
• This separation allows React to work in non-DOM environments like React Native.

---

What Is JSX?

• JSX is a syntax extension for JavaScript that looks similar to HTML.
• JSX makes it intuitive to write UI logic and structure.

Example:

return (
    <div>
        <h1>Hello, World!</h1>
    </div>
);

---

Key JSX Rules

1. JSX must return a single parent element.

   • Correct:

     return (
         <div>
             <h1>Title</h1>
             <p>Description</p>
         </div>
     );
     

   • Incorrect:

     return (
         <h1>Title</h1>
         <p>Description</p>
     );
     

2. Use camelCase for HTML attributes:

   return <div className="container"></div>; // Correct
   

---

Next Steps

Now that we’ve built and integrated a React component, the next lesson will focus on using JSON data within the component. Stay tuned!

2024

In 2024, React development has continued to evolve, and while the ES6 class-based approach is still valid, it has largely been replaced by functional components with React Hooks. Here's how the approach from this lesson compares to modern best practices:

---

Modern React Development in 2024

Why Functional Components?

• Functional components are simpler and more concise than class components.
• With Hooks, functional components can now handle state and lifecycle methods, making them a powerful alternative to class components.
• The React team actively encourages the use of functional components in new projects.

---

Updated Guide for 2024

1. Install Required Libraries

Use the latest React libraries:

npm install react react-dom

2. Create Functional Components

Instead of ES6 classes, use a functional component with Hooks:

Example: App.js

import React from 'react';

const App = () => {
    return (
        <div>
            <h1>Hello, World!</h1>
        </div>
    );
};

export default App;

---

3. Why React Hooks?

• Simplified State Management: Replace this.state and setState with the useState Hook:

  import React, { useState } from 'react';
  
  const Counter = () => {
      const [count, setCount] = useState(0);
  
      return (
          <div>
              <p>Count: {count}</p>
              <button onClick={() => setCount(count + 1)}>Increment</button>
          </div>
      );
  };
  
  export default Counter;
  

• Replace Lifecycle Methods with useEffect: Handle side effects like data fetching or subscriptions with the useEffect Hook:

  import React, { useEffect } from 'react';
  
  const DataFetcher = () => {
      useEffect(() => {
          console.log('Component mounted!');
          return () => console.log('Cleanup on unmount!');
      }, []); // Empty dependency array means this runs only once.
  
      return <p>Fetching data...</p>;
  };
  
  export default DataFetcher;
  

---

4. Modern JSX Rules and Features

• Fragments for Multiple Elements: No need to wrap elements in an unnecessary div—use <React.Fragment> or shorthand <>:

  return (
      <>
          <h1>Title</h1>
          <p>Description</p>
      </>
  );
  

• TypeScript for Better Type Safety: Modern projects increasingly use TypeScript to ensure type safety and scalability:

  import React from 'react';
  
  type Props = {
      title: string;
  };
  
  const App: React.FC<Props> = ({ title }) => {
      return <h1>{title}</h1>;
  };
  
  export default App;
  

---

Modern File Organization

In 2024, teams often adopt scalable folder structures:

src/
├── components/
│   ├── App.jsx
│   ├── Counter.jsx
│   └── DataFetcher.jsx
├── hooks/
│   └── useCustomHook.js
├── context/
│   └── AppContext.js
├── styles/
│   └── app.css
├── utils/
│   └── helpers.js
└── main.jsx

---

ReactDOM in 2024

React now defaults to createRoot instead of ReactDOM.render, introduced in React 18. This optimizes rendering with Concurrent Mode:
Example: main.jsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';

const rootElement = document.getElementById('react-root');
const root = createRoot(rootElement);

root.render(<App />);

---

Comparison of Approaches

| Feature | 2016 ES6 Classes | 2024 Functional Components + Hooks | |---------------------------|-------------------------|-------------------------------------| | Syntax | Class-based | Function-based | | State Management | this.state, setState | useState | | Lifecycle Methods | Methods like componentDidMount | useEffect | | Complexity | Higher (verbose) | Lower (concise) | | Type Safety | Optional | Often TypeScript | | Render API | ReactDOM.render | createRoot |

---

Conclusion

While class components are still supported, modern React development in 2024 emphasizes functional components with Hooks for simplicity and flexibility. If this course were updated today, it would likely focus on using functional components, React Hooks (useState, useEffect), and TypeScript, along with React's latest features like createRoot.