React.js is the most popular Web Development framework for Frontend, It is a JavaScript Library used to develop single-page web apps using JavaScript which executes on the client-side Javascript engine also known as a Browser. But What makes React so much popular that most companies are hiring React Developers?? It's the reusability part, React helps us to easily break down multiple parts of the web app into different components and reuse them as well, which is the best and unique feature of react.js. It has been used to create some best Front-end projects, and in this article, we'll talk about the top 10 Projects that you can build to skill up your React.js knowledge. ## 1. Calculator To get familiar with React.js itself we'll start with Calculator App. In this, a user should be able to enter `n` number of numbers to perform arithmetic operations. You can also use Bootstrap or Tailwind CSS for styling options but it'll be best if you can write your custom CSS. ### Things to learn from this project - Getting familiar with React.js - Usage of State Management in React - Integrating React with CSS / Styling Framework ![Image of Calculator](https://images.weserv.nl/?url=https%3A%2F%2Fcodedamn-blog.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2022%2F09%2F19113914%2Fcal.png&w=554&q=75&output=webp) ```js import React, { Component } from "react"; import actions from "../actions/calculatorActions"; import Clear from "../components/Clear"; import Equals from "../components/Equals"; const CONSTANTS = require("../constants.js"); export default class Calculator extends Component { constructor(props) { super(props); this.state = { display: 0, current: false, storage: false, operator: false, }; this.clearState = this.clearState.bind(this); this.displayNumber = this.displayNumber.bind(this); this.doMath = this.doMath.bind(this); this.equals = this.equals.bind(this); this.determineEquation = this.determineEquation.bind(this); } clearState() { this.setState({ display: 0, current: false, storage: false, operator: false, }); } equals(e) { if (this.state.operator && this.state.operator !== "equals") { this.doMath(e); } } displayNumber(e) { if (e.target.id === "decimal" && this.state.current.toString().includes(".")) { return; } let numberPressed = CONSTANTS.numbers[e.target.id]; if (!this.state.current) { this.setState({ current: numberPressed, display: numberPressed, }); } else { let updatedValue = "" + this.state.current + numberPressed; this.setState({ current: updatedValue, display: updatedValue, }); } } determineEquation(e) { let solve; if (this.state.operator === "equals") { this.setState({ operator: e.target.id, }); solve = CONSTANTS.equations[e.target.id]; } else { solve = CONSTANTS.equations[this.state.operator]; } return solve; } doMath(e) { if (!this.state.operator) { this.setState({ operator: e.target.id, storage: this.state.current, current: false, }); } else { if (!this.state.current) { this.setState({ operator: e.target.id, }); return; } let solve = this.determineEquation(e); let updatedStorage = solve(this.state.storage, this.state.current); this.setState({ storage: updatedStorage, current: false, display: updatedStorage, operator: e.target.id, }); } } render() { return (

{this.state.display}

