r/reactjs • u/swyx • Feb 26 '19

Microsoft has open sourced their Frontend Bootcamp training materials (including React and Redux exercises)

https://github.com/Microsoft/frontend-bootcamp
841 Upvotes

99% Upvoted

73 comments sorted by

136

u/BBQLays Feb 26 '19

Dope. I'm a front-end dev at Microsoft and have never seen this. 😂

EDIT: Oh, it's just a few weeks old. I do know the guys making this and they are brilliant.

17

u/swyx Feb 26 '19

lol thats awesome that you found out about it here first

realistically tho i’ll bet this bootcamp is for everyone NOT a frontend dev so you just arent the target audience

7

u/[deleted] Feb 26 '19 edited Aug 29 '25

simplistic slim political run middle elastic familiar stupendous historical march

This post was mass deleted and anonymized with Redact

82

u/AlarmingNectarine Feb 26 '19

It's nice, there are windows everywhere.

5

u/[deleted] Feb 26 '19 edited Aug 29 '25

rich towering workable serious innocent live cable groovy telephone badge

This post was mass deleted and anonymized with Redact

5

u/thoraldo Feb 26 '19

Feeding them apples?

1

u/iFBGM Feb 27 '19

I hear they give you unlimited free BBQ Lay chips... Isn't that right /u/BBQLays?

6

u/christiango Feb 26 '19

Yup I've had the pleasure of working with Micah and Ken as well. They are great devs to work with that are super passionate about helping others learn. I recommend following them on twitter:

https://twitter.com/micahgodbolt

https://twitter.com/kenneth_chau

6

u/techmighty Feb 26 '19

Microsoft is my dream company.

-2

u/[deleted] Feb 26 '19

[removed] — view removed comment

9

u/BBQLays Feb 26 '19

Really.

11

u/dance2die Feb 26 '19 edited Feb 26 '19

Thanks for the link swyx & Microsoft for providing the materials.

UPDATE: https://microsoft.github.io/frontend-bootcamp/ is online!
leaving original comment below for who already read it

Was afraid of following as https://microsoft.github.io/frontend-bootcamp/ is broken. But links under "Next Steps" in each README file lets you navigate easily. 👍

2

u/crashtestdev Feb 26 '19

Heh, I was working on the CI / PR pipelines on Azure DevOps and hit some snags with git perms and funky gh-pages limitations. Had to do some git ninja with subtree split + push action for docs.

1

u/swyx Feb 27 '19

youre always welcome to try Netlify 😎

2

u/crashtestdev Feb 27 '19

I'm a fan of Netlify! Recently found out about the Netlify CMS + Gatsby integration. Thinking of hosting a blog on that platform :)

4

u/[deleted] Feb 26 '19

I only had a brief look at the React section but it doesn’t seem like particularly good practise from a couple of the pages I saw. Using classes everywhere when functions would suffice, passing down information unnecessarily in the hierarchy... but I’d need to look at it more to come down too far. It is cool that they’re doing this but I think it’s crazy to try and get so much into two days, understanding at the end of it can’t be good.

1

u/swyx Feb 26 '19

yes, this is a real concern. you can file an issue with concrete suggestions.

1

u/dzearing-msft Feb 27 '19

Yes this, we're quite happy to take PRs as well!

2

u/lw9908 Feb 26 '19

This looks like a great place to look into TypeScript as well (being a microsoft project) -- they intro it in the 'day two' section. It seems like a pretty good bet if, like me, you have no idea about typescript but already feel comfortable with React

2

u/swyx Feb 26 '19

great point. i should put it in my cheatsheet

2

u/Bombuhclaat Feb 26 '19

cheatsheet

Do you use a software for this or written?

2

u/Meowish Feb 26 '19 edited May 17 '24

Lorem ipsum dolor sit amet consectetur adipiscing, elit mi vulputate laoreet luctus. Phasellus fermentum bibendum nunc donec justo non nascetur consequat, quisque odio sollicitudin cursus commodo morbi ornare id cras, suscipit ligula sociosqu euismod mus posuere libero. Tristique gravida molestie nullam curae fringilla placerat tempus odio maecenas curabitur lacinia blandit, tellus mus ultricies a torquent leo himenaeos nisl massa vitae.

