Also, check out Advanced Angular Component Patterns on Egghead!
* Titles subject to change
| React | Angular |
|---|---|
| Introducing Advanced React Component Patterns | 00 Introducing Advanced Angular Component Patterns (egghead) |
| Build a Toggle Component (source) | 01 Build a Toggle Component (stackblitz) ([egghead](https: |
| export default function createReducer(INITIAL_STATE, handlers) { | |
| return function reducer(state = INITIAL_STATE, action) { | |
| if (handlers[action.type]) { | |
| return handlers[action.type](state, action); | |
| } | |
| return state; | |
| }; | |
| } |
| axios({ | |
| url: 'http://localhost:5000/static/example.pdf', | |
| method: 'GET', | |
| responseType: 'blob', // important | |
| }).then((response) => { | |
| const url = window.URL.createObjectURL(new Blob([response.data])); | |
| const link = document.createElement('a'); | |
| link.href = url; | |
| link.setAttribute('download', 'file.pdf'); | |
| document.body.appendChild(link); |
| /* HOC fundamentally is just a function that accepts a Component and returns a Component: | |
| (component) => {return componentOnSteroids; } or just component => componentOnSteroids; | |
| Let's assume we want to wrap our components in another component that is used for debugging purposes, | |
| it just wraps them in a DIV with "debug class on it". | |
| Below ComponentToDebug is a React component. | |
| */ | |
| //HOC using Class | |
| //it's a function that accepts ComponentToDebug and implicitly returns a Class | |
| let DebugComponent = ComponentToDebug => class extends Component { |
| function mapValues(obj, fn) { | |
| return Object.keys(obj).reduce((result, key) => { | |
| result[key] = fn(obj[key], key); | |
| return result; | |
| }, {}); | |
| } | |
| function pick(obj, fn) { | |
| return Object.keys(obj).reduce((result, key) => { | |
| if (fn(obj[key])) { |
Hi Nicholas,
I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:
The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
