React: From Zero To Hero
A compilation of guides
Hello, dear reader! I’m so glad that you’re interested in learning how to develop with React. This process is often long and confusing. The aim of this article is to make this process as fun and straightforward as possible. As we all like to work in a lean way, this article will be a blend of links to already existing high-quality guides for you to follow.
You will learn (and re-learn) JavaScript & React development all the way from the basics to more advanced concepts. This guide is estimated to take about two-three weeks in total. When you go through this guide, take your time and try to digest the content. I suggest that you take your time and google it or ask around if something is unclear, but be aware not to overdo it. Try to conserve your resources a bit. Of course, if you find some other material that you prefer, use that instead (or as a complement). As long as you learn what is proposed in this article you’re fine. Oh, and have fun!
Let’s go down the rabbit hole!
Prerequisites
One of the foundations of any good React developer is to be comfortable in HTML/CSS/JS. I won’t provide an SCSS/SASS/Layout guide here though, learn/re-learn as you go.
But before going into React, let’s take a look at our JavaScript knowledge. Look at the description of the video below. If there are topics in the timestamp that you are unsure of, follow along in the video before you proceed. Be sure to code along to really get that muscle memory into it. For this, you can use the terminal in your web-browser. Good luck!
React developer environment
It’s important to decorate your development environment in a way that makes it easier and more fun to develop.
The most popular code editor to use is VSCode and that’s the one we’ll use. Some good extensions to VSCode:
- Auto Close Tag
- Auto Rename Tag
- Bracket Pair Colorizer
- GitLens — Git supercharged
- npm Intellisense
- ES7 React/Redux/GraphQL/React-Native Snippets Extension
- Prettier (configure this as shown in the video below)
- Babel ES6/ES7
A tip is to use the built-in terminal in VSCode. It’s nice as the path of the terminal already is in the folder you are in. Some nice quick commands:
Mac
- Open terminal: ctrl + shift + `
- Quickly find a component or file in the editor: cmd + p
- Show/hide the left side-bar: cmd + b
- Search anything in the project: cmd + shift + f
PC
- Open terminal: Ctrl + shift + ö
- Quickly find a component or file in the editor: Ctrl+ p
- Show/hide the left side-bar: Ctrl+ b
- Search anything in the project: Ctrl + shift + f
Coding time!
You will develop a few apps that will increase in complexity, finishing off with a full-stack application that you will host online.
#1: Laying a solid foundation
The second video goes over the basics of React and will provide a good foundation for you. You’ll learn the what, why and how’s of React development.
You’ll learn:
- Single Page Application (SPA)
- Single component state handling
- Project setup
Note: In the video, he declares components with the .jsx ending instead of .js which is more common. It does not matter. He also ends lines with “;”. It is common to skip that as the build automatically adds that when compiling the files.
#2: Multiple states
By this time you know how to set up a workstation and how to initialize a project. You also know single state handling, and you be able to develop a single page application. Now you’ll learn Redux. It will take some time before you’ll really internalize how Redux works but this is normal. A tip is to have a pen and paper ready to draw out the structures, it’ll make it a lot easier to internalize.
You’ll learn:
- Multiple state handling using redux
#3: Routing
Once you’ve mastered how to initialize and modify the internal state of components its time to create a multiple page application where you will be able to navigate around several different pages.
You’ll learn:
- Multiple Page Application (MPA)
- Navigation / Routing
#4: Fullstack application
Once you know state-handling and navigation it’s time for an important step which is to load these component states with data from servers.
You’ll learn:
- Backend using node + Express
- Create, Read, Update and Delete (CRUD)
#5: Hosting
Your application is not so valuable if no one has access to it. That’s why you now will host your application online. There are many different ways of hosting applications including Firebase, AWS, Heroku, GitHub-pages and more. The easiest I know of is Netlify.
You’ll learn:
- Hosting using Netlify
#6: Further learning
These are things you’ll learn along the road so don’t sweat it if it feels overwhelming.
Function components
One new feature in React (v16.8) is to use Hooks instead of stateful components. A more resource-effective way of building components is to just use pure functions.
So you use a function as a component
const TodoList = () => <div>Hello!</div>instead of
class TodoList extends React.Component { render() {
return (<div>Hello!</div>)
}
}
What, why, and how is described in the link below.