Thread by @felipedemorais_

I'm learning @reactjs and it's ecosystem. I will share my learning journey here as a thread.

#LearnInPublic

I will give some context first. I have been working with Java and contributing for Python open source projects like #SerenataDeAmor in the last 3 years. I already knew some frontend but it have changed a lot during this time.

Now I'm coming back to this world though @reactjs because of my new engagement @thoughtworksbr

I have started looking for starting guides and learning paths so I have found the book The road to learn react from @rwieruch, that have a translations to brazilian Portuguese and you can get free on LeanPub in many languages including pt-br.tks @rwieruch!
leanpub.com/the-road-to-le…

First I just read it without do any code, it gave an understanding of what I had to learn to do a pure react app with some #ES6 features. Later I came back and did the code and this is the result hacker-news-in-react.herokuapp.com and here the code github.com/lipemorais/hac…

I used create react app what give a tip that the setup would not be that easy if I have to do it by myself.

facebook.github.io/create-react-a…

After see the value I bought the book on Lean Pub to support it. I continued in my journey through free resources to learn it through @eggheadio so I watched the course from @kentcdodds The Beginner's Guide to React
egghead.io/courses/the-be…

This explained some different ways to do the same thing that I have done but I realized that I need some way to see what was the big picture. There is a lot of things like webpack, create-react-app, ES6 that had to understand how does it all combine to be used in a real react app

So I started to read and watch more to get the big picture faster and leave the practice for my engagement. So I watched Start Learning React from @joemaddalone on @eggheadio egghead.io/courses/start-…

My team don't uses that much of Enzyme js they are using react testing library from @kentcdodds, Mobx js to share state and @fbjest to run the tests.
airbnb.io/enzyme/
mobx.js.org

So I went to watch Manage Complex State in React Apps with MobX from @mweststrate on @eggheadio egghead.io/courses/manage…

Since there is not a lot of Enzyme and Redux I'm not looking for it but sometimes I bump in some content related to it.

But this was the end of th useful content for me @eggheadio :/

Everybody had recommended me very well @reactjs docs so I went there and read all about the main concepts, this was pretty important for help understand a lot of the things behind the scenes.

reactjs.org/docs/hello-wor…

While I was Ok with HTML, CSS was not that easy I had faced some issues to apply styles using Flexbox and CSS Grid layout. I have been recommended for 2 games around it. tks @thomashpark
flexboxfroggy.com
cssgridgarden.com

The egghead courses was working pretty well and I realized that it was helping speed up the learning curve. So I was compelled to buy the membership to have access to all the courses. But 250 USD is almost 1000 BRL for the yearly subscription. Pretty hard to me.

Some of my team mates told me about @FrontendMasters but the subscription was even more expensive 390 USD yearly more than 1500 BRL. Talking with one of my coworkers she told me that she asked for discount based on Purchasing Power Parity and she got it.

en.wikipedia.org/wiki/Purchasin…

So after take a look at the similarities and I bought one month of @FrontendMasters. I will take the most of it during this time and after it I will check if worth it renew for a second month or not. By the way at the moment that I writing it @eggheadio have a 45% discount.

I asked the discount based on Purchasing Power Parity for @FrontendMasters and got it. They offered me what they called International Plan 24USD/Month and 240USD/Year.

So in the last weeks I'm focusing on React Learning Path from @FrontendMasters .
frontendmasters.com/learn/react/

Right now I'm pretty confident that this was the right choice for my context.
I have done most of the learning path and enjoyed it a lot.

Complete Intro to React v4 by @holtbt ✅
Intermediate React by @holtbt ✅ I didn't watch the parts about TypeScript and Redux
...

I have started Advanced React Patterns by @kentcdodds but its pretty deep, it doesn't fits my mind yet. I take a new look at it later.
Testing React Applications, v2 by @kentcdodds ✅

Now I'm watching Advanced State Management in React (feat. Redux and MobX) by @stevekinney
I will let here my impressions when I finish it.

About @FrontendMasters membership so far, it's pretty good. The course about introducing react by @holtbt and testing react apps by @kentcdodds were the most useful resources to wrap my mind around @reactjs and help me have a clear view of the ecosystem.

For Mobx the ten minutes tutorial was pretty useful too.
mobx.js.org/getting-starte…

I'm at almost 3 months at this journey so far, I have been pretty anxious because I put a lot of pressure on myself so I started to play a game from my childhood to balance it called Final Fantasy Tactics.

Now that I feel that I understand the ecosystem I'm back to code more with a better understanding of what I'm doing I will code some small projects to practice everything that I have learned during this time.

I had just published a simple counter using Mobx.
mobx-counter.herokuapp.com
github.com/lipemorais/mob…
Tks @ngasonicunicorn for the pair programming

I have used this to deploy to heroku with few simple steps.
blog.heroku.com/deploying-reac…

I will share my understanding and some opinions about few tools that I have seen so far:
- Prettier(prettier.io) is a formatter for you code that ends the discussions about how to format your code.

- ES Lint: Helps you avoid small mistakes but let the formatting tips for prettier. It need some configuration if you want to use some upcoming JS features

- Webpack(webpack.js.org): I never had to use a bundle before but looks that with ES6 and the velocity that JS ecosystem is growing it's need to help you with some convenience but it's pretty challenging to configure, take you time.

...

@parceljs is a pretty good alternative if you want to abstract all this configuration to get Webpack working.

- @babeljs: is responsible for bring future JS to your present but it takes some configuration to let it know what part of the future you want to have with you. It takes sometime and some strange messages that you will have to Google until you get at a good setup to go.

- @fbjest: is the most recommended tool to use for JS testing nowadays, I just went with it for now. It brings almost everything that I needed so far, assertions, coverage, easy to setup, tests structure, BDD.