React.js is our main technology of choice in regards to front-end web development. It’s one of the most popular and fastest-growing JavaScript frameworks out there.
When it comes to getting started with it and learning how to use it, you could probably face some challenges if you don’t have experience working with this kind of frameworks. That’s why we provide a deck of training resources and tutorials to our junior web developers, which we are now sharing with you as well!
(If you are not so acquainted with HTML & CSS or JavaScript, I suggest you check this guide first for HTML and this one for JS)
React & TypeScript Tutorials
For Learning React:
Official website of React provides tutorials that we found very useful for beginners. As soon as you click on Docs you’ll see an overall “Getting started” guide which gives you a good understanding of what’s React and how it works.
Besides, there’s a more practical tutorial that guides you through the process of building a small game while teaching you significant techniques for developing any kind of React-based app.
There are also several online courses you could find. For instance, take a look at this 60 minutes course from egghead.
For Learning TypeScript:
As TypeScript is our compile-to-JavaScript language of choice, we give our new web developers this Tutorialzine’s guide in which you’ll learn how to get started with TypeScript in a flash. It’s pretty easy to follow and well-explained.
TypeScript allows you to work with types, getting in result a better-organized code syntax and it also becomes easier to catch errors before runtime.
You can also check out this documentation from TypeScript official website in regards to functions, which are the fundamental blocks of code designed to perform a specific task.
Tools & Libraries
These ones are not exactly tutorials of React but useful tools to make things easier.
Ant Design:
Ant Design is a React UI library that is helpful for building good-looking user interfaces. It provides handy UI components such as buttons, dropdowns, lists, sliders, and more.
Its official site has a complete introductory guide where you will find everything you need to know to get started.
Storybook:
Storybook is a tool that lets developers test each component isolated. This is determinant for seeing how components behave in different scenarios and with various props (that stands for properties).
As with the other tools mentioned before, Storybook has its own documentation with guides, tutorials, and even live examples of how it works. We suggest you check the Writing Stories section in order to understand the methodology of this tool.
React Router:
React Router is a library that gives you the ability to declare different routes for a web app. Routing basically means how an app directs traffic. Due to the fact that React implements single-page applications, by default you cannot set various routes. This last thing is crucial for a real web app. Here is where React Router comes in.
Our quick-start guide of choice is the one given by the creators of this tool. Not only it has concepts and definitions but also blocks of code that lets you start routing in no time. You can also find its Git Repository here.
MobX:
MobX is a standalone library for state management. Its main objective is to avoid unnecessary communications with the server.
You can start working with MobX right away by following this 10 minutes guide. Yes, it´s fast and easy. No, it´s not incomplete. In fact, there you won´t only learn how to use it but also the core concepts behind this tool.
Its Git Repository contains as well more in-depth guides and documentation that you might find useful.
Final thoughts
Those resources listed above are the ones we recommend and provide to new members of our team. As React is a very popular framework among web developers, you will find many other guides all over the internet. Don’t hesitate to share with us the ones you found more useful!
Are you thinking about starting a React-based web development project? Get in touch with us!
