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)