11 React Examples

Douglas Minnaar on January 01, 2018

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 a... [Read Full]
markdown guide
 

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.

 

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.

 

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

  • An application similar to UDEMY with all the basic features that needed for Learning Management System(LMS), which is completely available as an open source at GitHub. ulearnpro.com
 

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.

 

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?

 

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.

 

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.

 
 
 

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.

 
 

Douglas, here is one another collection React JS Projects for Beginners.
golangprograms.com/react-js-projec...

 

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.

 

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?

code of conduct - report abuse