Introduction to React in 2021

What is React?

From React's website: "[React is a] JavaScript library for building user interfaces". Notice that it does not indicate that it is just "web user interfaces". The nice thing about React is that even though it is primarily intended and well-suited for web development, it is not limited to this. Once you become accustomed to React development, you can extend much of this experience to things like React Native (mobile) or Electron (desktop) without too much difficulty or a learning curve.

That said, for this post, we will be talking specifically about React as it pertains to web development.

Why React?

The pros and cons of React vs. other frameworks have been beaten to death many times over. With most of the major frameworks such as React, Angular, Vue, etc. each one has an advantage over the other in some way. With most mature frameworks, the primary reason for or against a particular web framework comes down to personal preference and what your future intent is. You are likely reading this because you have already chosen to use React in some capacity, and are looking for a starting point.

If you need justification in choosing React over another framework, simply start using it! React has been around since 2013, is well supported by the community, and performs adequately with a relatively small footprint. The reason for using React should ultimately be, "do you like it?" and "does it provide for your needs?"

Getting Started BEFORE Getting Started

Before actually getting started in React, you should be reasonably familiar with the following...

1. HTML
2. The DOM
3. JavaScript
4. RESTful Services
5. jQuery (nice to have)

It is important to know how the web works before you start programming for it! React is just another tool on your tool belt. While it can "hide" a lot of things such as DOM manipulation, eventually you need to understand how things are working "underneath". React can help you with a lot of things, but especially for more complex projects, being familiar with frameworks such as jQuery can be invaluable for those cases where you're trying to do something that React doesn't let you do.

Resources for Getting Started

Where Do I Start?

If you have never used React or a similar declarative framework, a natural start would be React's own Getting Started page. Their documentation is very good, and their installation and tutorials are definitely the places to start. That said, once you get comfortable with the basics of React apps, components, and state management, then it is a good idea to jump directly to Hooks. Hooks are essentially classless components and in general, can be used as a replacement to the more traditional class-style development of React apps and components. Developing in React using the Hooks pattern is the future of React and provides a much simpler and less complex way of coding than sticking with classes.

Unit Testing

WARNING: Don't get too carried away before you start thinking seriously about unit testing!

Once you have gone through React's own tutorials, you need to start thinking, learning, and doing unit testing. React provides a starting point to this. Consider taking the time up-front to understand how to unit test React applications. If you do not do this, it is extremely easy to code yourself into a corner and write your components in such a way that they become very difficult to test. A good understanding of unit testing and actually IMPLEMENTING unit tests along the way will force you to keep your components following best practices.

Other Resources

If you like doing more than reading, React also has a nice tutorial page. This site is intended to guide you through developing a sample application from start to finish. Even better, it uses Hooks exclusively!

FreeCodeCamp.org also provides a video tutorial for those that learn better by watching. It's a bit lengthy, clocking in at just over five hours, but if you learn best this way, it is a solid tutorial that has almost 2.5 million views.