React.

js & React Native Learning Path for Fresh

Graduates @ NorthLadder (V1)

About the Role & Learning Objectives

As a new joiner, you will be part of a multicultural team that’s responsible for the full software
development life cycle, from conception to development of web and mobile applications at
North Ladder. You will be able to challenge yourself with cutting-edge technologies. You will
be faced with challenges such as building new applications for web and mobile, both iOS and
Android devices, and working on our existing Dealer and Retail applications.

● You should also be familiar with visual design and be willing to work with a team.
● You will be collaborating with an onsite and a remote team on projects while also
working independently on some deliverables.

The main target and overall mission for you will be to build and maintain features for the
design system that you will be using for our web (ReactJs and React Native Web) and mobile
(React Native) applications. Our expectations at the end of this learning path are that you
should:-
● Be able to write clean code with projects that are smartly designed.
● Have a solid grasp of JavaScript, and React.JS and be comfortable writing web and
mobile applications with React Native and TypeScript.

Preferred Skills and Traits

Below are some nice-to-have qualities for the ideal graduate. It would be great if you meet
these qualities, but it’s not mandatory.

● It will be great if you have basic knowledge of HTML, CSS, and JavaScript.
● You are proactive, dynamic, curious, and eager to learn.
● You Study a relevant field for web & mobile development.
● You have some experience working with technical and non-technical people.
 ● High understanding of mobile development UI/UX design principles and best practices.
● Have used and feel comfortable with Jira and Git (Bitbucket).
● A natural curiosity for new scripting languages, frameworks, and technologies
● Knowledgeable of Agile–Scrum way of working is comfortable dealing with the
pressure of delivering excellent outcomes.

The Learning Phases

Learning will is broken down into 4 phases, whose complexity slightly increases down the
phases. This section outlines some helpful topics you will cover, in no particular order. Ranging
from setting up your development environment to the basics of HTML, CSS, JavaScript, React,
React Native, Build Tooling, Performance, Testing, and Accessibility. Below are the phases....

1. Setting Up your environment (1 week)

a. Basic Terminal Usage (Command line)
b. Git - Version Control with Bitbucket & Github
c. Text Editor / IDE (Integrated development environment) & Linting
2. Learning the Basics of Web Development, HMTL, CSS 7 JavaScript
a. Web Fundamentals (2 days)
b. Learn HTML (1 week)
c. Get intimate with CSS (1 week)
d. Learn JavaScript (1 week)
3. Learn how to React & React Native and Node
a. Getting Started with React (1.5 weeks)
b. Getting Started with React Native (1.5 weeks)
c. Getting Started with Node (1.5 weeks)
4. Accessibility, Testing, Build Tools, and Deployments
a. Testing Your Apps (1 week)
b. Package managers, Build tools, and bundling (1 week)
c. Accessibility 1 day)
d. Performance (3 days)
e. Deployment (2 days)
Phase 1 - Setting Up your environment

Basic Terminal Usage (Command line)

The terminal is an interface used to execute text commands, and it gives you access to the
underlying operating system. Basic terminal usage is a skill all developers need regardless of
their specialization. Command line is very important so I strongly recommend you study more
on how to use it. The better you are with the command line, the more efficient you will be as a
front-end developer.

What you will use

● Hyper and tweaks

● Warp and tuts

Additional helpful tools to use

● Starship
● Oh My Zsh

Other great alternatives in the wild

● iTerm2 and tweaks

● Vim

Learning Resources

● Command-line crash course - MDN web docs

● Command Line Crash Course - Freecodecam
● Learn the Command Line - Codecademy
● 5 Tweaks for a Productive Terminal
● Yet another step-by-step guide for a better terminal setup
● Why customize your shell anyway?
● What is the difference between shell, console, and terminal?
● Setting Up a Development Environment
Git - Version Control with Bitbucket & Github

Git is a version control system that enables developers to collaborate as a team, tracking
changes in their projects.

What you will use

● Bitbucket

