Developing Kibana plugin using ReactJS - javascript

I would like to create a Kibana plugin using ReactJS as the preferred javascript framework. It seems like is possible, but the documentation and examples are definitely sparse. I have set up the local environment as far as running Kibana, kbn bootstrap etc and modified the app.js as one would when working with a react application.
In the index.js of the plugin I have
app: {
title: 'Reactisearch',
description: 'Sample Kibana plugin using ReactJS and Elasticsearch',
main: 'plugins/reactisearch/app'
},
in the uiExports. My only trouble is that traditionally in a React application the index.html would be elsewhere with a target element in the DOM for the app to render to. I can't seem to get this portion working. I do have
ReactDOM.render(<Base />,document.getElementById('root'));
within the app.js as you normally would but it is apparent there is a disconnect from there on. I understand if you were using Kibana's(Angular) routing you could do something like
uiRoutes.enable();
uiRoutes
.when('/', {
template,
...
});
where the template is referring to the angular template but since I am not trying to use angular, then what?
Bottom line is would like to develop most (if not all) of the plugin in React, but if there must be a little angular I suppose that is okay. This is only the second day even looking at Kibana so sorry if some of this stuff is obvious.
If it matters I am targeting the latest of everything.

Related

Astro - react useEffect hook is not working

I am trying to build a web app with Astro + Reactjs, but I got an issue on calling useEffect. Basically useEffect is not calling, I don't get any logs in the terminal or any warnings/errors in the terminal or in the browser.
I am exporting the function as: export default function SecondSection(){}, I changed the file extension from .jsx to .tsx, still no result. I followed all instructions from astro docs to integrate react.
I am trying to use react hooks, like useEffect/useState, but for some reasons it's not working any of that.
What can cause that issue? Thank you for your time.
The first thing to check would be to make sure you are hydrating your React component where you’re using it. In Astro, components ship zero JS by default, just plain HTML. Components will only be interactive in the browser if you add a client:* directive. This is part of Astro’s “Islands Architecture”.
To include a component’s JS you need a client directive saying when to load it. In this example the component will load its JS when the page loads:
---
// src/pages/index.astro
import SecondSection from '../components/SecondSection.jsx';
---
<SecondSection client:load />
There are different directives like client:idle or client:visible that you can use to control exactly when a user needs the interactivity. There’s more about the client directives in Astro’s docs.

Integrate React components into an existing NET Core app

I have an existing application build with .Net Core Framework. I would like to integrate React components for re-usability purposes which at this point will only be app specific. I have gone through numerous "Hello World!!" tutorials but that doesn't satisfy my need. I have also looked at reactjs.net but that also is not going to help me as the components gets rendered on the View
Scenario
Application has lots of Modals with a form which gets rendered on numerous pages. Currently it is being handled with JavaScript. The JavaScript code gets duplicated a lot to achieve it.
Goal
Would like to have a react component to replace above mentioned functionality to reduce code getting duplicated.
The problem I am facing is I am not sure how will I be able to interact with the component from a jQuery/JavaScript point of view.
Example
I have a DataTable and one of the actions is to click on a certain button to display the Modal. The code is in a separate .js file so it is separate from the View. So in this case if I click on a button I would like to render the react component. I would need to pass props through to the components and that is where I am uncertain how would I handle it :-(
Any suggestion or guidance would be appreciated.
Thanks in advance
Using react in Asp.Net Core application is easy. At first you need to know your back-end will be API based to communicate with react. So if you have not set up your Core application to an API based, it won't work. Also make sure you have installed nodeJs and other dependencies.
To get started with react, create a new folder in your Asp.Net project solution.
Open the folder in your Command line and execute:
npx create-react-app [your--folder--name]
To view your created app, run
npm start
To get started with asp.net, you need to add spa dependencies in your project.
Then you have to set up your ConfigureService method to include:
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "[your--folder--name]/build"; });
Finally set up your Configure method to include:
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints( ... );
app.UseSpa(spa => {
spa.Options.SourcePath = "[your--folder--name]";
if (env.IsDevelopment()) {
spa.UseReactDevelopmentServer(npmScript: "start");
}
});

