How to Get Started Learning ReactJS for 2019
It’s nearly the end of 2018, and you think you might finally be ready to get started learning ReactJS. You hear the hype and you know it’s become the most popular front end JavaScript framework. You sit down at your computer, crack your knuckles, and are ready to give it a go. Starting off, you probably jump straight in with Facebook’s official React tutorial. After that maybe another tutorial on medium. You do some reading here and there, and if you are like me, you end up pretty confused. You hear terms like “props”, “state”, “virtual dom”, “ES6”, “babel”, “webpack”, “higher-order components”, “Redux”, and much more. Soon you realize that learning React is not as easy as you once imagined and either quit or confusedly persevere on.
Does this sound like you? Because this is exactly how I felt when I started learning React. All I wanted to do was set up a simple React app, and I was getting very confused and sometimes frustrated. I thought React had a fairly difficult learning curve, and I was feeling pretty overwhelmed.
I soon realized that React was fairly easy to learn, but the way I went about learning it was difficult. The problem was I didn’t know how to learn it. Firstly, I was relatively new to the world of front end development and I didn’t know what I was doing. I was somewhat familiar with HTML and only used JavaScript a few times. That certainly did not help. There were technologies and information that I should have spent a little more time learning prior to React, that would have lowered the learning curve tremendously.
This is what I would have liked to have known before I began writing a single line of React code:
Prerequisites
First, let’s nail out the basics. Before you start diving into React, you should probably have at least a little experience with each of the following:
- HTML
- CSS
- ES6 JavaScript
- NodeJS + NPM
If you are familiar with each of the above, then learning React is going to be a lot easier for you. React is big on JavaScript and HTML. You’re going to need to be pretty familiar with both of these. CSS, NodeJS, and NPM aren’t hard requirements, but it will help if you know a little about each of them. If you aren’t familiar with these, do some reading, a few tutorials, and look over some sample code.
Many of the React tutorials and examples you are going to see will contain ES6 javascript specifically. If you aren’t familiar with ES6 you are going to be pretty confused when you see something like: const helloWorldFunc = () => console.log('Hello world');
If you don’t feel confident in any of the above, you won’t feel confident with React. If you have at least a little bit of experience with each of these, React‘s learning curve will decrease dramatically.
Think like a library
React is a library, not a framework (even though I called it a framework earlier). This might seem like a moot point, but this is one of the reasons I think some people initially have trouble with React. If you are familiar with Angular or even Ruby on Rails, you know how many tools they give you right out of the box. Frameworks hold your hand and tell you the “right” way to do things. They give you opinionated tools like routing, authentication, templating, http tools, and more.
React is not as opinionated. React is pretty much just a library that aims to remove the separation of concerns between HTML and JavaScript. React allows you to write UI components that transpile down into raw HTML and JavaScript. That’s really about all you get with React itself. Because of its flexible design, you are picking and choosing what additional libraries to use with React. If you think about React like a library, rather than a one-stop-fix-all framework, it’s going to make learning it a lot easier.
Understand the big 4
React has 4 big ideas that are key to getting started learning with React.
1 — Components
React apps have component based architectures. Picture an article on a generic blog. What’s on it? Probably a title, an author’s name, the date published, some text, some photos, like buttons, share buttons, etc. If you were building this blog in React, each of these would most likely be a component.
If you create a component for a share button, you can reuse that component to build other share buttons, or reuse it across multiple different kinds of articles. This is the idea with React. You are building components that then can be used and reused to build bigger components.
2 — State
Many React components will be stateful components. State is exactly what it sounds like. It’s the internal state of your component. Think of a checkbox on a web page. It can either be checked or unchecked. When the user clicks on the checkbox, it will check the box if it is unchecked, and when the user clicks it again it will uncheck the box. The checkbox is an example of a stateful component. In this example, the internal state of the checkbox would be a boolean that would either be checked true or checked false.
While many components have state, some are stateless. Just because lots of components have state doesn’t mean that every component needs to be stateful. Sometimes it makes sense to omit state from a component. Think of an image html tag.
<img src=”smiley.gif” alt=”Smiley face” height=”42" width=”42">
If this image tag would be an example of a stateless component. You are passing in parameters, but the image tag itself does not have an internal state that it needs to manage itself.
3 — Props
Props is short for properties. Properties are how you pass information unidirectionally from parent to child components. I like to think of them as property attributes or parameters, since it is conceptually similar to passing arguments into a function, and syntactically similar to HTML attributes. Look at the image example used previously. If this were a React component, the props would be what you are passing in as “src”, “alt”, “height”, and “width”. You can also pass in callback functions for the child to execute such as “onClick”.
4 — React lifecycle
React is much easier to understand if you have a basic idea behind the React component lifecycle. The React lifecycle describes when and how a component should mount, render, update, and unmount in the DOM. React has lifecycle hooks (React component methods) that help you manage state, props, and work with the lifecycle flow. Understanding React’s workflow is essential to becoming a strong React developer. You can read more about React’s lifecycle here.
Again, these are only the basics to get started. React is a powerful library and this is only scratching the surface.
Use Create-React-App for easily setting up new React web projects
If you are starting a new React project, then say hello to create-react-app. This little tool (written and managed by Facebook) will help setup a new React project for you. All you do is install the command line tool and with a single command, it will scaffold out a basic React project for you.
Some tutorials will have you to set up a new React app manually by installing several dependencies like “babel” and then configuring something called Webpack yourself; ignore these. Learning React should be your focus, not configuring a React app and managing Webpack. Create-react-app abstracts the installation away from you, and lets the developers at Facebook manage your Webpack configuration and React dependencies. Thank you Facebook!
(If you are creating a react native project, there is also a tool for setting one up as well https://facebook.github.io/react-native/docs/getting-started.html)
Treat Redux like a black diamond ski run
Imagine this:
It’s your first day at React ski camp. You’re excited for a couple initial ski lessons to get you started, and then you’re ready to go off on your own. First you hit the bunny hill a few times, and then try your luck on a green run. You fall here and there, but it’s ok because you’re learning and making progress. You’re making your way down the green (easy) hill when you see a trail on your left. The trail has a marker that reads “Redux” with a black diamond next to it’s name. Do you take the trail?
If you answered yes, you are just asking for a broken leg. Black diamond ski runs are steep, contain rocks and ledges, and are meant for proficient skiiers. While this is a somewhat exaggerated analogy, the point is you should initially ignore anything you see that even contains the word “Redux”. No developer should even think about learning Redux until they are fairly fluent with React. Redux is probably the scariest thing in the world of React. It has a pretty steep learning curve and I have known several people who quit React once they hit the wall of Redux.
If you are wondering what Redux is, it’s essentially a state management and storage library that helps you maintain a consistent and predictable state for scaling vertically. Sounds confusing, because it is confusing. The number one reason I see people reach for Redux is to manage the global state of their application. Before you reach for Redux to solve your state management, make sure you check out React’s Context API and see if this solves your problem.
For quite some time, React did not have a good solution to container state management. React did not offer a good solution to pass props or state between two distant components, other than passing it through every component in between. It was a headache to manage global state. Many people jumped on the Redux train (or MobX), and they found the solution to state management they were looking for. React realized that this should not be the sole reason people reach for Redux, and in React v.16.3, they released their official Context API.
Now that there is a React provided solution for global state management, I think fewer people will quickly reach for Redux.
Even though I predict Redux’s usage in new React apps will eventually begin to decline, there are still many companies and webapps using Redux today and continue to do so for the foreseeable future. It has it’s place in the React ecosystem, but is not the best solution for passing state down through your component tree. If you want to learn it at some point it may be beneficial for you, but I would certainly not start without having a firm grip on React. If you are not skiing the React slopes with comfort, certainly don’t start with Redux.
Start diving into React tutorials
Once you feel like you have a basic understanding of React and feel confident with its prerequisites, Facebook has a great tutorial to help you get started learning React. They also have some great documentation on React as well.
https://reactjs.org/tutorial/tutorial.html
React should be fun and easy to learn. It’s a popular library and is well known for having a small initial learning curve. The problem is that sometimes there is so much information out there, it becomes difficult to figure out where and how to start. The world of front end development moves fast, and something that was relevant a year ago, may no longer be used in new development. ReactJS is a quickly evolving library with a fast growing community. Sometimes it helps to just have a little guidance when picking up something new.
Hopefully this quick overview helps you ease into the world of React and provides a bit of guidance for your initial journey. Happy learning!
Follow me on Github: https://github.com/BenBrewerBowman
Connect with me on Linkedin: https://www.linkedin.com/feed/