Helpful tools to use

● Source Tree App

● GitHub Desktop App

Other great alternatives in the wild

● GitHub
● GitLab

Learning Resources

● Git Handbook - Github guides

● Git book - Git
● An introduction to Git - Freecodecamp
● Version Control with Git - Udacity
● Git & GitHub Crash Course For Beginners - Traversy media
● Learn Git In 15 Minutes - Colt Steele
● Git and GitHub for Beginners - Crash Course - Freecodecamp

Text Editor / IDE (Integrated development environment) & Linting

The text editor is where you will write your code. Having the right text editor can improve your
productivity.
There are a lot of IDE to pick from, but let’s look at a few:
 ● Visual studio code - visual studio code is the best IDE for front-end development. It
works across all operating systems such as macOS, Windows, and Linux. Visual studio
code comes with a great deal of extension which helps in improving productivity as a
front-end developer.
● Sublime text - sublime text is also available on macOS, Windows, and Linux. It is fast,
easy, and flexible to use.
● Atom - Atom is an open-source code editor for macOS, Linux, and Windows developed
by Github with supports for plugins.

Other great alternatives in the wild

● Vim

Linting and Style Guides

● Airbnb Style Guide

○ Standard (Alt)
○ Google (Alt)
● Prettier
● Eslint
● TSLint
● TypeScript

Phase 2 - Learning the Basics of Web Development, HMTL,

CSS & JavaScript

Web Fundamentals

It is important to understand how the web works before you start learning any technologies.
You should learn about things like:
● What is the internet and how does it work
 ● HTTP / HTTPS
● Browsers and how they work

Learn HTML

HTML stands for Hypertext Markup Language. HTML (Hypertext Markup Language) is the
markup language for building web pages, it is also the building block of the web. HTML is easy
to learn and comprehend. With just HTML, you can build a basic website.

Example HTML Tags

● HTML Headings- these are what you use to display titles or subtitles on your web
pages. (h1, h2, h3, h4, h5, h6)
● HTML Forms - HTML forms are used to collect data inputs such as a username and
email.
● HTML Elements - HTML elements define how web browsers will format and display
content. Content in the <i> tag will be displayed as italics, and content in the <strong>
tag will be displayed as bold.
● HTML Attributes - HTML attributes provide additional information about the HTML
elements.
● HTML layout - HTML layout defines the different ways a website displays content. It is
advisable to use semantic HTML elements such as header, nav, section, article, and
footer because it clearly describes the element to the browser and developer.
● Open Graph Meta tags for social rich content description. Useful for SEO and Social
Sharing Metadata.

Note on JSX:

● Closely related to HTML is `JSX`, a syntax that was popularised by the React.js
framework, that allows you to write html like syntax within JavaScript.

Here are some resources to learn HTML:

● HTML Full Course - Freecodecamp

● HTML Crash Course For Absolute Beginners - Traversy Media
 ● JSX docs by Meta
● What is JSX
● Open Graph protocol
● 12 Essential Open Graph Meta Tags for Facebook and Twitter

Get intimate with CSS

Cascading Style Sheets is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML or XML. CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript. Its one of the most
overlooked skills to master but also one of the most important to learn.

Critical CSS topics you will need to cover:

● CSS box model - The CSS box model consists of the margin, border, padding, and
content. The image below shows us the CSS box model.
● CSS positioning - CSS positioning helps you manipulate an element to different
locations such as fixed, relative, absolute, static, sticky, etc. The image below shows us
CSS positions.
● CSS grid - CSS grid is a two-dimensional system with rows and columns. CSS grid
makes it easier to structure a web page without having to use floats.
● CSS Flexbox - Flexbox is a one-dimensional system that allows us to choose between
a row or a column as the main layout or structure of a web page. CSS flexbox also
makes it more flexible to structure a web page without having to use floats.
● Responsive Design and Media Queries - Responsive design is very important and
should be in the mind of every developer when building a web application. Media
queries are useful when you want to modify your application to fit a device such as
Desktops, tablets, and phones.
● CSS Transition, Transform, Animation - These properties aid animations on the web.
● CSS Functions - to represent more complex data types or invoke special data
processing or calculations.
● CSS Variables - These allow you to write and reuse custom CSS properties.

