XXXL_Global-News-2 // 07.2020
This work the same like XXXL_Global-News-1, but more Modern and with New Other Technologies:
- Builded on one of my the best Webpack
- (XXXL_Global-News-1) Redux & Redux-Thunk
- (XXXL_Global-News-2) Redux & Redux-Thunk & Redux-Saga
- All in the function components
- React Hooks (e.g. useState, useEffect, useCallback, useMemo)
- React-Redux Hooks (e.g. useDispatch, useSelector)
- React.memo()
- (XXXL_Global-News-1) Works asynchronously with: asyncComponent()
- (XXXL_Global-News-2) Works asynchronously with: React.Lazy()
- Testing with Enzyme
- Better syntax of code & fixed some bugs
- More Components to No Repeat the same Code
I connected here a lot of technologies in one place:
... to show what I can create,
JavaScript React.js Redux
Redux-Thunk Redux-Saga React Router
Axios SASS / SCSS CSS Modules
CSS3 function* generator / yield HTML5
Babel ES6 REST API
Webpack React.Lazy() React.memo()
React-Redux Hooks React Hooks
How it work ? (11 Steps)
I want to show the most important details and possibilities of my application here :) (only 2 min)
1. Start page & Load API:
2. Show more articles:
3. Filter "Topic" >> Tech, Sports, Travel, Politics <<
4. Filter "Time": >> This month, This week, Today <<
5. Filter "Sort By":>> Popularity, Publication Date <<
6. Clear all of filters:
7. Click and Show this full Article:
8. Return to main page:
9. Responsive View from large Desktop to Mobile Version:
10. Fast summary all of Steps:
11. Scheme of Project
How to use the downloaded files
1) Run "npm install" in the extracted folder
2) Run "npm start" to view the project
Compare my code to yours to solve issues you might encounter. You may also copy the content of src/ into your own project's src/ folder to use your project setup (which might've been created with a different create-react-app version) and still use my code.