Questions tagged [reactjs]

The tag has no usage guidance.

36 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
4
votes
1answer
115 views

ReactJS with Elasticsearch App Architecture

I want some advice regarding my architecture and hosting options. I'm attempting to build an e-commerce site for e-books. It will use nestJS for the backend and ReactJS+Typescript for the frontend. ...
3
votes
0answers
195 views

Architecture and Security in a Web/Native app while generating PDFs

I am trying to make a system where a user can view/download his statements (say salary slips). The user will have ability to download PDF versions of these statements and can also save them to Google ...
3
votes
0answers
593 views

Fetch data in parent vs fetching data in child

I know that I want to develop a React App like so: <PhotoPage> <FeedFilter/> <PhotoFeed/> </PhotoPage> Without using Redux, I know that I need to fetch a dataset of ...
3
votes
0answers
391 views

React DOM manipulation vs CSS for responsive breakpoints?

Specifically for ReactJS and responsive frameworks that show/hide elements based on width like Bootstrap. Because ReactJS has a virtual DOM I am presuming doing the DOM manipulation is faster and in ...
3
votes
0answers
342 views

Hot swapping files and metaprogramming with front-end JavaScript

I was inspired by a video on hotswapping JS files with React + Webpack for the web. I started trying it out with React + Backbone + RequireJS. Seems to work, as long as I stick to the stateless parts ...
2
votes
0answers
106 views

React Hooks: using state in useEffect without depending on it

I have run into a situation in React where I want to run a function F in a useEffect hook whenever a value V1 from the store changes. F uses another value from the store V2. I only want to run F when ...
2
votes
0answers
104 views

Dependency injection of UI components via React context

In React, it's common for libraries, and app-internal utilities, to used context-based dependency injection. Some examples: function MyComponent() { const client = useApolloClient(); // Apollo ...
2
votes
0answers
2k views

Updating nested state with React Hooks and Typescript - performance vs clarity

I have some deeply nested react components. Let's limit them to 3 levels of nesting and call them Parent, Children and Grandchildren. The state for the entire app is stored in a single object in the ...
2
votes
0answers
75 views

Where to store the state of a complex form in React?