CSS Preprocessor
 ● Sass - Sass (Syntactically Awesome Stylesheet) is a stylesheet language that’s
compiled into CSS. It allows you to use variables, nested rules, mixins, functions, and
more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets
well-organized and makes it easy to share design within and across projects.
● Less - Less stands for Leaner Style Sheets and is a backward-compatible language
extension for CSS.

CSS Frameworks you will lean

● Tailwind CSS - According to the official documentation, Tailwind CSS is a utility-first

CSS framework for rapidly building custom user interfaces. Tailwind allows us to use
inline styling and achieve incredible results without using a single line of CSS.
○ Tailwind & Twin Macro.

Others out there

● Bootstrap - Bootstrap helps us build fast and responsive websites.

● Foundation - Foundation is a responsive front-end framework that makes it easier to
design responsive websites, and apps on any device.
● Bulma - a free, open-source framework that provides ready-to-use frontend
components that you can easily combine to build responsive web interfaces.

CSS In JS

● Styled-Components
○ Styled Components with Tailwind, Twin Macro
● Emotion

Learning Resouces

● Mastering CSS Principles: A Comprehensive Guide. Bookmark it, it links to additional

sources that will make you a CSS hero).
● A Complete Guide to Flexbox - Chris Coyier, CSS Tricks
● A Complete Guide to Grid - Chris House, CSS Tricks
● CSS Crash Course For Absolute Beginners - Traversy Media
● CSS Tutorial - Zero to Hero - Freecodecamp
● Flexbox CSS in 20 minutes - Traversy media
● CSS Grid Layout Crash Course - Traversy media
● Tailwind CSS crash course - Traversy media
● The State of Changing Gradients with CSS Transitions and Animations - CSS Tricks
 ● A Complete Guide To CSS Transforms And Transitions Property - Lambdatest
● The Ultimate Guide to Animations in CSS - Hubspot
● An Interactive Guide to CSS Transitions - Josh W Comeau
● A Complete Guide to CSS Functions - Eric Bailey, CSS Tricks
● Using Media Queries For Responsive Design In 2018
● CSS Variables in 100 Seconds - Fireship
● A Complete Guide to CSS Gradients - Geoff Graham, CSS Tricks
● A Complete Guide to CSS Media Queries - Andres Grande, CSS Tricks
● Controlling CSS Animations and Transitions with JavaScript - Zach Saucier, CSS Tricks
● 100+ CSS Resources For Web Designers And Developers
● https://developer.mozilla.org/en-US/docs/Web/CSS
● https://www.freecodecamp.org/news/follow-these-steps-to-become-a-css-superstar-8
37cd6cb9b1a/

Learn JavaScript

“Any application that can be written in JavaScript, will eventually be written in

JavaScript.”
- Atwood's Law, The Principle of Least Power

JavaScript is one of the most popular programming languages in the world. It is the language
of the web. JavaScript enables us to create dynamic content. When you create your HTML
structure and your style with your CSS, JavaScript makes the website dynamic and alive.

For an illustrated JavaScript/React RoadMap - Please Start here 👉 "The 2022 React JS
Developer RoadMap [Updated] - An illustrated guide to becoming a React Developer in 2022
with links to relevant courses". Seriously! Read that article 5 times and then come back to this
document.

Some of the basics of JavaScript you need to learn are:

 ● JavaScript Syntax - The syntax of JavaScript is the set of rules that determine how a
program is written by a programmer and interpreted by a browser.
● DOM Manipulation - The DOM is a representation of how the content of a web page is
structured. JavaScript manipulates the DOM by updating the content, and the style,
removing elements and adding new elements.
● Learn Fetch API - An Application Programming Interface (API) is an intermediary that
allows two applications to communicate with each other. When building applications,
you will have to work with external data from APIs, and fetch allows browsers to make
HTTP requests to a web server.

