React Learning Path by Godwill Barasa

So, you have chosen the path to become a React Ninja. In that case, I am Sensei, (Seonsaeng) Godwill Barasa, a software developer with 4 years of experience in React. This young warrior is going to be a journey like no other, be ready for a journey of a lifetime.

Pleased with your decision to take on React

React (also known as React.js or ReactJS) is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”.

He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.

Why you would want to learn React.

• React uses declarative instead of imperative syntax. It’s a simpler way of developing apps, and you can learn why here. Basically, React is faster to develop because you don’t need to tell the app how to represent the state — you just need to say what you’d like to happen. It’s quick, it’s easy, and there’s less room for human error.
• React Native makes app development easier. It brings that kind of philosophy to React with “Learn once, write anywhere”.Once you understand the basic architecture and thinking behind React, you’ll be able to develop fully functioning apps for both Android and iOS. You won’t have to learn two different ways to represent your app. So after you learn React, you can bring your new product to users not just as quickly as possible, but as widely as possible.
• The React community is amazing. React has a massive community of dedicated developers. The community helps to maintain and grow the open-source library, with everyone able to contribute their own components to the library.

The community is also so strong because of the great tools you can work within React, including React Profiler and React dev tools.

• React is all about Reusable Components. This taps into the current thinking behind ‘Design Systems’. These enable developers to provide a single source of truth for designers, ensuring consistency for large companies working across multiple tech platforms. Talking of which…
• React is used by huge organizations, who pay handsomely for React wizardry
• React is SEO-friendly
• React fully embraces JavaScript. JavaScript is at the forefront of current thinking in the development field. React is a JavaScript library that makes full use of JS’s capabilities.
• React is flexible and back-end agnostic, meaning you can use React no matter what the rest of your tech stack is.
• React is unopinionated. It won’t force you to use certain types of forms or routing. Instead, the choice is yours, so you can respond more dynamically and adapt to your users’ changing needs.
• You’ll increase your earning power. Learning React now will future-proof your career and increase your earning power.
• React has a fast learning curve i.e relatively easy to learn
• BONUS: Little to no breaking changes. Although it’s constantly changing, React doesn’t depreciate or remove APIs very often. With React, you’ll benefit from the core team’s commitment to maintaining backward compatibility. Companies of all sizes can’t afford to change their applications every year to keep up with technological innovation.

Prerequisites
Basic knowledge of HTML, CSS, and JavaScript.
Basic understanding of ES6 features. To get started you should at least know the following features:
1. Let
2. Const
3. Arrow functions
4. Imports and Exports
5. Classes
Basic understanding of how to use npm.

In addition to that, you will need knowledge in the following tools:
Git
HTTP(S) protocol
Linux Command Line Basics
Design Patterns

Fundamentals

Now, this is the main deal. You got to learn React and learn it well to become a React developer. The best place to learn React is the official website, but as a beginner, it can be a little bit overwhelming for you. That’s why I suggest you enroll in a couple of courses like:

React 16- The Complete Guide by Max
Modern React with Redux by Stephen Grider
Beginners guide to React by Kent C. Dodds
Fundamentals of React by Samer Buna

By now, you should have a basic idea of the fundamentals of React. It’s enough to start developing simple web apps in React.

Now, take a look at the React official tutorial: It’s a well-written article covering the fundamentals of React. And it also explains the specific topics very clearly.

Start building some projects
Simple todo-app
Simple calculator app
Build a shopping cart
Display GitHub’s user stats using GitHub API

React Router
React Router helps you create routes to your single-page applications. It’s very powerful and easy to use with your React application.

React Router tutorial by Paul Sherman
React Router and intro to SPA by Learn Code Academy
Routing React apps by Scotch.io

These articles are more than enough for you to get started with React routing.

Projects
A simple CURD application
Hacker News clone

If you are really interested in learning much about Router, check out the following guide: React Router complete guide by React Training

Server rendering
Server rendering is one of the coolest features in React. It can be used with any of the back-end technologies.Server-Side Rendering (SSR) in React helps you to create components in the server and render that as HTML in your browser. And when all the JavaScript modules are downloaded in the browser, React takes the stage. Simple!

I recommend the following for Server-Side Rendering:
Next.js, After.js, Rogue

First of all, take a look at the React-DOM API:And follow the below tutorials to get in-depth knowledge:

React server rendering by Tyler McGinnis
React router server rendering by Roilan Salinas
React Server-side rendering guide by Dennis Brotzky

Redux
Redux is a JavaScript library developed for maintaining application states. When you are building a complex application, it will add overhead to manage states across components. Redux helps you store all your states in a single source. And of course, React plays well with Redux :)

Despite being complicated and introducing a lot of boilerplate code for even the most simple data fetch,

Redux is still a very popular and widely used state management library in the industry.

You should learn how to do the following:
Set up a project with Redux
Use Redux for data fetching and managing state
Optionally, look into Redux Thunk

To get started:

Redux tutorial by Learn Code Academy
Redux tutorial for beginners by Valentino Gagliardi
React Redux by CSS Tricks

API Clients
In today’s world, you will rarely build an isolated GUI, instead, there is more chance that you will build something which communicates with other application using APIs like REST and GraphQL.

Thankfully, there are many API clients available for React developers, here is a list of them:
REST — Fetch, SuperAgent, axios
GraphQL — Apollo, Relay,urql

Apollo Client is my favorite and provides an easy way to use GraphQL to build client applications. The client is designed to help you quickly build a UI that fetches data with GraphQL and can be used with any JavaScript front-end.

Btw, if you don’t know GraphQL and REST, I suggest you spend some time learning them. If you need courses, the following are my recommendations:
GraphQL with React: The Complete Developers Guide
REST API Design, Development & Management

Desktop
There also exists some React-based framework to build desktop GUI like React Native Windows which allows you to build native UWP and WPF apps with React.
The Framework suggests the following libraries:
Proton Native
Electron
React Native Windows

Virtual Reality
If you are interested in building a Virtual Reality based application then also you have some frameworks like React 360, which allows you to exciting 360 and VR experiences using React. If you are interested in that area, you can further explore React 360.

Conclusion
Feel free to reach out on Instagram or LinkedIn for random conversations about geeky stuff. I am also lea
https://www.instagram.com/godwllb/
https://www.linkedin.com/in/gdwllb/