lets talk about an advanced technique for reusing components, its a function will takes a component and give back new component. the idea comes from react community, [here's the link](https://reactjs.org/docs/higher-order-components.html) . this idea maybe not so useful for every project but for third party libraries its great pattern.

## init project
ok we will create project with vite because its fast. [more details about vite](https://vitejs.dev/guide). use this commands to create project
```sh
npm init @vitejs/app myapp
cd myapp
npm install
npm run dev

// or yarn 
yarn create @vitejs/app myapp
cd myapp
yarn
yarn dev
```
we will create two components for counter ` CounterPlusOne.vue ` and ` CounterPlusFive.vue ` as the names will tell first component plus by one the counter, the second component plus counter by five. the components will be simple and look like this:
```javascript

<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  data: () => ({
    counter: 0,
  }),

  methods: {
    increment() {
      this.counter += 1;
    },
  },
};
</script>


<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  data: () => ({
    counter: 0,
  }),

  methods: {
    increment() {
      this.counter += 5;
    },
  },
};
</script>

```
as you can see things are similar in script part. the state, and maybe increment part if we could pass a prop to it. so we will extract this functionality to a function but gives us back the component we want.

## HOC (higher order components)
the existing part is this function, but you have to know about render function and how it works in vue 3, [the doc link](https://v3.vuejs.org/guide/render-function.html) . the summary of render function, its a vue function that create elements. and vue use it behind the scenes. but we dont have to know about it because we can use template in vue components. lets create a javascript file ` WithCounter.js ` and for now we just want to pass the component and give it back to us, simple and ez :)
```js
import { h } from "@vue/runtime-core"

function WithCounter(WrappedComponent) {
  // we will return new component that render's WrappedComponent
  return {
    created() {
      console.log('HOC component created')
    },

    render() {
      return h(WrappedComponent)
    }
  }
}

export default WithCounter
```

this is our first higher order component, maybe lots of things is new but i will explain. so first we have a function that accepts a component to render, remember the HOC component dont care about component it will render, it just make it resuable. our function  will returns an object, this object is a new component, the components in vue is just objects in vue components you will export default an object in script part. render remains it will create a vNode with ` h ` function we imported at top. if we want to create a custom component with render function thats how we do it. to use this higher order component:
```js
import CounterPlusOne from "./components/CounterPlusOne.vue";
import CounterPlusFive from "./components/CounterPlusFive.vue";
import WithCounter from "./components/WithCounter.js";

export default {
  components: {
    CounterPlusOne: WithCounter(CounterPlusOne),
    CounterPlusFive: WithCounter(CounterPlusFive),
  },
};
```
for now it doesn't do much just renders the components and log ` HOC component created ` twice.

## reusable HOCs
now we move counter functionality to our HOC. first start simple we just send a argument to with counter, means:
```js
// App.vue
export default {
  components: {
    CounterPlusOne: WithCounter(CounterPlusOne, 1),
    CounterPlusFive: WithCounter(CounterPlusFive, 5),
  },
};

// WithCounter.js
function WithCounter(WrappedComponent, number)
```
because its function we can pass as many arguments we want. lets move all duplicated code in this two components to WithCounter:
```js

function WithCounter(WrappedComponent, number = 1) {
  return {
    data: () => ({
      counter: 0,
    }),

    methods: {
      increment() {
        this.counter += number;
      },
    },

    render() {
      return h(WrappedComponent, {
        counter: this.counter,
        increment: this.increment
      })
    }
  }
}
```
as i said increment method can be refactored with given parameter. we only do pass counter and increment as props to components. so our component will be like this.
```javascript

<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  props: {
    counter: Number,
    increment: Function,
  },
};
</script>


<template>
  <p>counter {{ counter }}</p>
  <button @click="increment">add</button>
</template>

<script>
export default {
  props: {
    counter: Number,
    increment: Function,
  },
};
</script>
```

## summary
for now they totally same but its just an example, i use this pattern in my ` tdata ` package, that just sends form and get data from an api. i dont use this pattern a lot but i see its very useful for packages or third party libraries.


i just published my first vue (npm) package :). called tdata, and it just simply fetch data and send forms, and will give you json, response, loading and error if you had any. if you wanna check it out here's [github repo](https://github.com/Tefoh/tdata).

## usage
ok first step is install and register components.
```shell
npm i tdata
```
or if you are using yarn
```shell
yarn add tdata
```
then you have to register components. and i provider two options for you. globally and locally. for global registration:
```javascript
// main.js
import TData from "tdata";

const app = createApp(App);

app.use(TData, options);

app.mount("#app");
```
this will register all components automatically. options is optional and i explain a bit later. <br /> 
and to register components locally. go any components you want like App.vue:
```javascript
<script>
import { TFetch, TForm } from "tdata";

export default {
  components: {
    TFetch: TFetch(options),
    TForm: TForm(options),
  },
  // for sending form
  data: () => ({
    form: {
      title: "",
      body: "",
    },
  }),
};
</script>
```
now components are registered successfully. and you can use this to fetch data or submit forms in templates.
```html
<template>
  <TForm
    url="https://jsonplaceholder.typicode.com/posts"
    :form="form"
    v-slot="{ loading }"
  >
    <input type="text" v-model="form.body" />
    <input type="text" v-model="form.title" />
    <button type="submit" :disabled="loading">submit</button>
  </TForm>

  <TFetch
    url="https://jsonplaceholder.typicode.com/posts"
    v-slot="{ json: posts, loading }"
    :options="{ params: { _limit: 5 } }"
  >
    <template v-if="loading"> loading... </template>
    <template v-else>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
    </template>
  </TFetch>
</template>
```
its that easy and you access things like json response, actual response, is request still loading and error if you had any. its handy but if you cant customize it, it will not be that useful for a project so just provide options and make your development easier.

## options
first option you can set is baseURL, with this you dont have to provide full url every time. you can set baseURL like this:
```javascript
<script>
import { TFetch } from "tdata";
export default {
  components: {
    TFetch: TFetch({ baseURL: "https://jsonplaceholder.typicode.com" }),
  },
};
</script>
```
now with every use of this component, base url will set automatically. but what if you have a axios instance and you set headers, baseURL and ... . good news is you can use that too. here how:
```js
import TData from "tdata";
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  headers: {
    Authorization: "Bearer token:)",
  },
});

const app = createApp(App);

app.use(TData, { axios: axiosInstance });

app.mount("#app");
```
now in template you can use it like this:
```html
<TForm url="/posts" :form="form" v-slot="{ loading }">
  <input type="text" v-model="form.body" />
  <input type="text" v-model="form.title" />
  <button type="submit" :disabled="loading">submit</button>
</TForm>
<TFetch
  url="/posts"
  v-slot="{ json: posts, loading }"
  :options="{ params: { _limit: 5 } }"
>
  <template v-if="loading"> loading... </template>
  <template v-else>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </template>
</TFetch>
```
ok thats not too hard. as i said its simple package and maybe i extend it more it future. if you like this pls share it :))

