Before you go, check out these stories!

Hackernoon logoMy Challenge with React by@jalissa

My Challenge with React

Author profile picture

@jalissaJalissa Trinidad

I’ve had a lot of trouble picking a JS UI library because there are too many options Angular, React, Ember, VueJS, and so many others but I had to choose one, so my first choice was the most popular then… Angular, but it wasn’t for me.

Then I started catching up with my Twitter feed and found React, everyone was making a lot of good comments, and I thought it might be the new boom. Then the Thought Works Radar for November 2016 came out and there it was… React in the Adopt section… that was the drop of water that fell out of the glass. Right away I started reading like crazy the React official documentation and started a little project with it… didn’t like it… didn’t finish it.

After that, I started to look new ideas for side projects and found a site that gathers lots of tweets with ideas, and this one attracted my attention:

My inspirational tweet (Thanks, @HiEmbee. I like your idea.)

Since I wanted to learn React, I coded Challnge me!. Yeah... the name is missing an ‘e,’ I wanted to have like something different. It’s pretty simple. You sign up, pick your favorite categories and it will challenge you. After you complete the challenge, you can share it on Twitter and keep your awesome memories of every challenge you’ve completed.

Challnge me! Landing page

For me, well, I had my challenge to complete to share my experience with you, and it was to Learn React, at least the basics.

Challenge Accepted!
Create a project in React that will challenge the user

That was my challenge, but I couldn’t stop there, the final piece is to write a post about it… This post.

It was an adventure. First, I had to learn React, and with me, the theory is not enough, I have to get my hands dirty, so after reading the documentation, I pinned it on a Chrome tab and created the project with the technologies React.js recommends: ES6, JSX, and Webpack. I also used React Router for the site navigation.

Everything was relatively easy except for Webpack. I must confess it gave me some trouble to configure and understand but with the help of Webpack’s documentation and a variety of Medium posts I have a webpack.config.js working with no issues.

This project also opened an opportunity to get some practice in Design, one of my biggest weaknesses. With various videos on Youtube and a lot of second opinions, I was able to pick the typography and organize the layout a little bit, and my eye for design leveled up.

I know it’s not perfect but it is a beginning, there are still so many things to learn, the Javascript world is always growing, changing and evolving, and we should never stop learning.

If you want your challenge with React here are some useful resources I found:

Basic Graphic Design Videos:

If you want to see the code and/or give me some suggestions to keep improving my skills: Challenge me! Github.


The Noonification banner

Subscribe to get your daily round-up of top tech stories!