3 ms·

What React is missing is a set of idioms and patterns. When you inherit Angular or Django project it's quite easy to understand it and be productive if someone

What React is missing is a set of idioms and patterns. When you inherit Angular or Django project it's quite easy to understand it and be productive if someone follows the philosophy. Create-React-App is a great step, but what next? How to handle AJAX and state if I have a simple app and don't really need Redux. How to structure it so it would be easy to add it.

acemarke 10y ago
There _are_ many patterns that exist already, and have been widely discussed in the React world (such as "Higher Order Components" for code reuse). You may be interested in several of the sections in my React/Redux links list at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links . In particular, check out the "React Architecture", "React Component Patterns", "React State Management", "React and AJAX", "Redux Architecture", and "Project Structure" sections. To pick out a few specific links related to your questions: - http://reactpatterns.com/ http://reactpatterns.com/ - https://github.com/vasanthk/react-bits https://github.com/vasanthk/react-bits - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 https://medium.com/@dan_abramov/smart-and-dumb-components-7c... - https://daveceddia.com/ajax-requests-in-react/ https://daveceddia.com/ajax-requests-in-react/ - https://daveceddia.com/visual-guide-to-state-in-react/ https://daveceddia.com/visual-guide-to-state-in-react/ - https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092 https://hackernoon.com/redux-step-by-step-a-simple-and-robus...
- ed_balls 10y ago
  Thanks for that. Really helpful. Is there a great mid-size open-source project that was created with Create React App? Any input on UI frameworks? I'm currently using React-Bootstrap, but I'm thinking about using Material-UI.
  - acemarke 10y ago
    Mmm... not sure about apps specifically built with CRA. I do have a list of a few selected interesting-looking apps built with Redux (and React) in my Redux ecosystem catalog [0] . Haven't updated that section in a while, though, and it's definitely not comprehensive, but there's a useful variety of apps to look at. I personally am using Semantic-UI-React [1] in a work project, as well as in the sample app for my "Practical Redux" tutorial series [2] [3]. I also frequently recommend a tutorial series called "Building a Simple CRUD App with React + Redux" [4] as another "real-world" tutorial/example. That tutorial doesn't use CRA, but my "Practical Redux" sample app does. [0] https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md https://github.com/markerikson/redux-ecosystem-links/blob/ma... [1] http://react.semantic-ui.com/ http://react.semantic-ui.com/ [2] https://github.com/markerikson/project-minimek https://github.com/markerikson/project-minimek [3] http://blog.isquaredsoftware.com/series/practical-redux/ http://blog.isquaredsoftware.com/series/practical-redux/ [4] http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ http://www.thegreatcodeadventure.com/building-a-simple-crud-...
davidjnelson 10y ago
The best solution would probably be to bubble up state mutations to a single place per data model area, and factor out the http calls per data model area, grouping as needed. I'd rather just use redux with thunks that use async/await though personally than write this from scratch.
mmmpop 10y ago
Perhaps the React ecosystem is a powerful set of tools for experienced developers that don't need idioms to patterns to build upon?
nfRfqX5n 10y ago
would be cool to have some more patterns, but I think that's an easy one to solve with a quick search. i.e. you can just do it inside the component: https://gist.github.com/mentrie/8632e81ae2960df8d02947b8b743b268#file-ajaxwithinreactcomponent-js https://gist.github.com/mentrie/8632e81ae2960df8d02947b8b743...

acemarke 10y ago

There _are_ many patterns that exist already, and have been widely discussed in the React world (such as "Higher Order Components" for code reuse). You may be interested in several of the sections in my React/Redux links list at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links . In particular, check out the "React Architecture", "React Component Patterns", "React State Management", "React and AJAX", "Redux Architecture", and "Project Structure" sections. To pick out a few specific links related to your questions: - http://reactpatterns.com/ http://reactpatterns.com/ - https://github.com/vasanthk/react-bits https://github.com/vasanthk/react-bits - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 https://medium.com/@dan_abramov/smart-and-dumb-components-7c... - https://daveceddia.com/ajax-requests-in-react/ https://daveceddia.com/ajax-requests-in-react/ - https://daveceddia.com/visual-guide-to-state-in-react/ https://daveceddia.com/visual-guide-to-state-in-react/ - https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092 https://hackernoon.com/redux-step-by-step-a-simple-and-robus...

ed_balls 10y ago
Thanks for that. Really helpful. Is there a great mid-size open-source project that was created with Create React App? Any input on UI frameworks? I'm currently using React-Bootstrap, but I'm thinking about using Material-UI.
- acemarke 10y ago
  Mmm... not sure about apps specifically built with CRA. I do have a list of a few selected interesting-looking apps built with Redux (and React) in my Redux ecosystem catalog [0] . Haven't updated that section in a while, though, and it's definitely not comprehensive, but there's a useful variety of apps to look at. I personally am using Semantic-UI-React [1] in a work project, as well as in the sample app for my "Practical Redux" tutorial series [2] [3]. I also frequently recommend a tutorial series called "Building a Simple CRUD App with React + Redux" [4] as another "real-world" tutorial/example. That tutorial doesn't use CRA, but my "Practical Redux" sample app does. [0] https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md https://github.com/markerikson/redux-ecosystem-links/blob/ma... [1] http://react.semantic-ui.com/ http://react.semantic-ui.com/ [2] https://github.com/markerikson/project-minimek https://github.com/markerikson/project-minimek [3] http://blog.isquaredsoftware.com/series/practical-redux/ http://blog.isquaredsoftware.com/series/practical-redux/ [4] http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ http://www.thegreatcodeadventure.com/building-a-simple-crud-...

davidjnelson 10y ago

The best solution would probably be to bubble up state mutations to a single place per data model area, and factor out the http calls per data model area, grouping as needed. I'd rather just use redux with thunks that use async/await though personally than write this from scratch.

mmmpop 10y ago

Perhaps the React ecosystem is a powerful set of tools for experienced developers that don't need idioms to patterns to build upon?

nfRfqX5n 10y ago

would be cool to have some more patterns, but I think that's an easy one to solve with a quick search. i.e. you can just do it inside the component: https://gist.github.com/mentrie/8632e81ae2960df8d02947b8b743b268#file-ajaxwithinreactcomponent-js https://gist.github.com/mentrie/8632e81ae2960df8d02947b8b743...