{actions.buildOperatorButtons(this.doMath)} {actions.buildNumberButtons(this.displayNumber)}

); } } ``` ## 2. Forms App Forms in a Website play an important role in getting data from users, React.js handles forms differently unlike the way HTML handles them. The next project Idea for a beginner is to create a forms App in which a user can enter his/her details, and the data is displayed at the moment of entering Details ( without the use of LocalStorage ). ### Things to learn from this project - Event Handling in React.js - React Hooks - States ![Image for Forms App](https://images.weserv.nl/?url=https%3A%2F%2Fcodedamn-blog.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2022%2F09%2F19114350%2Fforms-1536x864.png&w=1536&q=75&output=webp) ```js import React, { Component } from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { value: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert("You have submitted the input successfully: " + this.state.value); event.preventDefault(); } render() { return ( ); } } export default App; ``` ## 3. Search Auto Complete React is just javascript that helps us to generate HTML and CSS dynamically, The next project Idea is about how you can auto-complete a form with some data provided and search it with the available data. Develop a Web App in which the user can enter some details ( for example let's take INDIA ) and when the user shall type initial data the form shall search from the database ( or local file ) and show the matching data in the dropdown. ### Things to learn from this project - Searching and filtering - use of data storage in real-time user interaction - Use of Data Fetching ( If Database is connected ) ![Image for Search Auto Complete](https://images.weserv.nl/?url=https%3A%2F%2Fcodedamn-blog.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2022%2F09%2F19115024%2Fsearch-auto-complete-1536x864.png&w=1536&q=75&output=webp) ```js import React from "react"; import "./App.css"; import { ReactSearchAutocomplete } from "react-search-autocomplete"; function App() { const items = [ { id: 0, name: "Cobol", }, { id: 1, name: "JavaScript", }, { id: 2, name: "Basic", }, { id: 3, name: "PHP", }, { id: 4, name: "Java", }, ]; const handleOnSearch = (string, results) => { console.log(string, results); }; const handleOnHover = (result) => { console.log(result); }; const handleOnSelect = (item) => { console.log(item); }; const handleOnFocus = () => { console.log("Focused"); }; const formatResult = (item) => { return ( <> id: {item.id} name: {item.name} ); }; return (

); } export default App; ``` Code from npmjs.org, check that by [clicking here](https://www.npmjs.com/package/react-search-autocomplete) ## 4. Weather App There are dozens of free Weather APIs to use and get the current weather, Our next project is related to the Weather API. Develop a Project in which a user can enter a particular location and get the weather of that location. ### Things to learn from this project - Connecting and retrieving data from an API ```js import React, { useEffect, useState } from "react"; import { faFrown } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import axios from "axios"; import Loader from "react-loader-spinner"; function Weather() { const [query, setQuery] = useState(); const [weather, setWeather] = useState({ loading: false, data: {}, error: false, }); const toDate = () => { const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Nocvember", "December", ]; const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; const currentDate = new Date(); const date = `${days[currentDate.getDay()]} ${currentDate.getDate()} ${months[currentDate.getMonth()]}`; return date; }; const search = async (event) => { if (event.key === "Enter") { event.preventDefault(); setQuery(""); setWeather({ ...weather, loading: true }); const url = "https://api.openweathermap.org/data/2.5/weather"; const appid = "your APP ID"; await axios .get(url, { params: { q: query, units: "metric", appid: appid, }, }) .then((res) => { console.log("res", res); setWeather({ data: res.data, loading: false, error: false }); }) .catch((error) => { setWeather({ ...weather, data: {}, error: true }); setQuery(""); console.log("error", error); }); } }; return (

Weather App?

setQuery(event.target.value)} onKeyPress={search} />

{weather.loading && ( <>

)} {weather.error && ( <>

Sorry, City not found )} {weather && weather.data && weather.data.main && (

{weather.data.name}, {weather.data.sys.country}

{toDate()}

{Math.round(weather.data.main.temp)} ^°C

{weather.data.weather[0].description.toUpperCase()}

Wind Speed: {weather.data.wind.speed}m/s

)}

); } export default Weather; ``` ## 5. State Management ( frameworks like Redux, MobX, FluX ) State Management is storage where all the data is being stored and can be easily accessed by any of the components, but in react.js in-built stage management, the Data storage objects follow a top-down approach which means that data fetched in a child component can not be used by the parent component. Develop a Project in which the use of Redux can be displayed. ### Things to learn from this project - State Management ## 6. Pokemon Web App These days there are tons of free APIs to get started with the most suitable one for a beginner is to use Pokemon API and display complete data obtained from the API. Develop a React.js App in which a user can get all the info about a pokemon just by opening the dedicated Page on that project. ### Things to learn from this project - State management using Redux - React Router - Less number of API calls To have a look at the Pokemon Web App, head over to [this repository](https://github.com/gagrison/pokeapi-react-app) ## 7. GitHub Profile The next project is a very Dynamic, GitHub Profile page, Many users contribute to GitHub and create data over that, GitHub Provides a free-to-use API to get JSON data of any user's Publicly Available Data. Develop a React App in which a user can generate his/her GitHub profile page without any login or logout to the website ( apart from GitHub ). ### Things to learn from this project - State management using Redux - Less number of API calls ![Image](https://codedamn-blog.s3.amazonaws.com/wp-content/uploads/2022/09/19131808/gh-profile.png) src/components/App/index.jsx ```js import React, { Component } from "react"; import Footer from "../Footer"; import Profile from "../Profile"; import SearchProfile from "../SearchProfile"; import styles from "./app.css"; const URL = `https://api.github.com/users`; class App extends Component { constructor() { super(); this.state = { username: "MarioTerron", name: "", avatar: "", location: "", repos: "", followers: "", following: "", homeUrl: "", notFound: "", }; } fetchProfile(username) { fetch(`${URL}/${username}`) .then((response) => { return response.json(); }) .then((user) => { this.setState({ username: user.login, name: user.name, avatar: user.avatar_url, location: user.location, repos: user.public_repos, followers: user.followers, following: user.following, homeUrl: user.html_url, notFound: user.message, }); }) .catch((err) => console.log("Oops! An error ocurred.")); } componentWillMount() { this.fetchProfile(this.state.username); } render() { return (

); } } export default App; ``` src/components/profile.jsx ```js import React, { Component } from "react"; import styles from "./profile.css"; class Profile extends Component { constructor(props) { super(props); } render() { if (this.props.user.notFound === "Not Found") return (

Oops!

Can't find this user. Try again.

); else { return (

{this.props.user.name}

{this.props.user.location}

); } } } export default Profile; ``` src/components/Search-Profile/index.jsx ```js import React, { Component } from "react"; class SearchProfile extends Component { constructor(props) { super(props); } handleForm(e) { e.preventDefault(); let username = this.refs.username.value; this.props.fetchProfile(username); this.refs.username.value = ""; } render() { return (

); } } export default SearchProfile; ``` ## 8. Reddit Clone A Clone of a Website that is completely functional just brings a charm to the resume, it makes a developer stand above other beginner developers. Develop a React App which is an almost exact duplicate of already developed websites, for example, Reddit, Twitter, Spotify, Hulu, and Airbnb just to name a few. ### Things to learn from this project - How to make a Web App Responsive and Dynamic. ![Image of Reddit Clone](https://codedamn-blog.s3.amazonaws.com/wp-content/uploads/2022/09/19132628/reddit-clone-1536x864.png) To get the source code of the project head over to [this repo](https://github.com/tacticaltofu/reddit-clone/tree/main/frontend). ## 9. Resume Builder In today's world, a good Resume for any Job Aspiring student / Working Professional is a must, the next project solves this issue for everyone. Develop a React App in which a User can Signup into the Web App and can fill in details of his to display the details in a good layout of a resume for users. ### Things to learn from this project - Connecting with Backend - Maintaining Data ![Image of Resume Builder](https://codedamn-blog.s3.amazonaws.com/wp-content/uploads/2022/09/19133127/resume-builder-1536x864.png) To get the source code of the project head over to [this repo](https://github.com/girishgr8/Resume-Builder). ## 10. E-Commerce App The toughest Project for a Beginner could be an E-Commerce App, It has various concepts which should be taken care of like Authentication, Multiple Page, and Payment Gateway just to name a few. Develop a completely working E-commerce App with React js with features of login, logout, and Real-time Data from the Backend. ### Things to learn from this project - React Router - Displaying Real-time Data - Authentication - Multiple users' different views ## Conclusion Finally, now you know what are some good and interesting projects that should add up to your resume if you're a complete beginner React Developer, Projects help us in increasing our knowledge by pushing our level hard. React is a very popular and emerging library, it'll keep on evolving you'll find many good things to minimize your time in the development of the projects mentioned above and use those to become an efficient developer. Thanks for reading

Controlled Form Example