Junior React Developer to Full Stack Engineer (React + Webpack + Node)

Primary reading and studying material

Introduction to development with React to build modern web applications.

Pre-requisites for building for the Web:

• HTML - The what exists on a website. All the components' structure in markup language. For example, an image component: <img src="cat.jpg">
• CSS - The how it's styled. The design language for HTML elements. "Give this image component a width of 100%" <img style="width:100%" src="cat.jpg">
• JavaScript - The programming language to control any HTML element.

That Weird JavaScript Course - Big fan of fireship.io (the two resources above are from his YouTube channel). Jeff is a great engineer and an incredible instructor. This course gives a fun intro to JS and hints at the possibilities.

React - Most influencial JavaScript framework for User Interfaces. There are so many good resources for React. Key concepts that you'll use daily:

• JSX - writing React elements, a bit like HTML with JS
• Components and props - A function that accepts props(=input/parameter) and returns a React element.
• State
• Events - Handling events like clicks, passing arguments to event handlers and so on.
• Lists - Using map to render multiple components. The importance of a key, what does it mean, why is it important for it to be unique and how does it help with performance (hint: rerendering)

Secondary reading and studying material

Throughout the jounrey it'll be useful to be familier with a few tools and technologies. These will be the present at any future development project you encounter. At this stage, just knowing about them is enough:

• Git → recommended resource
• Docker → recommended resource

Module bundlers: The intro of the next video says the biggest truth: Web development is not just HTML JS and CSS in 2021. There is so much going on and module bundlers make our life easier. The first link is the documentation for Webpack: our module bundler and the most popular module bundler in the world. The second link is the introduction to the node package manager npm, the package.json where our applications libraries and other scaffolding information is found and webpack itself.

• Webpack → recommended resource

Extras

Look at these last:

Typescript (with React) - TypeScript strongly typed superset of JavaScript. We have to write a bit more code but it helps catch bugs early on, and helps developers write code easier and faster with tooling like intellisense, autocomplete and autodocs. It's a preference. We currently do not use TypeScript but it's a good idea to start using it.