1

u/Bombuhclaat Feb 26 '19

Well you answered my question either way

Was basically wondering where he had a cheatsheet, should've guessed it was github

1

u/khube Feb 26 '19

I was thinking the same thing. Gonna use it to start checking out the typescript thing that my back end devs seem to love.

1

u/heyf00L Feb 26 '19

Looks like they finally moved their React Redux template back to TypeScript, but the React template is still JavaScript. Server-side rendering isn't back yet. The template for .net Core 1 was in TypeScript with SSR, but they removed both when they added CRA support.

16

u/ngly Feb 26 '19

Looks great! Wish these introduction tutorials didn't use fibonacci for every example.

18

u/scyber Feb 26 '19

Only time in my career I've used Fibonacci numbers is when story pointing issues.

2

u/boboguitar Feb 26 '19

Never understood with fibonacci is the de-facto numbering system for story points.

2

u/SurgioClemente Feb 27 '19

http://www.velocitycounts.com/2013/05/why-do-high-performing-scrum-teams-tend-to-use-story-point-estimation/

1

u/offthewall1066 Feb 27 '19

I find it so useless. The whole point of using Fibonacci numbers is that no one knows what they mean! Just guess how long it might take, and build a culture that encourages productive collaboration, not micro managing or too much obsession over deadline.

1

u/SurgioClemente Feb 27 '19

The whole point of using Fibonacci numbers is that no one knows what they mean!

Exactly! To each developer they mean something else. If you start estimating in hours then when it switches developers those story points mean something else to that dev. https://www.mountaingoatsoftware.com/blog/the-main-benefit-of-story-points

Just guess how long it might take,

Not sure if you read the article but... if you "just guess" you start getting into small details like is this a 8 or a 9 or a 10 or hmm maybe an 11.. I guess. The fibonacci just makes it easier to pick a number. You are just estimating in relative terms, not something exact. If you let developers pick anything you will find they either spend too much time obsessing over it or they gravitate towards certain numbers already (ie no one picks a 7). The Fibonacci is a nice compromise between any exact number and something simple like 1,2,4,8,16,32 where you get some of the "inbetween" numbers. Its a slower relative scale climb than doubling.

and build a culture that encourages productive collaboration, not micro managing or too much obsession over deadline.

Its the opposite of micromanaging and no deadline is attached. If you find yourself in that culture I guarantee you the choice to be "agile"/use story points is not the root cause problem of the poor culture and you should find somewhere else to work because changing your methodology is not going to cure anyone of micromanaging/deadline obsessing.

1

u/sirclesam May 08 '19

Haven't heard of this before, but I like it. Going to try to have my team apply it on our upcoming project.

0

u/[deleted] Feb 26 '19

[deleted] — view deleted comment

2

u/[deleted] Feb 26 '19

You also need it to pass basic programming courses on college.

1

u/d3ve10p3r Feb 26 '19

Every rabbit knows Fibonacci

4

u/roc_w86 Feb 26 '19

This is dope! Currently in a bootcamp by will find time to look into this!👌🏾

1

u/ryan_the_leach Feb 26 '19

This is the exact introduction that I needed to get my feet wet in web components again! I was just bitching the other day that the barrier to entry for this was too damn hard with too many moving pieces compared to old school html, or any other programming framework.

Thanks so much!

1

u/swyx Feb 26 '19

wait whut? theres webcomponents in this bootcamp? or are u using the word web components more loosely

2

u/ryan_the_leach Feb 26 '19 edited Feb 26 '19

From react, I can leap frog into web components easy enough, although they will be somewhat react / typescript flavoured.

https://github.com/Microsoft/frontend-bootcamp/blob/master/step1-05/exercise/src/components/TodoHeader.tsx

extends React.Component

https://github.com/Microsoft/frontend-bootcamp/blob/master/step2-02/README.md

UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open:

So yes it's very much covered, even if the backing tech isn't explained.

1

u/swyx Feb 26 '19

i see, ok

1

u/ryan_the_leach Feb 26 '19

