All about my crush on React.js
I’ve got chills they’re multiplying and I’m recovering control (cause the power React is supplying is electrifying!).
Who is this React and why do I like him so much? Ditch that gossip magazine and lend me your ears (eyes) cause’ I’m about to tell you everything about it and it’s way better than the Royal family’s affairs or a telenovela!
Our match-maker: JavaScript
The feeling didn’t just come from nowhere, of course. We were introduced by JavaScript. Actually, if you want to be ready to build a relationship with React, you’d better be familiar and comfortable with the following topics:
- JS Basics: scopes, hoisting, Functions.
- Array Methods (map, filter, reduce).
- Object Methods (Object.keys, values, entries).
- JS ES6 Features: ES6 Modules, Let and Const, Arrow Functions, Classes, template literals, spread Operator and Rest Parameters, Destructuring.
- Handling Asynchronous Code (Callbacks, Promises).
- Asynchronously sending and receiving data (fetch or axios).
In a few words: You have to know how life (in JavaScript) works and how to get by in it by yourself before you try to get by in a relationship (that’s free life-advice btw). 😉
And then, he appeared: all covered in components
But what even is React.js?
Oficially:
React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. (React.js.org).
But to me:
React is the genius solution that came along to make my life so much easier! It allows me to create large web applications and change the data without having to reload the entire fudging page! (No, I did not swear. You need to read that again).
How does he do that? Well, he just stores let’s say, a website, divided into convenient smaller parts and puts them inside cute drawers called components. For example: Header (the header of a website) can be a component, the Footer of the site can also be a component, and so on. And, yes, their names are written in capital letters.
React came along to organize all the data that were spread all-over in Js. He is fast, scalable, simple and works only on user interfaces in the application. He is the dream of both every developer and every Marie Kondo’s fan.
Tell me more, tell me more: was it love at first sight?
How was I not going to fall for him? I mean:
- React.js is simple
- React.js is component based
- React.js is extensive
- React.js is fast
- React.js is easy to learn
What I appreciate the most:
1. It’s simple
React uses a special syntax called JSX which allows me to mix good ‘ol HTML with JavaScript. That’s why when you first look at it, it feels like looking to an old friend, but with a twist.
JSX is not really mandatory, I can still write in plain JavaScript. But JSX is just sooo much easier to use! this is what makes it so simple to grasp right away.
2. It’s easy to learn
Anyone, and I mean anyone (even I, who couldn’t really even use HTML properly, 3 months ago) can understand React. You just need to have a basic previous knowledge in programming.
While, for example, Angular and Ember are referred as “Domain specific language” (that implies they are difficult to learn), to learn React you just need basic knowledge of CSS and HTML. Though I still recommend that you are familiar with JavaScript in general first. You know: get to know the environment in which your significant one grew up and developed!😉
Just two things: component-based approach and component lifecycle.
3. Sexy evil twin: Native approach
I can also use React to create mobile applications *jumps up and down with joy*. In this version he is called React Native and it’s both amazing and terrifying. React Native allows you to use and abuse reusability and to build extensive code supported by IOS, Android and Web applications! Yipee! So, what’s the bad news about this guy? We’ll get to that in a second.
4. It’s easy to test
It’s so super easy to test! React views can be treated as functions of the state. This means that we can manipulate the state and take a look at the output and triggered actions, events, functions, etc. There’s a lot of magic you can do from the console.
During our happy (and yet a bit turbulent) times together we managed to build a Spotify-like Music releases site with the hottest music releases, a Movies site with the latest movies and a twitter-like Happy thoughts app, to write and share only happy thoughts about lovely, fresh things in life. An extended honey moon with my dearest React.
But suddenly, he looks all different. In love with React Native or “the bad guy”
Just like when Sandy, the good girl shows up all dressed-up as a bad rock n’ roll chick to earn the love of her high-school bad guy, I had to “shape-up” too to be able to keep-up with this bad boy’s flow. React native really got me to work.
What was different?
Well, let’s first see who this React Native is:
React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React’s framework along with native platform capabilities.
So basically, React Native is the “cool guy”, in a black leather jacket, that melts you with just one look. He is hiper-confident because he knows everybody needs him, everybody wants him.
The hard part with him was having to use Expo.io and a code scanner to be able to see and test my app right from my phone (or from Android developer studio, which takes a little bit of time to get befriended with). But time was running towards my deadline, so I had to make it work with expo, which was not so bad in the end. But I have to say it: this guy did make me sweat!
Though it was rather tough, we finally came to an agreement which resulted in an “Advice generator app” made with a free API and which also gives the user the ability to share the advices.
Head up if you are interested in another point of view: take a look at this article written by Karin Nordkvist, a fellow bootcamper from a former batch, who talks about her own experience with React Native. She prefers to call him “Mordor”. This article is full of goodies like:
- Is there any ACTUAL way of passing data from a child component to parent in react? 👉 Explanatory video by Ania Kubów (8 minutes).
- How do I show different components in React depending on <insert random condition here>? 👉 Digital Ocean tutorial article.
Will we live happily ever after?
I can’t tell you for sure yet, as it usually happens with this kind of things, but hey! We already gave life to several projects together and we have some plans for the future.
After all I’m just a girl, standing in front of a JavaScript library, asking him to love me. 💓
