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

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

Notify of
avatar

Isfhan Ahmed
Guest
Isfhan Ahmed
1 month 25 days ago

FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC! FANTASTIC!

Pistachin
Guest
Pistachin
2 months 13 hours ago

Thanks a lot, besides the way you teach / show stuff in this series of videos, I see you making 'silly' mistakes as the 'block-inline'. I've learned to code on my own and it has always bothered me making such mistakes, making me think that I'm an awful developer due to those mistakes (well, and sometimes, the mistakes I do are a little bit bigger). Anyway, thank you very much. 🙂 🙂

Ivan Buncic
Guest
Ivan Buncic
2 months 7 days ago

9:52 "CSS doesn't have variables" — caniuse.com/#search=css%20variables

Ivan Buncic
Guest
Ivan Buncic
2 months 7 days ago

I like that David is not a React master, but he is quickly picking up 🙂

Ivan Buncic
Guest
Ivan Buncic
2 months 7 days ago

most comprehensive React tutorial on Earth

Shak Daniel
Guest
Shak Daniel
2 months 13 days ago

In react 16+ you can also use pure functions…Example:class Filter extend Component { render() { <div> <input type=“text” /> </div> }}You can also do this now…const Filter = () => <div> <input type=“text” /> </div>Prettier 🙂

Stephen InGermany
Guest
Stephen InGermany
3 months 13 days ago

In the first episode you mentioned the code being on github… where exactly? There is no link

Zoltán Buka
Guest
Zoltán Buka
3 months 20 days ago

As a beginner it's great to see these "messy" tutorials as opposed to seeing a master running through the whole thing. MPJ looks like a fine mentor and David's asking all the right questions.

Paul Phillips
Guest
Paul Phillips
3 months 24 days ago

Great vid! Looking forward to watching more DevTips again 🙂

Kyaw Siesein
Guest
Kyaw Siesein
3 months 30 days ago

In css, we can use variables. I heard you said we cannot use variables in css.

Kyaw Siesein
Guest
Kyaw Siesein
3 months 27 days ago

Yo .. medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855 read this article. Hopefully u learned something

HouseDG
Guest
HouseDG
3 months 27 days ago

In scss (or compilers like that) we can use variables, not in css

1 2 3 6
wpDiscuz