JSX: The reusable coding structure implementing in Jquery
Tags: javascript, jquery, jsx, react
Published: 2021-03-09 04:31:14

I am going crazy and mixing the code structure here and there these days. I am working on a Django-react project from the last 8 months. I tried to implement the reusable components and [JSX structure](https://reactjs.org/docs/introducing-jsx.html) in [jquery](https://jquery.com/) :laughing:. My story begins here, 

Recently, we got a new project. The project was small. The project is about the visualization of a couple of static maps in geoportal. I don't want to integrate react for such a small project. I decided to use [Django](https://www.djangoproject.com/) with [jquery](https://jquery.com/) (Since I was very confident with Django-jquery combo). The thing is now I am messing things up. I am feeling crazy now. I am still thinking, is it the best way to do it? Let me know in the comment section if you have any suggestions. I am implementing the react reusable component structure in jquery (Looks like fun right? let's see how did I do it :stuck_out_tongue_closed_eyes:). 


>> This is not the actual JSX, but using this method, we can produce the reusable HTML components.

I have six map layers. I made the js array as below(I could use the database for storing this information, but the data are static, I didn't feel like storing them in the database as well). In the below array, 

**layerCode** is used for getting the map from [geoserver](http://geoserver.org/)

**layerTitle** is used for the title of the layer

**checked** is used for the default option whether the layer is on or off by default. 

**thumbnail** is used to show the thumbnail of the layer. It was stored inside the `img` folder.

**description** is the layer description

```js
const layers = [
  {
    layerCode: "site2_chm",
    layerTitle: "Canopy Height Model (CHM)",
    checked: "checked",
    thumbnail: "./img/florida_chm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "site2_dtm",
    layerTitle: "Digital Terrain Models (DTM)",
    checked: "checked",
    thumbnail: "./img/florida_dtm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },

  {
    layerCode: "final_CHM_merged_dem_p082020_shifted",
    layerTitle: "CHM merged DEM",
    checked: "false",
    thumbnail: "./img/chm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "final_DSM_25cm_vDEM_p082020_shifted",
    layerTitle: "DSM 25 cm vDEM",
    checked: "false",
    thumbnail: "./img/vdem.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "final_DSM_25cm_vGrid_p082020_shifted",
    layerTitle: "DSM 25cm vGrid",
    checked: "false",
    thumbnail: "./img/vgrid.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "DEM_input_lowest_selected_p082020_shifted",
    layerTitle: "DEM input lowest selected",
    checked: "false",
    thumbnail: "./img/florida_dtm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
];
```

I wrote the function for generating the JSX like structure (similar to the functional component in react :stuck_out_tongue_winking_eye:). The function will take the argument as the key from the above array object. 

```js
// Layer card generator function 
const layerCardGenerator = (
  layerCode,
  checked,
  thumbnail,
  layerTitle,
  description
) =>
  `<div class="card-body layer-card">
    <div class="row">
      <div class="col-4 thumbnails">
        <img src=${thumbnail} alt="" class="img-fluid" />
      </div>
      <div class="col-8">
        <div style="display: flex; justify-content: space-between">
          <span class="d-block layer-title mt-2">${layerTitle}</span>
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input layer-card-cb" name="${layerTitle}" id=${layerCode} ${checked} />
            <label class="custom-control-label" for=${layerCode}></label>
          </div>
        </div>
        <div class="description">${description}</div>
      </div>
    </div>
    <div style="display: flex">
      <label for="opacity">
        <b class="mr-5 mt-2">Opacity: </b>
      </label>
      <input
        type="range"
        class="form-control-range opacity"
        code=${layerCode}
        value="60"
        min="0"
        max="100"
        data-toggle="tooltip" 
        title="Opacity: 60%"
      />
    </div>
  </div>`;
```

Now I can iterate the `layerCardGenerator` function using the `layer` array. I appended all generated layer cards to the `.left-sidebar` section. 

```js
layer.map((l) => {
    $(".left-sidebar").append(
      layerCardGenerator(
        l.layerCode,
        l.checked,
        l.thumbnail,
        l.layerTitle,
        l.description
      )
    );
  });
```

Finally, our reusable component on jquery is implemented successfully :heart_eyes:.