React JS Projects for Beginners


This is a collection of React JS practical projects for Beginners, that will guide you through some fun. Along the way, you will pick up lots of useful development tips. The speed at which React JS has evolved promises a bright future for those who invest in learning it today. This beginners practical projects series will take you on a fast-paced journey through building your own maintainable React JS application.


Carousel

This is a simple responsive Carousel loading images from third-party sites and generating thumbnails automatically. We used React Responsive Carousel package which you need to first install and using Carousel component available in package we design our carousel.

Example Explained


Google Map

This is a simple example to load Google Map based on longitude and latitude of a specific city. We used React Google Map package which you need to first install and using Google Map component available in package we design our map.

Example Explained


Compass Clock

This example shows current date time in compass clock format. In order to perform this task reasonably well, we will need to modify the App.js file and also the App.css file. Both of these files are in the root of the src folder.

Example Explained


Calculator

This is a simple Calculator example. I introduce the Stateful Component, which are defined using a class and make it easier to keep track of the application state provided component. This component example gives an idea how you add onClick event in JSX.

Example Explained


Voting System

This is a simple vote calculator example which increments count on every click. I introduce the Stateful Component, which are defined using a class and make it easier to keep track of the application state provided component. This component example gives an idea how you add onClick event in JSX.

Example Explained


Search Autocomplete

This is a basic example of search auto-complete which uses onChange event and fetches the suggested resultant values.

Example Explained


Tic Tac Toe

This is a simple tic tac toe game. In this example we have created two components Row and Column. We have also installed Bootstrap to make our UI more user friendly. This example gives an idea to to maintain the state between components.

Example Explained


Memory Game

This application puts your memory to the test. You are presented with multiple images of celebrities. The images get shuffled every-time they are clicked. You CAN NOT click on any image more than once or else your score resets to zero. The main objective is to get the highest score as possible.

Example Explained


Arrange Game

This game can be a very nice brain exercise, which focuses on prompting your ability to arrange numbers in the right order in a very short time, this game depends on the level you choose. Start with 3 squares x 3, and see how it goes, then you can make it wider as you improve in this brain exercise.

Example Explained


Weather Finder

This game can be a very nice brain exercise, which focuses on prompting your ability to arrange numbers in the right order in a very short time, this game depends on the level you choose. Start with 3 squares x 3, and see how it goes, then you can make it wider as you improve in this brain exercise.

Example Explained


Search and Filter List Records

This is a simple example to list Json records in tabular format. Filter and Sort data based on user selection. There is no back-end server only need to filter and sort data based on pre-defined data-set.

Example Explained


Form Container

In this example process From data on real-time as user enter or select any option of given form, pass the value in URL and show the option in another section. In this example we will create Stateful component and this example gives an idea how onChange even works in React JS.

Example Explained


Random Quote Generator

In this example as user clicks on New Quote button new quote will generate and display to user randomly. There is a collection of pre-defined quotes collected and store in constant. Each time new quote display to user background color will also get change.

Example Explained


Random Meme Generator

This example will generate random meme's every time user click on Generate button. This example uses Imgflip Api to fetch image and return get data in JSON format. Users entered text will display above the image and entered number will increase the font size dynamically.

Example Explained


Dice Game

This Dice game use two dices as their central component, usually as a random device. Each time user clicks on ? image a new number generate for you and AI(computer). This will also calculate your and AI points on each click until your click on Clear to restart game.

Example Explained


Bill and Discount Calculator

In this example project we are calculating total tip and sharing based on selected percentage of discount. As user enter total bill amount, discount get calculated based on selected %5 or %10 or any.

Example Explained


Form Validation

Basic example to show various different types of required validations for Form. This includes use of email and phone validation based on regex.

Example Explained


Data Table

Basic example to Material Data Table with pagination. In this example we populated same data which you can replace with actual data. react-md used which is a set of React components and sass files for implementing Google's Material Design.

Example Explained