JavaScript Framework you will be using

● ReactJS

Some great alternatives out there

● Preact
● Angular
● Vue
● Svelt
● Ember.

Learning Resources

● Learn JavaScript - Freecodecamp

● JavaScript Tutorial for Beginners - Learn JavScript basics in one hour with Mosh
● JavaScript Tutorial for Beginners - Clever programmers
● JavaScript Crash Course For Beginners - Traversy media
● https://devhints.io/es6
● https://www.toptal.com/javascript/javascript-es6-cheat-sheet
● https://mbeaudru.github.io/modern-js-cheatsheet/
Phase 3 - React & React Native and Node

Getting Started with React

● How, When, What & Why React

● Advantages of React?

Environment Set Up

● Environment set up
● Create React App
● JSX

Key Concepts

● Type of Components
● React Hooks
● Pure Components
● Props
● State
○ Local State
○ Context
○ State Management Library
■ React Hooks (useReducer & useState)
■ Redux
● Saga, Toolkit, Persist, Logger
■ Mobx
■ Zoostand
■ Xstate
■ Hookstate
■ React Query
■ Local Storage (persisting state in the browser)
● Lifecycle methods
● React Hooks
● Event Handling
● Context API
 ○ Why context API?
○ Creating context using createContext()
○ Using providers and consumers
○ Updating Context

Styling React Components and Elements

● Dynamic Styles
● FlexBox & Layouts
● Tailwind, Material UI, Ant Design
● CSS in JS, Styled Components, Emotion

Responsive & Adaptive UI's

● Making responsive screens

● Managing width dynamically

Learn Component Driven Design and Development

● Storybook
● Chromatic
● Figma
● SVG components

React Best Practices

● State & Props De-Fragmentation

● Redux Folder Naming Convention
● Business Logic placeholder
● Handling errors using try-catch
● Error boundaries
● Suspense & Lazy loading
● Currying function and components

Introduction to Redux

● Redux Architecture
● Fundamentals like Actions & Reducers
● Centralized Store,
 ● Middlewares Introduction
○ Redux Thunk
○ Redux Saga
○ Difference b/w Thunk & Saga

Introduction to React Query

● Query Provider
● Caching
● Error Handling
● Custom Query hooks

Getting Started with React Native

● How, When, What & Why React Native

● Advantages of React Native?

React Native Fundamentals

● Expo vs React Native CLI

● Creating First React Native App
● Running App on Android Emulator
● Running App on IOS Emulator

Environment Set Up

● Android SDK, Java, Homebrew, Cocoa Pods

Additional React Native topics and tooling

● Debugging & tooling

● Boilerplate tools
● Fabric
● Flipper
● Expo
● Ignite CLI
● metro
 ● Big plus if you get to know the basics of Gradle, Java, Kotlin, Swift, and Objective C.

Getting Started with Node

● What is Node.js?
● Basics of Node Development
● User Input Validation

Express.js Framework

● Why Express.js?
● Advantages of Express Framework

API Calls Integration

● Using axios & apisaurce

● Difference between fetch & axios
● Calling REST API using fetch()
● Integrating GraphQL

REST APIs using Express

● Advanced Routes and Models

● Async Requests
● MVC Structure

Database Integration

● Integration with MongoDB using Mongoose

● Integration with SQL using Sequelize
Phase 4 - Accessibility, Testing, Build Tools, and Deployments

Testing Your Apps

Testing involves scanning a piece of software for a potential bug during development or
deployment. Possible things to test in an application includes consistency (breaking changes),
security, functionality, and ease of use amongst others.

What you will use

● Jest,
● Detox
● Cypress,
● React Testing Library (React Native Testing Library)

Other testing tools and frameworks to try out include:

● Mocha
● Chai

Additional Error Handling & Remote Logging

