Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kooltheba/projectalpha_react
This project is meant to serve as a my showcase 💅 and also as a reference for whoever wants to hone their React skills! 🚀
https://github.com/kooltheba/projectalpha_react
apollo enzyme error-handling graphql hoc hooks jest lazy-loading material-ui react react-router styled-components testing
Last synced: 2 days ago
JSON representation
This project is meant to serve as a my showcase 💅 and also as a reference for whoever wants to hone their React skills! 🚀
- Host: GitHub
- URL: https://github.com/kooltheba/projectalpha_react
- Owner: KoolTheba
- License: agpl-3.0
- Created: 2020-09-26T08:54:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-07T16:45:56.000Z (over 4 years ago)
- Last Synced: 2024-12-25T21:25:17.854Z (about 2 months ago)
- Topics: apollo, enzyme, error-handling, graphql, hoc, hooks, jest, lazy-loading, material-ui, react, react-router, styled-components, testing
- Language: JavaScript
- Homepage:
- Size: 675 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Project Alpha React 🦄
**This project is meant to serve as a my showcase 💅 and also as a reference for whoever wants to hone their React skills!** 🚀
You'll find a series of **practices**, small and not-so-small pieces of code that will help you to sharp, step by step, all the coolest React, Hooks, Router, Testing, Styling and GraphQL features.
If you can read Spanish, you can follow the notes of the [React-GraphQL course](https://github.com/zamarrowski/Curso-React-Redux) by [@zamarrowski](https://github.com/zamarrowski) and [@Fictizia](https://github.com/Fictizia) or, along with any other course, you can also practice with all these proposals.
> I've realized that building a full application while learning React can be kind of overwhelming. 😅
> So why not develop small pieces of code while being intelectually challenged? If the answer is 'yeah! let's go for it', this is your repo! 😎
### Where to start
1. If your intention is to check around what I'm capable to do with React, first WELCOME! 🥰 and second, the practices are divided by React and other libraries blocks.
Please follow the `steps` below for an easier navigation. In `lecture` you can find the practices instructions.
2. If you want to practice and you can read Spanish, read first what the exercises are about in `lecture`, open you favorite code editor and GO FOR IT!! 💥💥
### Steps
- [1. Basics](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/1.basics) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/render.md)
- [2. Props](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/2.props) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/props.md)
- [3. State](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/3.state) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/state.md)
- [4. Lifecycle Methods](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/4.lifeCycle) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/lifecycle.md)
- [5. Events](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/5.events) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/events.md)
- [6. Rendering](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/6.rendering) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/conditionalRender.md)
- [7. Rendering Lists](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/7.renderingLists) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/renderList.md)
- [8. Persistace Redering Lists](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/8.persistance_renderingLists) using my own library [todos-goals-api-localstorage](https://github.com/KoolTheba/todos-goals-api-localstorage)
- [9. Forms](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/9.forms) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/forms.md)
- [10. Lifting State](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/10.liftingState) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo2/state2.md)
- [11. Jest Testing](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/11.jestTesting) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/testing/jest.md)
- [12. TDD](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/12.tdd) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/testing/unit.md)
- [13. Prop Types](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/13.propTypes) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/proptypes.md)
- [14. Refs](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/14.refs) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/refs.md)
- [15. Context](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/15.context) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/context.md)
- [16. Error Boundaries](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/16.errorBoundaries) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/errorboundaries.md)
- [17. HOCs](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/17.hocs) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/hoc.md)
- [18. Hooks](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/18.hooks) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/hooks.md)
- [19. Lazy loading](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/19.lazy) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo3/lazySuspense.md)
- [20. React Router](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/20.router) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo4/react-router.md)
- [21. Material UI](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/21.materialUI) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo4/material-ui.md)
- [22. Style-Components](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/22.styled-components) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/modulo4/styled-components.md)
- [23. Graphql & Apollo client](https://github.com/KoolTheba/projectAlpha_react/tree/master/src/components/23.graphql_apollo) - [Lecture](https://github.com/zamarrowski/Curso-React-Redux/blob/master/graphql/intro.md)
EXTRA 👉 complete applications:
- [🛒 Shopping Cart - React and testing with Jest and Enzyme 💥](https://github.com/KoolTheba/shopping-cart-react)
- [📚 User's random posts application - GraphQL and Apollo 💥](https://github.com/KoolTheba/graphql-apollo-users-posts)