How I learned React and how you can too

What is this React you speak of? If you’re reading this article I assume you’ve heard of React and have a basic understanding of what it is.

React is a JavaScript library created by Facebook for building user interfaces.

Getting Started

Thanks to Create-React-App you now have two options to learning React without first learning Webpack. After you complete the Codepen challenges below, use the Create-React-App build utility for your future React app’s.

Seriously, it creates and configures everything for you so you can start writing React code immediately.

The title of this article is How I Learned React and how you can too… so it’s only fair I tell you how. Whenever I learn something new in programming, the logical place to start is with the docs. I, like most programmers, have a short attention span when it comes to reading and quickly get bored of reading the docs. Luckily, React’s documentation is really good.

Try to make it as far as you can through React’s Documentation Tutorial. Once you’re bored, move on. You will revisit these docs when you start coding React apps.

Ermahgerd it look’s like React relies heavily on ES2015 syntax?! I wanted you to see this for yourself. Take the time to learn the basics of ES2015 before learning React. Learn.co has a great intro here.

It’s very important when building React applications to “Think in React.”

Take the time to identify reusable components, stateful and stateless components. Thinking in React does a great job of teaching you how to accomplish this task. Components, props, state, render, blah blah blah you’ll understand all this React speak after you start coding.

Ok, you’re tired of reading and want to code? Fire up a new Pen in Codepen.

Below are 5 challenges I did to learn React. If you complete all 5 challenges, you’re more than ready to begin working on larger React projects…sort of…

Enable the Babel preprocessor and make sure to add React and React-DOM using the Quick Add dropdown menu under the Add External JavaScript section. Save and close.

Since this isn’t a tutorial, no more spoon feeding. As you’re coding, use the documentation to discover how to do EVERYTHING. Try not to use Google, you need to understand the code you’re writing while you’re writing it.

The docs have you feeling down? Don’t quite feel ready to start coding?

A great tutorial I used to compliment my learning of React is React.js Fundamentals by Tyler McGinnis.

Challenges

Challenge #1 — Hello World

Create a React app in Codepen that outputs Hello World to the screen. I’ve created a Pen in Codepen for each challenge. Do not look at the code unless you’ve exhausted all of your resources first!

My example React Hello World pen.

Challenge #2 — Hello Visitor

This app takes the input from the text input field and outputs your input in realtime to the screen. The input should be your name, because it’s cool seeing your name on a page. This is likely the first time you’ll see how cool React really is.

Again, use the React Doc’s to figure this out without peeking at my code. Only look at my code if you’re stumped and have exhausted all of your resources.

I used Bootstrap to style the app. This is optional, but this would be an ideal time to Learn Bootstrap in React!

My example Hello Visitor pen.

Challenge #3 — Fizz Buzz

Everyone's favorite junior developer interview question.

“Can you build FizzBuzz? Show me!”

Don’t get frustrated, this is quite a bit more challenging. You’ll need to create increment and decrement buttons. Each should be their own helper method which updates the state of the app. Yes, that was a clue.

My example Fizz Buzz pen, don’t cheat!

Challenge #4 — Markdown Previewer

The last 2 challenges can be found over at freeCodeCamp. You can continue to use Codepen, but I would fire up Create-React-App and maintain the rest of your projects on Github.

Here is the link to the freeCodeCamp challenge. Build a Markdown Previewer.

Pro-tip: Use Marked to parse the Markdown text.

Challenge #5 — Camper Leaderboard

For the final challenge you will build a Leaderboard app. You will need to access the Leaderboard data using the provided endpoints. You will need to grab data for pretty much every React app you build so this one is important.

Here is the link to the freeCodeCamp challenge. Build a Camper Leaderboard.

Pro-tip: Use Axios to perform your GET requests to access the Leaderboard data. Congrats! If you’ve made it to the part in the article you’ve hopefully completed all 5 React challenges. If you didn’t keep at it, this could take you a week or so.

Earlier in this post I mentioned you’re “sort of” ready to work on larger React projects. Larger React projects will likely require routing and global state.

You will want to learn React-Router to handle your apps routing. If your app needs Global State and is moderately complex you’ll want to learn Redux.

Don’t make your app more complex if it doesn’t need to be. Use Redux as needed!

Thanks for reading!!