score:25
as you said, react is just the v in the mvc. so, where do you put your business logic?
for small, view-specific business logic, it's ok to put that on the component, as you did. if the business logic is in the component, it's going to be on an event-handler, in the render or any other component method.
if you have non-view-specific business logic, and it runs on the client (or both on the client and server), it's always a good practice to isolate that on a separate javascript module. react does not play nice with amd, so you are better off not using requirejs for modularization. you should probably use browserify or webpack. in this case, all you would have to do is add this to the top or your component file: var mybusinesslogic = require('./mybusinesslogic')
. now you can delegate processing to this module. this is the prefered way, because javascript modules are easily testable using jest, jasmine, karma or mocha.
there's also a third scenario in which you delegate business logic to the server. you can directly make ajax calls to the api on the server, to do this processing, or you can go with the more sophisticated way and use flux. there's a plethora of flux implementations out there, like alt, redux and fluxxor. i prefer to have my own implementation of flux using the default dispatcher. within the actioncreators
i call a method on the clientapi
(a js module), which does an ajax call using axios to the server. this call is handled by an express route which finally delegates the business logic to the serverapi
.
edit: i just moved to redux :)
score:1
you can push logic inside every class component and the app component. logic in class component for this state and logic in app component for all application
score:3
i know this answer is late but wanted to add my thoughts. usually you want to keep presentation components dumb. meaning your ui components have no logic other then something like a type which may style the component differently. it’s a good idea to pull your logic out into react hooks then using the react hooks in your controlling component. that way all the logic is in your hooks and not in your presentational components making them a lot more independent and reusable.
Source: stackoverflow.com
Related Query
- Where do I put coding logic in my React Application
- Where to put enums in my react application
- React Hooks - where to put the logic that process passed props only once?
- React / Redux: where do I create + put the 'master' application state?
- Where should I put my logic for initializing state in a Redux application
- React StrictMode double initializasion - where to put logic that should be executed only once
- Where should I put images files in React project?
- Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
- Where to place logic for loading initial server data in React app?
- How to put a React application in a maintenance mode?
- Where to put ReactDOM.render in React
- React Nuka slider where to put decorator ?
- Where to keep active user data on React + Redux client application
- Where is the logic of react hooks?
- Where does React put the continuous build files when using create-react-app
- How does react know where to put the cursor while typing inside an input element?
- Not able to perform PUT request in my react js application
- Where is the appropriate place to put font-awesome files in React apps?
- Where should I put my logic for writing new data to Firestore?
- react redux-saga where to handle some logic
- react where to put the firebase change listener in a component
- Where to put universal-router in React and how to define a link?
- Where to put setInterval in react
- Where to put websocket establishment code in React functional component
- Seat booking logic for meteor react application
- REACT creating a basic application where I can set a value
- Where to put event handlers for function props in react
- where to put css reset in react project dir
- Redux: where should we put initialize state for react app
- Where do I put React component initialization code?
More Query from same tag
- NPM module throws an error when being imported
- React Native 401 Unauthorized Error From DRF
- mapStateToProps returns undefined values
- How to change value via input and buttons simultaneously
- How to store/ retrieve data properly in firebase database
- In react router v4 how does one link to a fragment identifier?
- IndexRoute not working for "/"
- Best way to handle sorting a huge 10 column table in React?
- Update button text on click rendered using map method in ReactJS
- Moving an element in a circular path around a central point
- Flask, pass dataframe as a JSON to the client in order to display it
- How to create array objects of fullyear months with date and day?
- react passing data from parent to child component
- ReactJS: When props is not an array?
- how to get all data from a request
- How to pass props to strategy function for decorator in draft.js
- I'm fetching a problem when I'm trying to fetch data from an API by using useEffect in react
- React Warning: Each child in a list should have a unique "key" prop NOT caused by lack of key in map
- Where to store parameters for ajax request
- React-router 2.0 browserHistory doesn't work when refreshing
- How to use the window.location.assign with ReactJS?
- React form submittal and Django POST request
- Input fields not getting updated
- How to send value from one component, to another
- Redux Forms submit validation does not set errors messages
- Compare hashed password with plain text password in Fauna
- Issue with GraphQL Site and siteMetadate query
- Mapping causing all array elements to appear in React
- Image preview not being shown in react
- Conditionally setting className based on a state variable in a React functional component