We Keep Coding

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");
}
});

How to use React in multiple places in a normal website

I have a new website which isn't a single page app but a server rendered website (asp.net using Umbraco CMS). I used to use Angular 1.x in my websites, which is easy because you just load it in with script tags and the code is uncompiled.
I have been using React recently in SPAs started with create-react-app which looks after webpack, babel etc. for you and produces a single bundle. However, I want to use React in several places on the website like the main header/menu, contact forms etc so it makes sense to produce multiple bundles, although these bundles may share imports (Moment.js, Formik etc.).
There are instructions on the React website showing how to include a single script and attach it to an element in yourwebsite, but no complex examples.
So, how do I go about setting up something that will transpile everything without duplicating code in bundles. Do I need some kind of master bundle loaded on all pages and individual bundles for things like a contact form?
Secondly, how do I wire everything up? In an SPA you just have a root node and bind your app to the root node using react-dom, but if you've got mini pieces of react functionality littered through your app then do you need some kind of master script to bind everything to the right elements?
Any help would be greatly appreciated, even if it's just pointing me in the direction of some kind of boilerplate project.
Oh, and I'm not interested in doing a server side rendered Next JS app or anything like that, I think that could get too complicated to integrate with the CMS.

I think you can make a single bundle, rendering multiple component to different places. I created a little example:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Body</h1>
</div>
);
}
function Footer() {
return (
<div className="App">
<h1>Footer</h1>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
const footerElement = document.getElementById("footer");
ReactDOM.render(<Footer />, footerElement);
You can play with it in this sandbox example. https://codesandbox.io/s/34nvv4nvy5

In addition to the answer above you can exclude React, ReactDOM or/and React Router (and any other dependencies) from your bundles and include them on the page so you aren't bundling them X amount of times. This way you can have separate entry files for each application.
webpack.config.js
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
}
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js" integrity="sha256-JBRLQT7aJ4mVO0H2HRhGghv/K76c5WzE57wW0Flc6ZY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/cjs/react-dom.production.min.js" integrity="sha256-j2ERTIovDFVe0R+s0etuSiBQ2uxrNE6q0ow/rXxHvLA=" crossorigin="anonymous"></script>

If you want to render elements "outside" your root element of the react application, then you can use react Portals. We are using this approach as well and it's going well.
If you still think you want multiple mini react applications that run on the same page, you can communicate with them with the help of ReactDOM.render. Basically, ReactDOM.render can get invoked multiple times, it won't re-mount the entire application but instead will trigger updates and diffing to the react tree (same as a normal render method of components).
In fact, i wrote an article with a tutorial on how to Integrate React with other applications and frameworks.
I also tried to simulate this approach with a codesandbox example
Hope that helps.

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

Developing Kibana plugin using ReactJS

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.