Hi all! In this last article of the series Bundling a React Component library to be used in non-React application, so far we have seen how we can create a reusable library, bundle using Gulp and host and test using Apache server.
Today we will look into how we can consume it in a non-react application.
Our react component library does provide a method called as getReactCarouselRenderer which in turn provides reference to a method for rendering carousel component.
Creating a Vue.js App
Let's create a simple Vue.js Application which will work as a consumer for this library.
We will use Vue.js CDN and also include custom css, bootstrap dependencies listed below:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<!-- Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
Followed by above, we will include Babel, React and React-DOM as we seen in the part-I of this series.
We will also include reference to our carousel component, which is hosted on the Apache server. While including, please make sure type of this is set to "text/babel" as this is an indicator that this file needs to be transpiled by babel when loaded.
Also include your Vue app scripts.
Vue and other dependencies
So, at a glimpse, this is how our imports in html looks like:
<!-- Bootstrap.min.css dependencies -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
/>
<!-- Custom CSS Dependencies --> <link type="stylesheet" href="./index.css" />
<!-- React Component CSS Dependencies --> <link type="stylesheet" href="http://localhost:80/Carousel.css" />
<!-- jQuery, popper and bootstrap.min.js dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<!-- Vue.js dependency -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
<!-- Babel.min.js Dependencies -->
<script
src="https://unpkg.com/babel-standalone@6/babel.min.js"
defer
></script>
<!-- React, React-DOM production Dependencies -->
<script
src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"
crossorigin
></script>
<!-- Your React Component exported as JS file, directly refered from Apache Server where its hosted -->
<script
type="text/babel"
src="http://localhost:80/Carousel.js"
defer
></script>
<!-- Vue App JS Files -->
<script defer src="./myVueApp.js"></script>
</body>
The Vue app I have created is a simple app which shows a button and a message.
On click of a button, it does all the things which we manually did while testing our component once it was hosted on Apache server.
I'm also using an dummy list of books which needs to be sent as a props with React component and will be rendered as a carousel.
myVueApp.js File
Lets looks at contents of myVueApp.js:
let vue_det = new Vue({
el: "#intro",
data: {
message: "This is a Vue JS Application!",
reactMessage: "Click button to render a React Carousel inside Vue App!",
myRenderer: null,
books: [
{
id: 1,
title: "Life's Amazing Secrets",
author: "Gaur Gopal Das",
coverImage:
"https://images-na.ssl-images-amazon.com/images/I/51PJyvcfPGL._SX321_BO1,100,100,100_.jpg",
},
{
id: 3,
title: "The Alchemist",
author: "Paulo Cohlo",
coverImage:
"https://images-na.ssl-images-amazon.com/images/I/410llGwMZGL._SX328_BO1,204,203,200_.jpg",
},
....
],
},
methods: {
renderCarousel: function (event) {
//get reference to the ReactCarouselRenderer
const myRenderer = window.getReactCarouselRenderer();
//call react component by passing parameters to the function
//which in turn will call Carousle component & pass books as props
myRenderer(this.books, "root");
//change message
this.reactMessage = "React Carousel component rendered successfully!";
},
},
});
Please note that even though I'm using dummy books objects, you can also use HTTP calls and get the response you want to render as a carousel.
In the above code, myRenderer will get reference to the ReactCarouselRenderer.
Using it, we can call react component by passing parameters to it which in turn will call Carousel component by passing books as props object!
Index.html File
<div class="col-md-6">
<div id="myVueApp" style="text-align: center">
<h1>{{ message }}</h1>
<h4>{{ reactMessage }}</h4>
<button class="btn btn-primary mybtn" v-on:click="renderCarousel">
Show React Carousel
</button>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div
id="root"
class="mh-25 d-inline-block float-left"
style="background-color: rgba(0, 0, 255, 0.1); text-align: center"
style="text-align: center"
></div>
</div>
</div>
Output
When page is loaded:
React Component in Action in a Vue Application
By following above mechanism, you can bundle multiple react components and use them in other applications.
Use-case for such libraries could be to export react components and re-use them in other React or non-react applications. Also, such libraries can be really useful in professional services world!
We have seen how we can create an JavaScript exportable react component, bundled it using gulp, hosted it on Apache server and finally consumed it in a Vue Application!
Comments
Post a Comment