Summary
In this post, I present 11 React projects that I recently created with the objective of helping those new to React to get up and...
For further actions, you may consider blocking this person and/or reporting abuse
I really like your projects. I'm also learning ReactJS, so far I've created a calculator, a calendar generator (any year as the input), a clock, and a simple real time codifier. By the way, I use a free hosting service called Surge for a quick show of total front-end projects, you can install it with npm.
Thanks for positive feedback! And thank you for the great tip regarding Surge. I have never used surge before. Until now that is. In less than 5 minutes I published one of my projects (the weather app) and can be found here fearful-salt.surge.sh. I'm going to spend more time with Surge and see what else I can do. I noticed that you can add a CNAME file and custom domain so will experiment with that later.
OMG I think I have found a diamond mining place. I'm currently looking for projects that include redux more because I want to practice and understand more about it. I can't thank you enough for all these.
You are so inspiring. I'm gonna create all of these before I go on giving interviews.
Thanks for the awesome feedback. I would like to build more advanced samples soon. So hearing your feedback definitely helps motivate me to do so.
Thanks Douglas for sharing This.
Iam a beginner to react and I love learning by doing so this article have so much value for me!
one Qes plz : Iam using CRA as starter project file for my apps so far , I have tried to clone the starter project you posted here , run npm install , npm start but I got lost among all these dev dependcies.
should I stick to CRA or switch to web back and manual configration ?
Thanks in adavnce
Hey Eslam! Glad it's of value. All my samples were built the "manual" way with the sole intent of making one aware of what sort of goes on "behind the scenes" with a CLI tool like CRA. I think the manual way is great for learning. CRA, as great as it is, hides A LOT of the dev dependencies for example (unless you eject the app). For example, CRA kind of hides the fact that you are using webpack. Because the apps that I put together are more examples than tutorials, I would suggest an online React course where those dev dependencies are explained better. So, just to clarify, personally I prefer doing things the manual way. However there is merit in using CRA as it simplifies things greatly when starting out. Therefore, I would suggest that perhaps it's easier for you to start out with CRA so that you can focus on the 'React' part. But when you wish to start stripping down a React app so that you can master and better understand React dependencies, then I would suggest trying the manual way of doing things. Happy coding!
ULEARN - LMS script built on Laravel 5.8 and React JS 16.9
This was really helpful to me. I just stumbled on it actually. I have forked the repo for the react calculator. I am really interested in that one. I can't wait to explore the code and possibly see what more can be done with it
I see from src/index.html in the react-clicker project that jquery-3.2.1.slim.min.js is loaded. If jquery is really used in this project, why is it? And what will I have to fix by other means if I remove it?
The short answer is that it isn't needed. It's a dependency of Bootstrap4. I only use Bootstrap4 styles. So seeing as I don't use any of the Bootstrap4 javascript functionality, I should just remove it (including references to jquery and bootstrap4 javascript files). It's a good question though, as I can see how this can be misleading. I will remove unnecessary script dependencies in next update.
Thanks man! that inspires a lot ☺ Your post is well organized. Continue the good works!
Thanks, and I'm glad you found it useful :) I will definitely be adding more in the future so watch this space.
I got an error message in react timer
and this error on react-clock-basic.drminnaar.me/
Hey Saurabh! Thanks for bringing this to my attention. I noticed that the production mode error is common across all my projects. I will correct over the course of this week.
This is a great starter kit ecosystem! Projects are fun.
I'd try to include a few unit tests (so someone knows where to begin).
Advanced example with a data store would be awesome.
I'm glad you found the projects fun. Your suggestions are good. I think unit tests would be a great addition. Initially I only had 10 projects, and in the end I decided to add the 11th project that uses an Express API with MongoDB as a precursor to what I would like to do in the future. So yea, will definitely be building more projects that use different data stores and give it that more "real-world" feeling.
I am new to React, I am trying to import these examples to CodeSandbox, it does not work and saying "Invariant Violation, Target container is not a DOM element". Can anyone shed some light on this?
is it necessary to use webpack i am using create react-app
Hi Syed! In short, yes it is necessary to use webpack. All examples were created using my own custom react boilerplate (including webpack setup). I did not use create-react-app at all. The reason for not using create-react-app is because create-react-app does a lot of things "automagically" for you. I consider learning webpack an important skill to learning to work with React. Therefore, I setup webpack manually for all examples.
Live Demo Links are not working
Well done! Spread out to my learning communities.
Douglas, here is one another collection React JS Projects for Beginners.
golangprograms.com/react-js-projec...
My principal enemy is webpack, i can't understand at all how configure It by my own, overall the dev setup, any resources for learn well please ?
Awesome projects. Really helpful. By the way can you give some good suggestions about React + Redux projects. Thanks.
thanks for the great content but i am a beginner and actually found your code too complex despite I know all the react basic stuff what do you recommend me to do?
live demo not working for any project
Live demo not working for any project