Conquering ReactJS one JSX at a time — #100daysOfReactJS day 2

The new year brings with it new possibilities —

Possibilities of learning new things, possibilities of conquering new milestones and possibilities of overcoming new challenges.

This year, I embraced the possibility of leveling up my ReactJS coding skills. As a necessary first step, I took up a coding challenge in which I would build a new React component(s) every day.

Day 1 was all about getting started. I built a simple (yet functional) login screen as shown —

Fullstack React: React Daily UI — 001 Sign Up Form

Login Screen — #100daysOfReactJS Day 1

The key takeaway from this experience was the inherent modularity ReactJS brought to the table and the graceful code flow ReactJS inspired.

I believe that ReactJS inspires a build it as you see it mentality.

In Day 2 of this challenge, I took all that I learned from Day 1 and added the concepts of states and props to the mixture. I learned first hand that a state is an indicator of the present condition (or state) of a component. The state defines the behavior (or condition) of a component. Ex — If we consider the movement of the Sun throughout the day, the time aspect would be the state. Here, time would define the position of the sun.

Props (or properties) are however the various behaviors (or conditions themselves. In the previous example, the props would be the position of the sun.

Using states and props, we have a neat way of defining the flow of web components!

That’s it for Day 2!

Checkout Page — #100daysOfReactJS Day 2

If you are keen on learning ReactJS with me, fork my git repo —

abhishekAthreya/100daysOfReactJS

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

If you found this article helpful, 👏 to your heart’s content. If you have some suggestions, please let me know in the comments section 💬.

I’d love to connect with you on LinkedIn. 🙌