Published on December 6, 2017 by DevTips

By using React components we’re building a dummy overview with JSX. We follow the sketch and just get the components in place, without having real data yet.

– – –

In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!

We do this by using React JS reactjs.org/ – a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.

And yes, this is not Travis – David and MPJ are filling in!

– – –

This video was sponsored by the DevTips Patron Community – www.patreon.com/DevTips

Listen to Travis’ Podcast – www.travandlos.com/

Get awesomeness emailed to you every thursday – travisneilson.com/notes

You should follow DevTips on Twitter – twitter.com/DevTipsShow

MPJ’s channel on programming Fun Fun Function is great –
www.youtube.com/funfunfunction

David is known as Data David discussing analytics and data –
www.youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg

Leave a Reply

81 Comments on "Creating a dummy overview with JSX – #6 React JS prototyping"

Notify of
avatar

cosmichero 2025
Guest
cosmichero 2025
20 days 8 hours ago

Ya everyone else teaching react is like an all knowing god at it but since they are they fail to see the common questions and basics that a beginner would ask. Having the guy there that is like "Hey can I do this?"… "no"….. "but whyyy no" is really helpful bc everything he is questioning i'm also questioning

Jeremy Spedding
Guest
Jeremy Spedding
26 days 10 hours ago

CSS variables do exist. color:var(—text-color);

Anders Lund
Guest
Anders Lund
28 days 16 hours ago

6:10 but what if I want a lot of style on the component? Won't it be a mess to add, let's say 10 different style attributes as inline style?

DevTips
Guest
DevTips
27 days 1 hour ago

Syntactically it's pretty much equivalent, CSS and JavaScript object literals are very similar in both terseness and readability. But perhaps you are are referring to the reusability of classes – object literals are actually more powerful and expressive when it comes to reusability, because they are easier to compose and generated with functions. We see some simple examples of this later in the series.

Patryk Bogdański
Guest
Patryk Bogdański
1 month 6 days ago

the best React tutorial! 😀 I love you guys! 😀

tehsimo
Guest
tehsimo
1 month 17 days ago

This is neat, but declaring all your CSS styles as "style" elements is fucking insane. Vue has definitely done it the correct way.

Daniel Arnolf
Guest
Daniel Arnolf
1 month 26 days ago

in VSCode, at the bottom right, under "Select Language Mode", instead of JavaScript, I use JavaScript React, makes things much easier, even when creating elements with TAB to autocomplete, it already sets "className" instead of "class" and many other things, I mean, it's JSX you're working with here. This tutorial approach is brilliant, so entertaining, so easy going, absolutely great, RESPECT !

Muzzbrah
Guest
Muzzbrah
1 month 29 days ago

these guys don't know how much DevTips'ers love CSS. Plus they don't know shit about CSS.

Muzzbrah
Guest
Muzzbrah
1 month 29 days ago

CSS does not have variables ? Dude you shouldn't have said that on this channel… CSS DOES HAVE VARIABLES !

Omar Suriel
Guest
Omar Suriel
1 month 30 days ago

I have been writing react code for a living for the past 6 months. Obviously im familiar with react but this is still super cool to see how other people write react and most importantly the reason behind their decisions.

Martin Vestergaard
Guest
Martin Vestergaard
2 months 15 hours ago

CSS does have varibels tho … otherwise nice video

1 2 3 5
wpDiscuz