Summary - App architecture
- React Native course
- Expert
- Lesson 18/47
- 5 min
Combine feature-based, clean and repository to write an architecture skeleton.
Summary - App architecture
We covered three architectural approaches: feature-based (grouping by feature), layered (presentation-business-data layers) and clean architecture (inward dependency, domain at center).
On top of these we added repository pattern (data access abstraction) and dependency injection (dependencies supplied from outside). In React, DI is done with Context; with a repository interface, mockable tests become possible.
Practice DI with Provider
Write a RepoProvider component. It should wrap RepoContext.Provider and pass apiRepo as value. Render children through the children prop. Import RepoContext.
Starter code
import React from 'react';
import RepoContext from './RepoContext';
const apiRepo = { getUser: () => null };
// Write RepoProvider here
export default RepoProvider;Sample solution
import React from 'react';
import RepoContext from './RepoContext';
const apiRepo = { getUser: () => null };
const RepoProvider = ({ children }) => (
<RepoContext.Provider value={apiRepo}>
{children}
</RepoContext.Provider>
);
export default RepoProvider;Practice Get the repository with useContext
Write a useRepo hook. It should call useContext(RepoContext) and return the result. Import useContext from React, RepoContext from the same folder.
Starter code
import React from 'react';
import RepoContext from './RepoContext';
// Import useContext from react
// Write the useRepo hook
export default useRepo;Sample solution
import React, { useContext } from 'react';
import RepoContext from './RepoContext';
const useRepo = () => useContext(RepoContext);
export default useRepo;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the key measure in architectural decisions?
- Number of colors
- Testability and separation Correct answer
- Length of file names
- Number of third-party libraries
Explanation: Separation and testability are the key measure.
2 Match all the concepts
| Term | Meaning |
|---|---|
Feature-based |
Folder grouping |
Layered |
Layers |
Clean |
Domain at center |
Repository |
Data abstraction |