The $20 React Dev

No-Nonsense Learning Guide for React On the Cheap

According to Stack Overflow, React is the most loved technology that developers use today. There's also huge demand for React developers around the world.

This syllabus is meant to take you, the motivated learner, from little-to-no experience Javascript coder to a proficient React developer.

By the end of this syllabus you will not be a master. But you'll be good enough to build apps and, most importantly, to make real contributions to a front-end development team. If you work hard, you can continue your education on the job as a professional React dev.

Almost all of the materials used in this course are free. There is one paid course, which brings the total cost of learning to: $20.

This guide approaches learning to program like learning a language, where knowledge grows through chunking. Chunking means you master small pieces until they're second nature. Then you can combine those pieces into more complex designs.

It focuses entirely on React.

You will:

• Learn your nouns and verbs: Javascript Fundamentals and Syntax
• Learn how to write sentences with your verbs and nouns: 'Toy apps' in JS
• Learn how to write in a specialized way, like the first time you wrote a short story or essay: Following a tutorial to make a React app
• Learn how to communicate on your own, without training wheels: Building apps from scratch

Set up

You'll need to:

1. Install a text editor (I recommend Atom or VSCode)
2. Set up your Github account
3. Install Node/NPM using Homebrew

Step 1: Javascript Foundations

• FreeCodeCamp
  • All HTML5 & CSS3
  • jQuery (Remember, jQuery is just a library made from Javascript!)
  • Basic Javascript (All)
  • Object Oriented and Functional Programming (All)
  • Basic Algorithm Scripting (All)
  • Save Your Code Revisions Forever with Git (All)

Git is a version control system (VCS) that you manage changes to your code. It's the cornerstone of collaboration between software developers! You MUST know it.

Step 2: Building Stuff in Plain Javascript

The best way to get the fundamentals under your fingers is to build many small projects.

• Do the 30 Days of Javascript challenge. Save all your projects to a git repo on your Github!

Remember, when you get stuck Google the error.

Step 3: Get Ready for Modern JS Apps:

Watch FreeCodeCamp sections: The DOM, Javascript Lingo, Chrome Developer Tools

Developer Tools (also available in Safari and Firefox) are super important! You'll use them every day.

Get Comfortable with ES6

• Do Count-To-6 Workshopper on Nodeschool
• Feel comfortable solving the following ES6Katas
  • Destructuring (Array, Object)
  • String.includes()
  • Template Strings (basic, multiline)
  • Arrow functions (all)
  • Block scope (all)
  • Class (creation, extends)

What does ES6 mean?

In 2015, Javascript was upgraded with new features and syntax. This upgrade is called ES6 (ECMAScript6). Many new features don't do anything different from the Javascript that you're familiar with. But they look different and ES6 often simpler and more elegant to write. Tons of modern libraries like React use ES6, so to understand them you'll need to know it.

Step 4: React Overview

Read these topics from Quickstart in the React Docs:

• Introducing JSX
• Rendering Elements
• Components and Props
• State and Lifecycle (super important!)
• Handling Events
• Composition vs Inheritance
• Thinking In React

You will not understand everything. That's OK! The point is to expose your mind to some of the common concepts and phrases in React. Just move on after you've read these short articles.

Step 5: React

Do React Fundamentals

It costs $20, but is worth it.

Throughout this course, think about how React organizes interfaces as components that act like reusable LEGO blocks

Step 5: Make With React

Now you'll repeat the patterns you learned in React Fundamentals by making two more apps.

• Follow the instructions to use create-react-app as your boilerplate to make 2 small apps using React. You can also start from scratch, like you did in the React Fundamentals course, if you prefer.

Don't be fussy about making these apps beautiful or elaborate. The point is to start from an empty app and work through the process of defining your UI, breaking it down into components, and building those components. If you need help thinking through this process, check out Thinking in React from the React Docs or the Thinking In React workshopper from Nodeschool.

Remember, this is about repetition, not perfection. Keep building and, as you repeat the core patterns of Javascript and React, you will master them.

Remember, when you get stuck Google the error.

Step 6: React with Redux

As your React application becomes more complex, it gets harder to manage the state and data flow in your components. Redux puts your app's state in one place and makes it incredibly easy to make sure your components react to changes correctly!

• Do Getting Started with Redux

Step 7: React/Redux Challenge

You're ready to fly!

Make 3-5 small apps using React, Redux, and any other browser APIs that you'd like to use.

I recommend picking a browser API and idea that you can get excited about. This will keep you motivated as you work through each app.

• Some possible browser APIs to explore in a React App from the 30 day challenge:
  • HTML5 Canvas
  • SVG
  • Web Audio
  • Geolocation API
  • CSS animation
  • Video/Webcam
  • Maps
• You may use create-react-app to scaffold your app, or configure your own React project

Remember: Focus on making your apps modular, with small, focused components that you can re-use throughout the layout.

Step 8: Congratulations

Make a portfolio site to show off your work. You should make your site with... yep, you guessed it ... React!

Launch it on Github Pages for free!

Random Questions from People

What is Markdown?

Markdown is a markup language that makes writing HTML even simpler than it already is. For example, to make something a headline, you just put a # in front of it. It will automatically be rendered a headline.

Why did you write this?

I originally wrote this for my girlfriend, who wanted to learn front-end development. Here's why:

When I first learned to code, I spent way too much time trying to figure out the right path. It's easy to get distracted with 'what language should I learn'? Most people just need to get good enough to get hired as a junior developer so they can continue their education on the job.

1. There are too many resources for learning online. Many are bad quality and a few are stellar. I included the absolute best resource for each step that I could find.
2. Most resources do not focus on the spaced repetition that's necessary to internalize the patterns from Javascript and React. This does.
3. I believe the fastest way to go from no-experience to employed as a developer is to laser-focus on React. The demand for React devs is huge. Since this guide focuses entirely on the front-end, you can avoid the months of learning that it takes to understand tools like AWS, databasing, API design and servers etc. etc.

What's the difference between libraries and packages?

They are often used interchangeably. A package is just a library of functionality, meaning that someone has brought together a lot of different functions into one place.

Packages take the form of frameworks and libraries. For me, a framework imposes structure on your code. A library is more like a collection of functions that you use as you need them. A framework is a commitment to organizing your code and functionality in a particular way.

For example, React is a framework (it imposes structure and organizes your code in a very specific way). But Lodash is a library.

You download and install packages using a tool like npm and you can then import that package. That package might be a framework or it might be a library.