https://github.com/elieladelrom/react-tutorials
A list of projects I curated to help expedite effort on React based projects
https://github.com/elieladelrom/react-tutorials
component components cra d3 nextjs react reactjs redux typescript
Last synced: 2 months ago
JSON representation
A list of projects I curated to help expedite effort on React based projects
- Host: GitHub
- URL: https://github.com/elieladelrom/react-tutorials
- Owner: EliEladElrom
- License: mit
- Created: 2020-06-03T10:11:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T04:03:16.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T15:10:15.890Z (over 1 year ago)
- Topics: component, components, cra, d3, nextjs, react, reactjs, redux, typescript
- Language: TypeScript
- Homepage: https://elielrom.com
- Size: 10.5 MB
- Stars: 84
- Watchers: 4
- Forks: 41
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# React Tutorials
Hello and welcome. In this library I included a list of projects I created in the tutorials to help you **Master React** as well as ReactJS related libraries.
List of projects included in this library:
- [hooks](https://github.com/EliEladElrom/react-tutorials/tree/master/hooks)
- [hello-world-react](https://medium.com/react-courses/follow-this-tutorial-and-become-a-react-developer-in-5-minutes-a-2020-tutorial-e3709513b51e)
- [starter-project](https://medium.com/react-courses/setting-up-professional-react-project-with-must-have-reactjs-libraries-2020-9358edf9acb3)
- [hello-redux](https://medium.com/react-courses/instance-learn-react-redux-4-redux-toolkit-in-minutes-a-2020-reactjs-16-tutorial-9adaec6f2836)
- [react-redux-cart](https://medium.com/react-courses/instant-learn-react-redux-toolkit-with-a-simple-minimalistic-example-3c63c296ed65)
- [hello-jest-enzyme](https://medium.com/@elad.ny/are-you-not-testing-your-react-app-instantly-test-with-jest-enzyme-a-reactjs-2020-tutorial-e9ce0182d66d)
- [hello-jest-enzyme-ts](https://medium.com/react-courses/unit-testing-react-typescript-app-with-jest-jest-dom-enzyme-11f52487aa18)
- [ts-clock-app](https://medium.com/react-courses/instant-write-reactjs-typescript-components-complete-beginners-guide-with-a-cheatsheet-e32a76022a44)
- [hello-preprocessors](https://medium.com/master-angular/ready-to-integrate-or-switch-css-preprocessors-on-react-project-sass-scss-vs-postcss-vs-less-vs-58bf26c379ab)
- [material-ui-ts](https://medium.com/react-courses/speed-up-development-integrate-material-ui-v4-11-0-df7968a43fb6)
- [react-routing-ts](https://medium.com/react-courses/how-to-integrate-routing-in-typescript-project-with-react-router-v5-2-0-a6b0ab160a1b)
- [react-typescript-redux-login](https://medium.com/react-courses/integrate-login-with-toaster-notifications-react-redux-toolkit-typescript-material-ui-tutorial-3e6631f11b05)
- [functional-class-components](https://medium.com/react-courses/react-component-types-functional-class-and-exotic-factory-components-for-javascript-1a098a49a831)
- [mern-login](https://medium.com/react-courses/the-mern-stack-login-system-with-mongodb-express-react-w-redux-toolkit-middleware-c274269b64cf?source=friends_link&sk=0cb45daa0d6449677f9cde7649f63a04)
- [recoil-contact](https://medium.com/master-angular/integrate-recoil-with-typescript-to-share-your-state-across-react-components-8cf1a3910fae)
- [recoil-testimonials](https://medium.com/react-courses/instantly-code-like-a-ninja-a-testimonials-component-with-react-recoil-in-just-three-easy-steps-c094f8bfead3)
- [mailchimp-newsletter](https://medium.com/react-courses/instantly-integrate-a-typescript-custom-newsletter-component-with-react-mailchimp-3dc3ed865fb0)
- [e2e_ts_testing_with_puppeteer](https://medium.com/react-courses/deliver-quality-software-reduce-qa-load-integrate-end-to-end-e2e-testing-on-cra-react-a20486a39ac2?sk=c9610ea9812363b262f141f1c30ae445)
- [optimize-ts](https://medium.com/react-courses/optimize-react-app-best-optimzing-techniques-i-wish-i-knew-before-i-wrote-my-first-line-of-code-2b4651f45a48)
- [histogram-d3-ts](https://medium.com/react-courses/create-a-days-price-histogram-chart-react-recoil-d3-typescript-73af3fea316c?sk=9cbbd76daea3244580c84fb58a72ead2)
- [world-map-chart](https://medium.com/react-courses/world-map-chart-with-react-d3-with-ts-468b05f35404)
- [world-map-widget](https://medium.com/react-courses/showoff-previous-client-list-with-a-world-widget-react-recoil-d3-ts-b8c61bc26562)
- [bubble-chart](https://medium.com/react-courses/who-doesnt-like-charts-draw-a-bubble-chart-with-react-d3-typescript-2faf998109e2)
- [binary-tree-ts](https://medium.com/react-courses/implementing-binary-tree-linked-lists-in-typescript-is-a-must-have-in-your-programming-arsenal-3e6f5599248f)
- [react-d3-hello-world](https://medium.com/react-courses/first-steps-d3-with-react-typescript-part-i-setting-up-your-first-project-d29802e6f6b3)
- [basic-charts](https://medium.com/react-courses/drawing-basic-charts-with-react-typescript-d3-part-i-line-area-and-bar-charts-cd159c62e18c)
- [force-chart](https://elieladelrom.medium.com/easily-show-relationships-draw-simple-force-graph-with-react-d3-utilizing-typescript-d7e9d5326b6)
- [react-chart-libraries](https://medium.com/react-courses/react-charts-built-on-d3-what-should-you-pick-rechart-visx-niv-react-vi-or-victory-adc64406caa1)
- [area-brush](https://medium.com/p/c66d11af14c3/)
- [area-chart-with-brush](https://medium.com/react-courses/create-an-area-chart-with-brush-tool-using-react-d3-c6dfc934a67b)
- [word-cloud](https://medium.com/p/969c63506856/)
- [donut-chart](https://medium.com/p/2d23b8ffb108/)
- [bisector](https://medium.com/p/e023ce7697c0/)
- [3d-force-chart](https://medium.com/p/b7fcf9e39f83)
- [save-png-jpg-pdf](https://medium.com/p/bdd626184693)
- [ecr-ecs-github-ci-cd](https://medium.com/p/698d360ee21e)
## Installation
To download a single folder instead of the entire library from Github, there are many approached you can take, see [here](https://stackoverflow.com/questions/7106012/download-a-single-folder-or-directory-from-a-github-repo). The easiest way is to use DownGit sites (find one on Google), then paste the directory URL, for example to download the: start-project use: [https://github.com/EliEladElrom/react-tutorials/tree/master/starter-project](https://github.com/EliEladElrom/react-tutorials/tree/master/starter-project)
## Start The Project
```bash
$ yarn install
```
If you can use help with your React project or have a burning question, or an issue in your project that needs help with, I invite you to hire me as your [Coach](https://elielrom.com). My strategy is 100% results-oriented. If you want to sample how I work 1-on-1, let’s schedule a one-time deep dive [Consultation](https://elielrom.com/CoachingHourly).
Additionally, [I will tutor you in react, javascript, typescript, mongodb, node, d3.](https://www.fiverr.com/elieladelrom/tutor-you-in-react-javascript-typescript-mongodb-node-d3)
## Where to go from here?
- [Take the interactive d3 and React Course](https://www.udemy.com/course/integrating-d3js-with-react/?referralCode=4C1ADE35AB8633B90205)
- [Take the Digital Course & get a 40 pages React book](https://www.udemy.com/course/getting-started-react17-with-must-have-libraries/?referralCode=3E6A9B9D8EBB48A913A9)
- [View the article on Medium](https://medium.com/react-courses/setting-up-professional-react-project-with-must-have-reactjs-libraries-2020-9358edf9acb3)
- [Visit my site EliElrom.com](https://elielrom.com)
License
----
MIT
If you like this library, don't be shy to star / fork it 🙏