Crea tu propia libreria reactiva: MiniSolid

How to create a reactive library from scratch?

Introducing artificial intelligence into our lives also means mastering the tools from the core of how they work. Teaching how to create a reactive library, in this case MiniSolid, will not only give you practical skills, but will also be a great addition to stand out in job interviews. Follow along in this guide to build the scaffolding of the project.

What is the initial project structure?

You'll start by setting up the working environment and creating the basic structure to make the library run smoothly.

1. Create a project folder: Named "PlatziSolid", which will be the home of your reactive library.
2. Prepare the code editor: Open the folder in Visual Studio Code.
3. Create the essential files:
   • index.html: This is where the main structure of the library will be assembled.
   • index.js: It will act as the entry point for the library user.
   • solid.js: It will contain reactive primitives that will be used.

How to set the HTML base?

The index.html file will be the skeleton of your MiniSolid application.

• Basic HTML5 structure: add a <div> that will encompass the whole application.
• Functional tags:
  • Span for "count": Controllable by identifier.
  • Span for "double count": Similar to the previous one.
  • Header "is divisible by 3": Includes an identifier to handle values.
  • Interaction button: It will allow modifying the initial value of the "count".

How to run a simple local server?

Use modern tools to visualize and test the application.

• Local Server: Using MPX and HTTPSer, raise a local server in the console to observe the application running in a browser.

npx httpser

How to connect your JavaScript script to HTML?

Including and managing scripts is crucial for the functionality of the library to be visible in the browser.

• Insert a <script> in the index.html, indicating as source the location of the index.js.
• Type module: Specifies that you are working with ECMAScript modules, the most state-of-the-art option in JavaScript.

How to implement primitives in JavaScript?

In the solid.js file, you will start defining the logic of the primitives that will make the HTML reactive and functional.

• Exports: E.g. export default solid; with a console.log to verify the operation.
• In index.js, import and use the solid.js functionality to manipulate the DOM.

import solid from './solid.js';console.log(solid); // Verify execution and export.

What are import maps and how are they used?

Import maps are an advanced tool in modern JavaScript to simplify the management of libraries and modules.

• Definition: Using a script of type importmap facilitates a clean and understandable reference to your modules.
• Example syntax: Allocate aliases to local or remote files to simplify imports throughout the project.

<script type="importmap">
 { "imports": { "solid": "./solid.js" }}</script>

Activate these tips and practical examples following best practices and explore the wonders you can create with your reactive library projects. Continue to hone your skills and bring your ideas to life!