here's the laravel eloquent relationships in simple example([from docs](https://laravel.com/docs/8.x/eloquent-relationships)).

1- one-to-one
![one-to-one](https://tefo.ir/posts/eloquent-relationships-in-8-pics/one-to-one.png)

2- one-to-many
![one-to-many](https://tefo.ir/posts/eloquent-relationships-in-8-pics/one-to-many.png)

3- many-to-many
![many-to-many](https://tefo.ir/posts/eloquent-relationships-in-8-pics/many-to-many.png)

4- has-one-through
![has-one-through](https://tefo.ir/posts/eloquent-relationships-in-8-pics/has-one-through.png)

5- has-many-through
![has-many-through](https://tefo.ir/posts/eloquent-relationships-in-8-pics/has-many-through.png)

6- one-to-one-polymorphic
![one-to-one-polymorphic](https://tefo.ir/posts/eloquent-relationships-in-8-pics/one-to-one-polymorphic.png)

7- one-to-many-polymorphic
![one-to-many-polymorphic](https://tefo.ir/posts/eloquent-relationships-in-8-pics/one-to-many-polymorphic.png)

8- Many-to-many-polymorphic
![Many-to-many-polymorphic](https://tefo.ir/posts/eloquent-relationships-in-8-pics/Many-to-many-polymorphic.png)

9- has-one-of-many
![has-one-of-many](https://tefo.ir/posts/eloquent-relationships-in-8-pics/has-one-of-many.png)

In following [use bootstrap 5 in vue correctly](https://tefo.ir/use-bootstrap-5-in-vue-correctly.html) post here we will see how use bootstrap in react application. because bootstrap 5 drop support jQuery we can easily use it without an ui framework like React Bootstrap. first we load bootstrap styles and then we use bootstrap modal to see how bootstrap javascript actually works.
## install react with CRA
first we install react application with create react app. to install react app run this command:
```
npx create-react-app react-bootstrap
```
then go project directory, install dependencies and run the CRA server.
## install bootstrap 5
now the react app installed we should install bootstrap and node-sass for compile scss files. run this commands:
```
yarn add bootstrap@next node-sass
```
now we can load bootstrap styles. in `index.js` file we can easily load bootstrap.scss like this:
```javascript
import 'bootstrap/scss/bootstrap.scss'
```
if we use bootstrap classes for e.x. btn classes like `<button className="btn btn-primary">test</button>` we will see styles applied.
## use bootstrap modal
bootstrap besides the styles give us some javascript that make our life easier and modal is one simple example. for this we will use bootstrap docs modal example. you can use this in any component template.
```javascript
{/* show btn Modal */}
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

{/* Modal */}
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```
there is two parts here one is the button show the modal and second part is the modal. so if we use this nothing works, why? because we just load styles not bootstrap javacript. so we load it too. with `import { Modal } from 'bootstrap'` we can load only the bootstrap modal javascript part, awesome. but we will get an error that says @popperjs/core package not installed. lets install it with this simple command:
```
yarn add @popperjs/core
```
bootstrap need this package for javascript part. now modal should works. nice :) but we havent use react vDOM too make this modal work lets do it with vDOM.
## use virtual dom
react and vue use virual dom and because of that we use mostly with state in this frameworks but when we need to use dom elements not state like when want to focus input we should use refs. there is two ways to use bootstrap javascript one using data-bs, two use javascript. with second way we can use refs to make modal works. bootstrap docs says we can use it like this:
```javascript
var myModal = new Modal(document.getElementById('exampleModal'), options)
```
Modal is the one we imported earlier. we can replace document.getElementById('exampleModal') with our ref and we will name our ref exampleModal. we will need a state for modal to show and hide the modal. and for that we will use react hooks:
```javascript
const [modal, setModal] = useState(null)
const exampleModal = useRef()

useEffect(() => {
  setModal(
    new Modal(exampleModal.current)
  )
}, [])
```
with modal.show() we can show modal and for hide just use hide method and the button for show modal will be like this:
```html
<button type="button" onClick={() => modal.show()} className="btn btn-primary">
  Launch demo modal
</button>
```
and now we use vDOM to use bootstrap modal. good job :)) the hole simple component will be like this:
```javascript
import { Modal } from 'bootstrap'
import { useState, useEffect, useRef } from 'react'

function App() {
  const [modal, setModal] = useState(null)
  const exampleModal = useRef()

  useEffect(() => {
    setModal(
      new Modal(exampleModal.current)
    )
  }, [])

  return (
    <>
      {/* show btn Modal */}
      <button type="button" onClick={() => modal.show()} className="btn btn-primary">
        Launch demo modal
      </button>

      {/* Modal */}
      <div className="modal fade" ref={exampleModal} tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" className="btn-close" onClick={() => modal.hide()} aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={() => modal.hide()}>Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
```
## Summary
we created a react application and installed bootstrap. then we used bootstrap modal with data-bs and easy way but after that used react vDOM and correct way. i hope this short post helped, i covered this topics in my course and shared my little Knowledge about this topic.

In this post we will see how use bootstrap in vue application. because bootstrap 5 drop support jQuery we can easily use it without an ui framework like bootstrap-vue. first we load bootstrap styles and then we use bootstrap modal to see how bootstrap javascript actually works.
## install vue with vitejs
first we install vue application with vitejs. you can use vue-cli if you want but here it doesnt matter. for install vitejs app run this command:
```
npm init @vitejs/app
```
meanwhile this will ask you project name and application template. for template select vue. then go project directory, install dependencies and run the vitejs server.
## install bootstrap 5
now the vue app installed we should install bootstrap and sass for compile scss files. run this commands:
```
npm install bootstrap@next
npm install -D sass
```
now we can load bootstrap styles. in main.js file we can easily load bootstrap.scss like this:
```javascript
import 'bootstrap/scss/bootstrap.scss'
```
if we use bootstrap classes for e.x. btn classes like `<button class="btn btn-primary">test</button>` we will see styles applied.
## use bootstrap modal
bootstrap besides the styles give us some javascript that make our life easier and modal is one simple example. for this we will use bootstrap docs modal example. you can use this in any component template.
```html

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```
there is two parts here one is the button show the modal and second part is the modal. so if we use this nothing works, why? because we just load styles not bootstrap javacript. so we load it too. with `import { Modal } from 'bootstrap'` we can load only the bootstrap modal javascript part awesome. but we will get an error that says `@popperjs/core` package not installed. lets install it with this simple command:
```
npm i @popperjs/core
```
bootstrap need this package for javascript part. now modal should works. nice :) but we havent use vue vDOM too make this modal work lets do it with vDOM.
## use virtual dom
vue and react use virual dom and because of that we use mostly with state in this frameworks but when we need to use dom elements not state like when want to focus input we should use `ref`s. there is two ways to use bootstrap javascript one using data-bs, two use javascript. with second way we can use refs to make modal works. bootstrap docs says we can use it like this:
```javascript
var myModal = new Modal(document.getElementById('exampleModal'), options)
```
Modal is the one we imported earlier. we can replace `document.getElementById('exampleModal')` with our ref and we will name our ref exampleModal. we will need a state for modal to show and hide the modal.
```javascript
  data: () => ({
    modal: null
  }),

  mounted() {
    this.modal = new Modal(this.$refs.exampleModal)
  }
```
with `modal.show()` we can show modal and for hide just use hide method and the button for show modal will be like this:
```html
<button type="button" class="btn btn-primary" @click="modal.show()">
  Launch demo modal
</button>
```
and now we use vDOM to use bootstrap modal. good job :)) the hole simple component will be like this:
```html
<template>
  <button type="button" class="btn btn-primary" @click="modal.show()">
    Launch demo modal
  </button>
  <div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="modal.hide()">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
  name: "App",
  data: () => ({
    modal: null
  }),
  mounted() {
    this.modal = new Modal(this.$refs.exampleModal)
  }
};
</script>
```
## Summary
we created a vitejs vue application and installed bootstrap. then we used bootstrap modal with data-bs and easy way but after that used vue.js vDOM and correct way. i hope this short post helped i covered this topics in my course and shared my little Knowledge about this topic.

Full-stack developer

Tofiq Hamzai

Recent posts

Skills

Front-end

Back-end

Interested

Contact me

About me in a nutshell

profiles