#TodayILearned React and external components interaction in codepen.

TL;DR: React is not that bad.

I started learning React a month ago and completed the freecodecamp React section. IDKW but had this feeling that I won’t get too far in case I needed to develop a form on my own, let alone an application. So I decided to deepen a little further into the React parallel universe.

I come from a vanilla background (plain html, js and css… maybe a little bootstrap). I decided to take that route with the intention of mastering the basics and to grow my knowledge from there. The thing is besides HTML, CSS and JS are two humongous beasts to conquer, and that the more that I studied them, the less I felt I was able to accomplish.

Enters React.

React gave me the impression to be more a lego set than a beast. It felt more like a set of pieces to build purple lizards, winged houses and underwater motorcycles.

Compared with other technologies like JS the react learning curve seems sorter and shallow. I’m super humble when saying this because I know that my knowledge is really (really really) finite, and I know I might change my opinion in the future 1.

My point here is I don’t remember the last time I was this excited and committed that I studied 6 hours a day something and started filling my notebooks with sketches and findings.

One particular step I found to be hard was to use React in my favourite prototype platform: Codepen. And it was actually not that difficult, to to came to this realization is. So lets get to the recipe, shall we?

First you’ll need to add the JS external references:

Second, and this is the tricky part, you’ll need to add a CSS reference for the semantic-ui components. Normally when you import a component via npm, it comes with its style sheet, but in codepen you’ll need to do that part manually:

And the one last part of the trick is that I needed to create this quick references for each component I needed to use


Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s