FrontEnd projects for Beginners

aj9775 — Thu, 03 Dec 2020 07:14:27 +0000

As a new FrontEnd developer I have had quite a bit of trouble deciding which projects should I do first to learn the basics. Having gone through countless posts and blogs I curated a list of projects for beginners in React.
Once I had the list the second problem that I faced was that I could not find a common repository or guide or a post which had more than one of these projects. At times it really become a cumbersome task to shift through different repository and posts to understand these applications.
One advantage I found having all the projects in one place is that I could visualize how the different features of React worked and how to decide which feature to use for a particular problem.
Though this list in itself is in no way complete it is a start. More applications will be added to this list in the days to come by.

.Up and Down Counter

.Tic Tac Toe

.ToDo List

.Calculator

Up and Down Counter

Up and Down Counter is a basic counter application where on the click of a button the count value can either be incremented or decremented.

Tic Tac Toe

The classic Tic Tac Toe game created using React. It is created using the example given in the React official website.

ToDo List

A simple to do list with two different input fields. It is a simple application to temporarily store the values entered by the user. Currently I have fixed the maximum number of items in the list to five but it can be easily removed by just removing the if condition.

Calculator

A simple calculator made using React.

For a demo of the application fell free to wisit the website.

All codes are available in the Git Hub repository.

Please comment if you have any other beginner level project ideas.

Simple React Up and down Counter

aj9775 — Fri, 24 Jul 2020 06:41:40 +0000

With the release of React Hooks by Facebook, management of state has become really easy in React. Hooks helps us in storing the new data which can be used later in the application in the same session.
A counter is a simple application which counts the number of times a button has been clicked. It can also be modified such that on click of one button the count increases and on the click of other the count decreases. This is a tutorial for such a counter. I apologize for the styling in advance, I have horrible taste in styling.
The first thing that we will do is create a simple React app. Type the following lines of code in the command window in the file location where you want to create the application.

"npx create-react-app appName"

This will create a basic React app that displays the React symbol. Create a new "Counter.js" file in the "src" folder.

The “OnIncrementClick” and “OnDecrementClick” acts as event handler which increases or decreases the count value. {count} displays the current count value.

Count is a state variable which is set to a value using setCount. useState hook is used to make both these variables state variables. Whenever the Increment button is pressed the count value is increased by one and on the press of the Decrement button the count value is decreased by one.
You can test it here. Click Here

DEV Community: aj9775