📄️ Children
Managing children is a core concept that allows developers to compose flexible and reusable components. "Children" generally refer to the content or other components nested inside a parent component. Composability empowers developers to build modular interfaces.
📄️ Class name
Ember uses class, while React uses className for defining CSS classes. CSS classes are used for associating styles with elements.
📄️ Conditional rendering
Conditional rendering enables showing different UI elements or components based on specific conditions. This can change the whole render of a component or part of it.
📄️ Exports
In React when exporting a component, we must use default exports vs named exports for the React in Ember framework to work.
📄️ Fragment
Fragments represent smaller, reusable parts of a user interface within an application.
📄️ Inline logic
In both Ember and React, inline prop logic is a way to dynamically calculate the value of a property or attribute based on some condition. This pattern simplifies code by avoiding separate conditional statements, instead embedding logic directly into the markup.
📄️ Input validation
In both Ember and React, we can make the user input be required and match a regex pattern.
📄️ ember-concurrency perform tasks
ember-concurrency is a popular Ember addon for managing asynchronous tasks using generator functions ("tasks") that can be performed, canceled, and tracked for state. In Ember, the perform helper is used in templates to invoke these tasks, making it simple to handle async actions like data fetching or user events with robust state management (e.g., isRunning, lastSuccessful).
📄️ Modal form
In both Ember and React, we can create a form within a modal.
📄️ ember-svg-jar
ember-svg-jar is an Ember addon that helps manage SVG assets efficiently. It includes features like an in-app viewer and support for SVG customization. For React, we're using standard ` tags to reference SVGs directly. While ember-svg-jar embeds and customizes SVGs inline in Ember templates, the React implementation relies on external references using standard HTML ` tags.
📄️ Whitespace
In Ember's Handlebars templates, there's automatic whitespace added between tags by default. However, if you use the ~ in Handlebars, that will override and take up any whitespace (doc). For better and for worse, React has no implied whitespace like this. So migrating the ~ will be easier.