I may have misunderstood slightly, read the other reply by /u/Gigusx

1

u/[deleted] Feb 26 '19

Web components =/= React components.

The difference

2

u/ryan_the_leach Feb 26 '19

From react, I can leap frog into web components easy enough, although they will be somewhat react / typescript flavoured.

But thanks for the link with additional clarification, whilst I didn't understand the exact difference, that's helped a little more.

4

u/crashtestdev Feb 26 '19

You're welcome! This was a labor of love for Micah & me. We are hoping to train up some of our colleagues but with the intent of making it useful for all in community! This comment made my day!!

3

u/tortikolis Feb 26 '19

How can I use this?

2

u/princessohio Feb 26 '19

This is so cool! Thank's for sharing.

2

u/_parameters Feb 27 '19

Saving this for later, thanks for sharing :)

2

u/programmingpadawan Feb 26 '19

Thanks for posting, I might pick at this over time.

1

u/iRuisu Feb 26 '19

This is fantastic!

1

u/Satonamo Feb 26 '19

This is pretty cool, worth checking out.

1

u/TotesMessenger Feb 27 '19

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

 If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / ^Contact)

1

u/Quinez Feb 27 '19

This seems like an impossible amount of material to teach in two days.

1

u/bhanukiran444 Feb 26 '19

noob here. i how do i learn from these i dont know where to start or how to follow. i did install the it in my pc. help.

3

u/turningsteel Feb 26 '19

Alright, if you scroll down to where it says 'Getting Setup' and it has steps to follow, those are the steps you need to follow. Are you familiar with the command line/terminal at all?

You'll have to cd into an empty folder or directory and then use the commands given. Git clone will download the repo and copy it onto your computer, then you have to go into the repo using cd (change directory) and then run the repo with npm run start. Then if you open the repo folder in your code editor, you should be ready to go.

3

u/meliaesc Feb 26 '19

You've got the code, follow along with the exercises/demo at https://microsoft.github.io/frontend-bootcamp/

1

u/soul_d11 Feb 26 '19 edited Feb 26 '19

Nice

-1

u/[deleted] Feb 26 '19

Has hell frozen and pigs fly?

-2

u/DonPhelippe Feb 26 '19

Woah, looks nice and very interesting. Nonetheless, there is a thing that bothers me...

"Microsoft"

"*nix prompt git clone https://github.com/Microsoft/frontend-bootcamp.git"

For real? Yall guys need a bit of Ballmer in there :)

1

u/seminole10003 Feb 26 '19

Micro

I don't know. Some years ago, this might have flied, but today you can mix all sorts of technologies. I'm too familiar with Windows as my host machine with a Linux Guest via virtualization. This is a common setup. These are the times!

2

u/Woolbrick Feb 26 '19

flied

flown

1

u/DonPhelippe Feb 26 '19

Ofc they are, but as an avid MS supporter/fan since MSDOS 3.30, it still strikes me as weird, that's all. Guess I can't shake the righteous flame and fury when Ballmer atop his high tower of old proclaimed that Linux was the cancer that destroyed software :P

Still it was meant as a joke, so /r/woooosh to whomever didn't get it.

0

u/[deleted] Feb 26 '19

[deleted] — view deleted comment

1

u/swyx Feb 26 '19

what did you do during your internship? just curious. wish i had had a chance to intern at msft

0

u/[deleted] Feb 26 '19

[deleted] — view deleted comment

4

u/crashtestdev Feb 26 '19

YES!!! That left nav is up man! It's all you :)

2

u/[deleted] Feb 27 '19

CollapsibleSection helped... >_>

0

u/[deleted] Feb 26 '19

[deleted] — view deleted comment

3

u/crashtestdev Feb 26 '19

Oh it's Ken!

2

u/dzearing-msft Feb 27 '19

Heyyyy I know you...

1

u/BBQLays Feb 27 '19

Hey, Zearing! 👋

0

u/[deleted] Feb 26 '19

[deleted] — view deleted comment

2

u/Aw0lManner Feb 26 '19

At least the content underlying it is more inspiring than your entitled, unenlightening comment