I’m a Web Developer & UX Designer in Toronto.
I really love making beautiful and aesthetically pleasing websites. I build with user friendly CMS systems like WordPress 😉 and Shopify and I like making smart digital experiences people actually want to use.
I also have my SEO and Web Accessibilty Certificate — so feel free to AMA!

Janel Lucia

web developer. ux designer. #a11y enthusiast.

React.js – Learning a new Javascript Framework

First of all what is React.js?

Before learning any language you should first understand what it is and why it was created. I did some research for you and I got this definition from the web:

“React (sometimes styled React.js or ReactJS) is an open-source JavaScript library for data rendered as HTML. It is maintained by Facebook, Instagram and a community of individual developers and corporations.”

And I got this definition from Facebook:

“React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.”

Basically there are tons of JavaScript frameworks out there and what sets react.js apart from the rest is the fact that it approaches building user interfaces by breaking them into components.

Why is React awesome?

Do you hate debugging? As a developer who loves pixel-perfect designs, being able to come back to a piece of code that was written days, weeks or even months earlier (or by someone else)— and not have to spend hours figuring out what the heck I wrote and how to change it — is a massive breath of fresh air. This is possible because React is fundamentally about small, self-contained components. That is, you’ll find a component for a button, another for a background, and another component for a field. This readability and maintainability is truly amazing. React is also unique in that each asset is made up of many isolated components. Want a button changed across the whole platform? One change and boom! Done.

Basic Terminology

React has a small API that makes it fun to use, easy to learn, and simple to understand. However, being simple does not mean it’s familiar. There are a few concepts to cover before getting started.

React elements are JavaScript objects which represent HTML elements. They do not exist in the browser. They represent browser elements such as an h1, div or section.

Components are developer created React elements. They’re usually larger parts of the user interface which contain both the structure and functionality. Think of concepts such as a NavBar, LikeButton or ImageUploader.

JSX is a technique for creating React elements and components. For example <h1>Hello</h1> is a React element written in JSX. The same React element can be written as JavaScript with React.DOM.h1(null, 'Hello');. JSX is less effort to read and write and is transformed into JavaScript before running in the browser.

The Virtual DOM is a JavaScript tree of React elements and components. React renders the virtual DOM to the browser to make the user interface visible. React observes the virtual DOM for changes and automatically mutates browser DOM to match the virtual DOM.

Online Resources to get Started

I signed up for Wesbos’s reactforbeginners.com and in this 30 video course Wes Bos helps you set up a fresh seafood market step by step. Highly recommended.

I encourage you to check out ReactJS for your next project or side project. It’s an incredibly flexible, useful tool for developers. And if you’ve already worked with React.js, do you love it as much as I do?