Cristiam Da Silva | Incremental Learning and Migration with React JS: A Guide to Rendering Components in HTML Sections

Introduction

React JS has become a cornerstone in modern web development, offering a robust framework for building interactive UIs. However, adopting React can seem like a daunting task, especially for projects that are already up and running. What if I told you that you could start using React incrementally, without overhauling your entire project? In this article, we'll explore how you can import React JS into your HTML file and render components in specific sections of your webpage. This approach not only makes migration easier but also provides a convenient way to understand how React works.

Why Incremental Adoption?

Easier Migration

Imagine you have a legacy project built with plain HTML, CSS, and vanilla JavaScript. Rewriting the entire codebase in React would be a massive undertaking. Incremental adoption allows you to introduce React components gradually, replacing or enhancing existing features without disrupting the entire application.

Better Understanding

Starting small helps you grasp the fundamental concepts of React, like JSX, components, and state management. You can focus on understanding how each part works before diving into more complex topics like hooks or context API.

To the code

How to Import React into HTML

Here's a simple example to demonstrate how you can include React in your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>My React Page</title>
    <!-- Import React and ReactDOM libraries -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  </head>
  <body>
    <!-- Element where React will render -->
    <div id="myReactApp"></div>

    <script>
      // Your React code here
    </script>
  </body>
</html>

Rendering Components in Sections

You can use ReactDOM to render React components into specific HTML elements. This is particularly useful when you want to introduce React into existing projects incrementally.

Here's a code snippet to illustrate this:

// Define a simple React component
const MyComponent = () => {
  return <h1>Hello, React!</h1>;
};

// Use ReactDOM to render the component into the div with id 'myReactApp'
ReactDOM.render(<MyComponent />, document.getElementById('myReactApp'));

Mixing React with Existing Code

React plays well with existing code. You can have a webpage where only specific sections are powered by React, while the rest remains in vanilla HTML or another library.

HTML file:

<div id="vanillaSection">
  <!-- Vanilla JS or another library -->
</div>

<div id="reactSection">
  <!-- React will render here -->
</div>

Javascript File:

// React code
const ReactSection = () => {
  return <p>This is a React-powered section.</p>;
};

ReactDOM.render(<ReactSection />, document.getElementById('reactSection'));

Conclusion

Incremental adoption of React offers a practical approach for both migrating existing projects and understanding the framework's core concepts. By importing React into your HTML files and using ReactDOM to render components in specific sections, you can enjoy the best of both worlds—maintaining your existing code while leveraging React's powerful features.

Feel free to experiment with this approach in your projects. It not only simplifies the migration process but also provides a hands-on way to learn and appreciate the nuances of React JS.