Let us consider a complex form of registering a driver and owner. The driver will have all these fields: driver = { firstName: "xyz", lastName: "abc", phone: "1234", email: "m@g.com, licence: "...
2
votes
0answers
352 views

Implement FSM explicitly in re-frame/reagent/react?

I'm in the process of making a simple game using re-frame (and thus react and reagent), but I'm stuck at one point. In https://github.com/Day8/re-frame#control-via-fsm they claim Not every app ...
1
vote
0answers
76 views

Reactjs + nodejs external authentication flow

I am developing a RESTful application with nodejs in the backend with express.js as middleware. I am also developing a client in Reactjs. I want to use an external authentication service (LDAP/AD/ADFS)...
1
vote
0answers
13 views

Best way to allow other components to change table's focused row?

I have displayProjectTable that gets state from reducer projectData and populates itself. Currently displayProjectTable has a local state that stores focusedRowID. My problem is that I want other ...
1
vote
0answers
113 views

Where to place code which synchronizes state of Redux with localStorage?

In our project, I was need to sync a piece of information between localStorage and the Redux state. Actually I subscribed to changes in a localStorage and in Redux, and if change happens in ...
1
vote
0answers
117 views

Is it better to have a default avatar library on client or server side?

I have a webapp using ReactJS as the frontend and Rails as the backend service. I have an account manager, where a user can choose multiple avatars from a default library. This library contains ...
1
vote
0answers
418 views

Plugins system for an Electron/React app

I'm developing a Electron/React app which uses Webpack and Asar technologies. It's designed to be a host app providing a common platform for some plugins. These plugins are downloaded and plugged into ...
1
vote
0answers
197 views

Write integration tests with React using Jest

Let's imagine that we have this Page component: const Page = () => <> <Topbar /> <Drawer /> <Content /> </> I'd like to test some interaction within ...
1
vote
0answers
173 views

How to Implement Certain timeout session on multiple pages of a website - REACTJS

Suppose there 5 pages to a website. User flow will be 1->2->3->4->5->FINISH. I want to implement is that whenever a user enters page 3 a timer starts and if he doesn't finish a task ...
1
vote
0answers
31 views

React JS: Mixing data types for one state property

In the spirit of minimising state I always have a desire to mix data types for a given state property. For instance, if I were creating a React page that rendered a list of items that could either be ...
0
votes
0answers
22 views

React Redux chain-of-actions pattern - should I create new synchronous middleware for synchronous actions?

I am creating React Web application with Yii2 API and Redux-Saga which calls Yii2 API (asynchronously). I am stuck with one especially large and complex user action (initiated by the selection of good,...
0
votes
0answers
33 views

Push Notifications from React JS / PWA?

I've built a React JS app that is used by PC and Tablet users alike. Some iOS users also bookmark the site to create a PWA, which works really well. So everything is fine, except i need Push ...
0
votes
0answers
30 views

Design to store user information in session storage in react

Wanted to ask if the following design is okay based on my requirements: Brief Description of my requirements: I have a requirement to gather some info from the user and then the user attaches a file ...
0
votes
1answer
336 views

Is it an anti-pattern on React to search for children with a specific element type?

Context When designing the API of a React component, you may decide to receive props in a more semantical way. Here's a simple example <Modal headerTitle="foo" /> vs <Modal> &...
0
votes
0answers
30 views

Methods for storing data pre-registration in a web app

I have a web app - it's more complicated than a todo list but for simplicity sake let us assume it is a todo list. The user has the choice to sign up and create an account thus allowing them to store ...
0
votes
0answers
103 views

Handling user permissions in front-end

I'm building an API that will be used by the front-end in React and I'm not quite sure how I should send the permissions of each user based on their roles. Some fields can only be edited in some ...
0
votes
1answer
313 views

Integrate react app with php app

I have an old php web application, with very bad code. While a lot of it just has html and ajax calls in the, the wrapper is still php. I want to develop the new modules in react, and slowly replace ...
0
votes
0answers
64 views

Do database CRUD operations dictate whether and application should be one-way or two-way binding?

I am confused (easily done). To me model is the data from the database sent back as JSON. When I think of that in an Angular context, when two-way binding is configured, it makes me think the ...
0
votes
1answer
219 views

Does Angular2 or Angular4 offer an app state and middleware promise like React / Redux?

I used Angular 1 and React / Redux, and one thing I like about React / Redux is that there is a definite app state, and a middleware that can convert a promise into real data. In Angular 1, we often ...
-1
votes
0answers
38 views

React: how to set the state of a component from an external function using logic based on the CURRENT, UPDATED state of that component?

If you want to set the state of a component A from within A using logic based on the current, updated (!) state of that component, you can use the updater function which passes the current, updated ...
-1
votes
1answer
35 views

Where should I put/handle periodic data updates in React?

I'm following the guide in https://reactjs.org/docs/thinking-in-react.html which makes sense for data that I request and update on a filter. However, I want to have some sort of general ...
-1
votes
1answer
64 views

Loading in and Autocompleting a CSV File React

I'm currently working on a React Application with Firebase that involves a ton of data manipulation and reading. One specific feature is the ability to autofill a form based on a very large CSV file (...
-1
votes
1answer
860 views

Recommend a way to handle multiple UI frameworks in a pattern library

We are setting up a pattern library. It's use is on the one hand to document and display our UI elements in a web view. On the other hand, it should also be the place where components are built. The ...
-1
votes
2answers
394 views

React.js + Flux, immediate response during history back/forward

In Instagram (web), when you click back/forward arrows - I've noticed that the content isn't loaded from the server and it immediately show up. After reading the docs on react.js + flux, I had this ...
-2
votes
2answers
143 views

Advice: How to secure access to photos in a React App

I have a React App (created via create-react-app) secured with OAUTH2. Currently all dynamic content is via REST APIs, secured with the same OAUTH2 token issued at login. It is hosted on AWS. I want ...
-2
votes
1answer
56 views

React class or function for stateful components?

Which is better to use? react class based stateful component or react hooks functional stateful component? I've searched a bit but couldn't find what is preferred to use.
-3
votes
1answer
74 views

Sharing React Native Component as a "black box"

I'm looking for a way to share a React Native component with 3rd parties without having to share the actual source code. Something like a .jar in Java or a .dll for C#. So assuming we have company A ...
-5
votes
1answer
39 views

Easiest way to add tracking of interactivity (mouse clicks, scrolls, multi-touch gestures) to a React Web App already developed?

Context: we have a responsive web application developed in React.js, which we have successfully used a few times to run user studies on Amazon Mechanical Turk. Now, we would like to add interactivity ...