I'm looking for a way to add something like Siri (powered by ChatGPT), into my React project.
I recently tried out this package https://github.com/sista-ai/ai-assistant-react and was amazed by how easy it was to set up. Literally just a couple of imports, and it was up and running!

However, I'm wondering if anyone else has tried this or if there are other similar tools out there. I'd love to compare experiences and see if there are other options that offer a similar plug-and-play experience. Any recommendations or insights would be greatly appreciated!

We’ve started on building an in-house ERP and are finding that some of these applications have a much larger scope than initially perceived. I’m trying to plan out some of our options right now and am wondering if anyone’s had experience in this space?

One example is the accounting platform. We’ve looked into temporarily implementing this portion with other potential services (Quickbooks API), and are on the look out for accounting software we could deploy ourselves. Another example might be inventory/sales management system.

We essentially want to get this ERP up and running, and then slowly build out those portions of the product that we will probably end up supplementing with external services in the meantime.

Any insight would be much appreciated!

We just dropped a new video today on how to handle your .env files with Remix (or soon to be react-router 7) and Vite

We go over server/client sides and how to not leak your .env, all the approaches you can use, and what we recommend to do!

Check it out here:

https://youtu.be/7Yk2YjAJSRQ

I'm looking to create an embeddable web widget with react. Are there good guides I should reference or template code I can use? Appreciate the help!

Welcome to El Frontend, your go-to channel in Spanish to learn and enhance your skills in web development! Here you will find tutorials, tips, and resources to master the world of frontend and stand out in the digital industry. Join our community and together, let's make the Hispanic community shine in the world of web development!

https://youtube.com/@ElFrontend?sub_confirmation=1

I hate this pattern and reminds of when React didn't embrace yet a functional approach, I am brushing up on some React and Angular for some job interviews and I wonder if I should I even bother with HOCs....

export const useAutosizeTextArea = (
  textAreaRef: HTMLTextAreaElement | null,
  value: string,
) => {
  useEffect(() => {
    if (textAreaRef) {
      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
      textAreaRef.style.height = '0px';

      const scrollHeight = textAreaRef.scrollHeight;

      // We then set the height directly, outside of the render loop
      // Trying to set this with state or a ref will product an incorrect value.
      textAreaRef.style.height = scrollHeight + 'px';
    }
  }, [textAreaRef, value]);
};

This is now giving a warning:

Mutating component props or hook arguments is not allowed. Consider using a local variable insteadeslint(react-compiler/react-compiler)

I'm trying to re create this codepen but with horizontal scrolling instead of the vertical scrolling in the codepen. The thing is, I can't even make it work. I copied the pen, but it's not working in my react project.

The codepen link and my code is in the following stackoverflow link:

https://stackoverflow.com/questions/78490030/horizontal-parallax-with-gsap-and-react-js

I have created a build of a react app and now I want to use it in another(parent) react app. But when I am trying to run the parent app it is throwing minified react error #299 that the div is not currently in the DOM. I have tried setting setTimeout but it still is not working

​

export default function ChildComponent() {

useEffect(() => { const loadScript = () => { // Create a script element const script = document.createElement("script"); script.src = childScript; // Replace with the correct path script.async = true;

  // Callback function to be executed after the script is loaded
  script.onload = () => {
    // After the script is loaded, mount the child app into the child-root div
    const childRoot = document.getElementById("child-root");
    if (childRoot && window.ChildApp) {
      // Ensure the child-root div exists and the child app is available
      window.ChildApp.mount(childRoot); // Assuming you have a mount function in your child app
    }
  };

  // Append the script to the document body
  document.body.appendChild(script);

  // Clean up function to remove the script element when the component is unmounted
  return () => {
    document.body.removeChild(script);
  };
};

// Load the script after 2 seconds
const timeoutId = setTimeout(loadScript, 2000);

// Clean up function to clear the timeout when the component is unmounted
return () => {
  clearTimeout(timeoutId);
};

}, []); // Empty dependency array to run the effect only once

return <div id="child-root"></div>; }

​

So I was learning about custom react hooks and almost all of the tutorials when returning functions from the hooks have them wrapped in useCallback and the reason given is that on each render, react creates a new reference to the functions which may cause existing functions to become outdated.

