Forem: Shiva shankar

Just three 🤓beginner-friendly projects, help you to learn React.

Shiva shankar — Tue, 05 Jan 2021 13:15:20 +0000

Expense tracker

Here it's a simple expense tracker, you can able to track your income and expense. It's a simple and beginner-friendly project. If you can able to create this expense tracker app, you can easily create the todo-list.

Recipe Finder

Recipe finder application, you can search whatever recipes you want, it will show the list of ingredients about that recipe. The data are coming from a third party API. It's also an easy one for beginners. If you are able to do this project, you basically learn most of the things by this recipe finder, how to do async call, store data, and so on...

Portfolio

And here the last one, which is your own 😄portfolio.
Make your portfolio as your project, which will help you to showcase skills and technologies.

That's all guys, I will you see with next blog.
Do you think of any projects I'm missing, please share your ideas👇

🚀Easy peasy, three steps to manage your state in React.

Shiva shankar — Mon, 04 Jan 2021 16:09:16 +0000

Happy to see you guys in another blog 😇.

In this blog, we see how to manage our state with ContextAPI, which is easy and more powerful in React. Without drilling props to props... context API makes our lives easier🤟.

create Context

Here I've created the useContext and pass it to the value of my name. This name value we can get anywhere on the folder by importing the useContext Hook.

Wrapup the parent component

Make sure to import your NameProvider and wrap up the parent component, it gives the access to pass the value inside all the children.

use Context

First import the useContext hooks and then the last step, import the NameContext which holding our state in this app. In my app, I want to get the value of a name in my header file.

Really this is easy😎 and cool, I just gave a 🧑‍💻demo by using a single file, if your app goes longer and longer, you can create the multiple create context and import where you want.

Don't have an idea of starting web development?

Shiva shankar — Sun, 03 Jan 2021 09:47:05 +0000

Little bit about me

Here, I'm learning web development for the last 9 months, I'm not coming from a cs degree background, but a lot of curiosity and interest makes me learn to code. I want to share what is the struggle I was faced and what I learned from this. It will be something useful for your learning path.

Begining

In the very first month, I planned to learn HTML and CSS, I used to watch all the tutorial on youtube, and at the end of the day, I was blank and I fell into tutorial hell. I've realized hands-on coding will only makes me a better developer.

A months ago

After a lot of practice and hard work, I made a plain HTML without using any CSS that was my first line of code written and pushed into my repo. Then I learned CSS, I added styling to that plain HTML, now it looks like this, this is not a completely responsive webpage.

Tutorial hell

This is the very common mistake all the beginners do when they learning to code, I'm also one of them. whatever you learn, for example, if you learned flexbox in CSS just make the navbar using flexbox, even it's so simple that's not a problem, just get your hands dirty by doing the coding.

React or Angular

After I learned the basics of Javascript, how the web works, and DNS. I chose react because it's lightweight and we can easily build a user interface and the community is quite big.

First react App

Before I create the first react app, I'm completely explored the react documents, which gave me everything need to know about this.

A week later, I created a simple todo app, it's getting input from a user and forms a list. I really like react it's easy for the beginner, we can able to create our own projects within a week.

End of 2020

Before the end of 2020, I've really explored as much as I could, really looking forward to learning more and more in 2021.