Integrating template with current project

I currently have a React web app that I am creating, (used create-react-web-app). I want to integrate the following template: https://www.creative-tim.com/product/material-dashboard-react
on the user account page however since this is an entire web app, am having difficulties doing so (there are differences in package.json, and file structures ect).
Currently, I have the basic setup with firebase and am doing the following:
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
render(<UserPage user={user}>, document.getElementById("root"));
} else {
render(<App user={user}>, document.getElementById("root"));
}
}
I want to set it up so that this template is shown on the UserPage.
I have tried to copy files over, and change the package.json to cooperate with both my current app, and the template.
I dont know exactly what you want to accomplish?
If its working wheres the problem?
In the end the react code cann be confusing in terms of where to start the app. But in the end when you use webpack to build your app, the JSX will be replaced by native JS and therefore you just have to call ReactDOM.render in the JS file you want to append the element.

How can I add Vue or React to an existing Wordpress site?

I'm wondering what's the best way about adding a front end, componentized framework to a Wordpress site without using the Rest API.
I'm taking over two sites built with the Woocommerce Storefront theme, and I'd like to add a reliable front end library. Would it be best to just build my own as I need it? I'd like to avoid jQuery as I find it gets messy pretty quickly.
Would a good course of action be to build a plugin which generates a Post type with the framework added in, or is there a way I can add my framework to the whole site and implement it incrementally.
If you start a new project from scratch, I would recommend using Sage: https://roots.io/sage/.
One big deal when it comes to use React / Vue.js for any kind of projects is you need to setup the build (using Webpack for example), to compile them and get the best of out these frameworks. Sage takes care of these tasks for you and have webpack and browserify integrated so you have hot loading for dev and proper build for production. That's really an advantage.
With your case, because your sites have been built using Storefront, so integrate fully with Sage seems to be not an option, however, you can still borrow some ideas from Sage.
Sage set it scripts up in the way that your script can be separated into routes, though these routes are not exactly the same as ones of a single page app. Basically, they have an util function called Router, which will execute JS functions based on the classes inserted into the body element. I find it works extremely well with Vue.js and React. For instances: in your homepage, you want to place couple of Vue components inside a <div id="homepage"> element, you can define it as follows:
export default {
init() {
new Vue({
el: '#homepage',
name: 'HomePageApp',
components: {
...
},
});
},
finalize() {
// JavaScript to be fired on the home page, after the init JS
},
};
Then import and add it to your Router:
const routes = new Router({
...
// Home page
homepage,
});
I recommend having a look at how Sage does that in your Github repo, it's pretty straight forward and guarantee a well-organised, well-structured front-end: https://github.com/roots/sage/blob/master/resources/assets/scripts/main.js

HammerJS Integration with Meteor and ReactJS

I'm looking to add Hammer JS to my app built on Meteor with React. I am running into a problem when integrating different libraries.
Currently, I've tried a few different available libraries like:
https://github.com/JedWatson/react-hammerjs, but I receive this error:
I've also looked into:
https://atmospherejs.com/chriswessels/hammer
but, it doesn't look like it supports ReactJS. If anyone can help point me in the right direction, or point to what they have done please let me know!
You can add Hammer library to your web page and use it from React code.
Linking
I'm not sure about your project structure. I just downloaded the js file, put it in the public folder and added corresponding <script> tag before the one which points to js file with bundled React code.
Usage
As described here you can go with the following code:
componentDidMount: function() {
this.hammer = Hammer(this.getDOMNode())
this.hammer.on('swipeleft', this.swipeLeft);
},
componentWillUnmount: function() {
this.hammer.off('swipeleft', this.swipeLeft);
}

Categories