Getting started with React

I finally joined the React bandwagon after some push from my colleague. Coming from the MVC background it took a while to getting used to visualise everything in components. But once you understand the core philosophies of React you will fall in love with it and realize that you took the right decision to learn it.

Thriving communities and growing ecosystem (with the support of Facebook and Instagram) has made React a buzzword in JS community.


Before you start

If you are not very familiar with ES6 or new (weird) Javascript update, now is the good time to update your JS knowledge.

https://babeljs.io/docs/learn-es2015/ Short and comprehensive

https://github.com/ericdouglas/ES6-Learning Not so short but you can keep this handy for future references


Starting React

A lot of documentation and resources are available now to get you started on React very quickly. I followed the below list during the initial days.

Note: If you are not following the recent JS trends then you will find few things like babel, webpack, transpilers new but by the time you cover the basics of React, this all will make sense to you.

http://reactjsprogram.com although most of the courses are paid but the free course React.js Fundamentals is one of the best resources to start learning React. Tyler McGinnis does really well to explain the fundamentals of React with breeze.

https://egghead.io/technologies/react has some really awesome courses for React and JavaScript in general. I used it for both React and Redux courses. I would definitely recommend the course for Redux.

http://jsbin.com/ Although this has no connection with React, but I realised how easy this little nifty tool makes it is to start some ES6 and React programming. Just open the site and set two things (Add React library and Set Javascript to ES6/Babel) and you are good to go. Literally It will take you less than a minute to start writing React apps.


What next

As React only handles the View part, you will need support of extra libraries from ecosystem to build the fully functional app. Below is the list of additional libraries that you will come across very often.

Redux is a State management library and a popular implementation of React’s Flux. You will need to learn this pretty soon once you start building React apps. The author of Redux has also put a free course on egghead.io https://egghead.io/courses/getting-started-with-redux

FULLSTACK REACT is a pretty popular book created by Tyler McGinnis and others. With over 600 pages, the book covers very basics to advanced React with practical examples. Though it is not free but the prices is worth enough for the content it covers.

Depending on your preference you can either build your own boilerplate or use a ready one. You can either use this one create-react-app or any other alternative mentioned in the doc. Personally I prefer to use boilerplates once I understand the core blocks of it so that I can modify it based on my preference.

https://github.com/petehunt/webpack-howto Many find Webpack’s original documentation a bit difficult to follow, but a reference guide from Pete Hunt is pretty easy to put webpack at work.


Side effects, to keep you hooked

https://github.com/enaqx/awesome-react Github’s awesome-XXX repos are not new to developers, but they are undoubtedly best place to find almost everything.

https://medium.mybridge.co/@Mybridge This ranks some of the best articles on React/Web/Node in Top 10 list at the end of every month.


There is more

Last month React celebrated 50k stars on Github (which is a big deal), and they released a blog post explaining the evolution of React, https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html

This post is for the React Beginners only, but I will surely followup with new posts as I make progress.