But my question is, everytime the hook is created again, it will cause the component where it is accessed to render again as well. Will this not automatically update all the variables and the function references used inside the component? So we no longer have outdated references?

Let's say I have a book site, where a button fetches all books in a library and displays them (need to call the 3rd party api and doesn't need to communicate with the app's server) but also has requests where it gets the user's saved books, and extra data, which would require communicating with the app's server.I am confused if at the first example I should simply let the front end talk to the 3rd part api, or make it talk to the server's api and the server would talk to the 3rd party (maybe this is better so I keep the api key hidden)Thanks.

const children = () =>  <div>children</div>
//1
const parent = () =>  <div>{children}</div>
//2
const parent = () => <div children={children}/>

I think there are 2 ways to render children in parent component. I wonder their differences.

I built a react app using vite and I now want to build and deploy it on a VM. When I tried to look up how to do this I only found tutorials on how I can deploy it on vercel, github pages or other services. Is there a way I can deploy this app without using those services, on a vm locally?

Hey everyone, I have a test and a slice which initial state has a property called hasError which default value is false, and a reducer that just changes that value to true.

But I don’t understand why the value is false after the dispatch, is it because of destructuring the object only once ? It is not supposed that destructured value is by reference ?

It(“test”, async()=> {

const {mySlice: { hasError } = store.getState();

console.log(hasError) // false (as initial state) Await store.dispatch(setErrorAsTrue()); console.log(hasError) // still false

}

But:

It(“test”, async()=> {

console.log(store.getState().mySlice.hasError)
// false (as initial state)

Await store.dispatch(setErrorAsTrue());

console.log(store.getState().mySlice.hasError)
// now it is true

}

Some people need the chart implemented with svg, Others require chart to be made of canvas. why is there different opinion?? please share your insight

View Poll

Has anyone done Maximilian Schwarzmüller's updated NextJS course?

I have completed his React course where he includes about a 3-4 hour section on the App Router. I am not interested in learning more about the Page's Router.

I see his Next Course has been recently updated. Some older reviews say that the content is out of date and covers Next 13 mostly.

From Udemy I can see there is at least another 4 hour section about the App Router, but I don't know if this just covers the same content as his React course. There is about an 8 hour React refresher which I am also not interested in.

I only really want the course if there is enough additional content specifically on the App Router, but I can't find enough info just from Udemy directly or reviews. You can't order reviews by most recent, there's no Q&A section so here I am.

Our current setup

1. Vite with custom npm packages added on need basis

I am thinking about

1. NextJS
2. Remix + react-router + tanstack

My requirements

1. We deploy to Google Cloud using managed services like the Load balancer acting as server and Cloud storage to store static build. Ready to spin up Google Cloud run as well.
2. Mostly Client side rendering
3. SSR / SSG for landing pages only
4. Need to separate environment variables from the build (Pain in the ass while keeping static build on Cloud storage bucket, Their change usually requires rebuild, I have separated them out using a /env endpoint in my BFF, Would like to have something that has better support for this)

Anything else I should look at?

Hi folks, I am building an nextjs app which has a map component and it renders a geojson layer on the base map. The geojson file is pretty big (5MB)

Currently I simply wrapped the json content as a JavaScript variable. As you can imagine, bundle size for the map component is 5MB+. This is obviously not ideal. Not only it makes the website slow to load; it also significantly increases the bandwidth consumption because each time a user loads the page, it downloads 5MB from next js server. Over time, it could lead to unnecessary host cost.

I would like some tips around how I can best serve this geojson file. I have only some general ideas and really struggle because my lack of experience in web development:

• put the geojson file in ‘public’ folder as static asset. However I think this doesn’t make much difference because it would still need to be downloaded from nextjs server.
• use SWR or useEffect() to load the file from S3 when the website is loaded. I am just afraid that downloading 4MB from S3 would significantly slow down the loading process. Should I be concerned?
• Put it in ‘public’ and use some sort of CDN solution. I never used CDN myself, my concern is that it might be expensive if my site is maliciously loaded by a bot and needs to fetch from CDN too often.

Could anyone shed some light which direction I should pursue?

Thanks.

Update: following a comment, I would like to share more context around what this geojson is for:

“Basically I have a button “show county layer on map” - once the user clicks it, it displays all the counties on the map so user can click individual polygons(counties) to explore them.

My current design/thought is to load the geojson data at the beginning when the site is loaded. But I have also thought about not letting it block the other parts of the website (because user most likely won’t go straight to click the display county button), and let it download in the background - I just don’t know how that can be implemented in React, do you know?

Regarding if I can split the data into chunks - Yes! I can split them. Are you suggesting downloading them in smaller chunks? What’s the benefit of it in this context?”

Hey folks,

Might be the wrong sub but I wanted to build my own wedding rsvp site for my wedding. What's the best tech stack to use nowadays?

Also wanted to use this as an opportunity to write a flask app but might be the best use case. lmk what ya'll think!

Link: https://neobrutalism-components.vercel.app/templates

I'm trying to create a table-like grid that can give me the following sort of look:

[empty] 1 2 [empty]

3 [empty] [empty] 4

[empty] 5 6 [empty]

except I have run into a big issue. The first thing I turned to, mui's reactgrid, but that was a struggle that resulted in no success. I'm now just really confused on what I can use to do this. Anyone got any tips?

The browser itself if keeping track of the event objects right? I'm trying to understand how it is working internally and in depth because the actual workings of this concept is kinda confusing me.

My confusion revolves around how JavaScript interacts with the browser and it's event objects with a single line of code- (blank).addEventListener('click', ()=>{})

So I get that the event listeners are a function, but how is that function working? We are referencing the element that we want to add the event listener to, so javascript is able to go into the browser web engine, access the DOM and html elements. Since HTML and CSS are not actual programming languages and are simply markup languages, I think I understand how JavaScript is able to interact with it. The markup language has "elements" and the definitions are coded and stored in it's memory right? For example- the <li> tag is associated with the list element, somewhere in the memory. Each character/letter in the code can be understood by the cpu, it understands <blank> is the attempt by the programmer to initialize a element, it gets what is between those elements and it accesses what it means and how to display it... right?

The bridge is the DOM, which is essentially just a written representation of the visual element that is the website. We see the background color as red, but the DOM sees it as background-color:red. And javascript when it interacts with the DOM sees that this is an object, and it has the ability to update and manipulate objects, that is the core functionality of programming languages like javascript. HTML and CSS however see it differently, more visually in a way, it sees - background-color:red and css has a defined value of what red is in visual terms. The concept of how computers are able to deal with videos and pictures are still hazy to me but fascinating.

Okay that is my understanding of how JS and the DOM works, correct me if I am wrong PLEASE. Now back to the event stuff. So event itself is just an object like event:(event). It is created to store the details of the event because this is necessary to make websites dynamic, without the event object, a lot of the dynamic functionalities we see in websites would not exist.

So now the hazy part- How is the event being stored. Is it continuously keeping track of every element in the HTML, and storing every change in memory somewhere? No right? That is extremely inefficient and would slow down the program a lot. So does it only keep track if there has been a specified eventListener that has been initialized? The webpage has multiple elements, you have input elements but also stuff like just normal header elements (<h1></h1>) now, it doesnt make sense for the DOM to keep track of onClick events for the header right if the header is static, same goes really for anything on the webpage that is static, and has no click features of stuff like that. Even on the input, for example, if I just for some odd reason decided to put an input element, but I did nothing with it, no interactions/ dynamic functionality, does the DOM keep track of the events related to it like onChange?

So is it that whenever I initialize a eventListener in javascript, is it like the DOM itself almost has a listener function also or how does this work? Which listens for whenever I add and eventListener. So whenever it does find an eventlistener that has been initialized, THEN does it start to keep track of the event and store it?

My main confusion is how the fck does the DOM pass the event object to the eventListener? Where is the DOM object being stored in javascript and how is the function able to access it- .addEventListener("click", myFunction()=>{})? So I asked AI and they said event is not directly pushed to the function as a argument, so then... WHERE TF DOES IT STORE IT.