● New Relic, Sentry, AppCenter Crashlytics, Firebase Crash, and Analytics

● Others, usability metrics, Hotjar, Content Square

Package managers, Build tools, and bundling

A package manager is a tool that allows users to install, update, configure, and manage
software packages and product dependencies. Examples of package managers are NPM and
Yarn. It is recommended you learn the basics of one of them. Build tools allow you to use
modern javascript features and syntax that can later be transpiled, minified, and ported to a
much more compatible version of javascript for specific environments or browsers. They add a
layer of tooling for better DX in large projects.
● Parcel, Snowpack, Webpack
● Node JS, NPM, Yarn & PNPM
● Nx, Turporep, Lerna, Yarn workspace
● Babel
● Azure Dev Ops, App Center, CodePush, Pipeline

Accessibility

Web accessibility is the process of making your website usable by all people. It is important
that as a front-end developer, you need to build web pages with accessibility in mind. People
with disabilities, slow networks, visual impairments, and hearing impairments can have access
to all the information on the website without obstructions or difficulties.

Learning Resources

● Learn JavaScript - Freecodecamp

● Web accessibility - Udacity
● Introduction to Web Accessibility - Class Central

Performance

Web performance is all about making websites fast, including making slow processes seem
fast. One of the metrics that a good website/web application should meet is fast page
rendering. For a better user experience, it is recommended that developers adopt different web
optimization techniques. This includes using a Content Delivery Network (CDN) which is a
strategically distributed web server that delivers content to users based on location.
Other methods to adopt include:

● Use cache - the whole idea about cache revolves around temporarily saving data and
web pages to improve page performance. It is advised that developers implement a
cache in the best possible situations to increase site performance and overall user
experience. Cached data can be stored on local storage and retrieved when needed.
● Image compressing tools like imageOptim to reduce image sizes without compromising
their quality.
● Minimize the number of HTTP requests that your application makes.
● Load your CSS and JavaScript files asynchronously. This will prevent the browser from
waiting for any element that takes extra time to load. It will instead proceed to other
elements.
● Remove junk and unwanted codes in your CSS and JavaScript files.
● Optimizing Fonts assets loading on the Web

Some tools and materials for performance metrics

● Lighthouse
● Lighthouse Dev tools
● LoadRunner
● Introducing User Flows for Chrome DevTools & Lighthouse

Learning Resources

● FOUT, FOIT, FOFT, Chris Coyier, CSS Tricks

● Fighting the @font-face FOUT, Paul Irish
● A Comprehensive Guide To Font Loading Strategies, Zach Leatherman
● How to keep your Lighthouse score high in Next.js applications - a checklist - Marcin
Kurka, The Software House
● Improving your Core Web Vitals
● Build a PWA with Next.js to Achieve 100% in Google Lighthouse and Next.js Analytics
- Rocky Li, JavaScript in Plain English
● Achieving a perfect 100% Google Lighthouse audit score with next.js - Kyle Johnson
● 4 Types of Web Cache (And When to Use Them) - Will Morris
● Web Caching Basics: Terminology, HTTP Headers, and Caching Strategies - Justin
Ellingwood, Digital Ocean
● Caching in Web Applications
 ● React Query - Caching Examples - Docs
● Caching made easy with React Query - Daniel Afonso
● Fetch, Cache, and Update Data Effortlessly with React Query - Mehdi Namvar
● Managing Cache with React Query

Deployment

● Azure
● AWS
● Vercel
● Play Store, App Store, Huawei App Gallery

Conclusion

With this knowledge, you will be in a position to build great responsive, real-time web &
mobile applications.

References

● JavaScript Roadmap
● The 2022 React JS Developer RoadMap [Updated] - An illustrated guide to becoming a
React Developer in 2022 with links to relevant courses
● Front-End Development Roadmap For 2022
● https://dev.to/bobfirestone/i-give-up-atwood-s-law-won-7ic
● Front-End Development Roadmap For 2022