I've been a long term vue.js developer and I have to say, I enjoy every moment of working with it. However, I recently decided to try out react.js. A number of reasons contributed to this decision.

1. My workplace primarily uses react for frontend projects.
2. I wanted to explore a new way of writing code and didn't want to remain stagnant in my knowledge.
3. Better position me for future opportunities as I can fit in both vue or react projects.

With this in mind, I set about getting familiar with the library. For this, I skimmed through the documentation and then watched Brad Traversy's crash course on youtube. This helped to make me aware of some niche concepts or coding style that may have been missed in the documentation.

All in all, once I got my basic knowledge, I set about making a project as this is the best way I learn.

For this, I decided to recreate the circle.so landing page. The platform enables you to bring together your discussions, memberships, and content. Integrate a thriving community wherever your audience is, all under your own brand. It gives creators the tools they need to thrive and this is something I'm quite passionate about so the challenge was more enjoyable for me.
For the frontend, I utilized chakra-ui. A wonderful open source component library.

Lewis Kori

@lewis_kihiu

I've been a vue developer for a long time now, so this weekend I decided to seriously try react.js for the first time by recreating @CircleApp's landing page. They empower creatives by giving them the tools they need to succeed!
Here's the demo, styled using @chakra_ui

13:56 PM - 22 Mar 2021

As I explained before, I watched a tutorial and read some bit of documentation. This helped me get familiar with the react syntax, namely jsx, functional and class components and props.

Next, I planned on mapping my knowledge and I realised that with my vue.js skills, I could transfer some of the skills to react. All I had to do during the project development was try and figure out how the following worked in react and differ in Vue.

1. Passing props and setting their types and default values.
2. Routing
3. Conditional rendering
4. Reusable layouts and Slots, I found out they're called children in react so this is very different from Vue but not a difficult concept to grasp.
5. Emitting function calls to parent components.
6. Lifecycle methods.
7. Local state updates
8. Global state management. (I'm yet to get here). I've heard there's redux and recoil, I'd appreciate any advice on which one to use.

This is only about my second week of trying out react and there's quite a lot I need to cover. However, I feel this style of mapping previous knowledge and building on top of that has greatly helped in picking up new skills fast.

I was able to create the landing page below and a couple of routes.

The code can be found on my Github for anyone interested or for any reviews on some bad practices I may be using.

The live project is hosted on netlify as well.

I'm finding react enjoyable to work with and to be honest I really don't understand why developers keep arguing over frameworks/libraries. At the end of the day they're just tools and most likely a new one will arise and whatever we were arguing over won't be the shiny new thing. Understanding the underlying concept is what's most important to me.

I hope this article will help more people pick up new tools outside their comfort zone and improve how they pick up new skills if they find this method useful.

additional resources

1. vue to react roadmap
2. react documentation

Have any questions or wanna say hi, my Twitter dm and chat here on dev is always open.