Everything React: Tutorials for Beginners and Experts Alike

Released by Facebook in 2013, React has steadily become an industry-standard library for front-end development. Per Stack Overflow's most recent Developer Survey, React sits at the top of the list for both developer's most "loved" and "wanted" web library/framework of 2019. This popularity is largely owed to React's component-based functionality, which allows developers to create dynamic, user-friendly interfaces with reusable elements for single-page applications (SPAs).

In this "Best of DZone" compilation, we're going to break down React by providing articles that introduce the library, compare it to similar frameworks (Angular and Vue.js), and take a look at key concepts, such as components, props, virtual DOM, and state management. Then, we'll present tutorials, beginning with simple, "Hello, World" applications, moving to more technically dense, niche topics, and finishing with a few long-term projects. 

So, whether you're a complete beginner just trying to figure out what the hell a component is, a professional developer starting to work with React, or a seasoned veteran, there's something here for you. Let's get started! 

What Is React?

The Basics

• What Is React by Llaha Hajiyeva provides an overview of the React.js library for creating UIs for web applications and explains why React is one of the most popular options among similar JavaScript libraries/frameworks.

• Similar to the previous piece, Fun With React by Lisa Smith and React.js and Frontend Development by Aditya Modi provides an overview of React and the various components that make it up, such as JSX and virtual DOM. In addition, the former walks us through a few code snippets on each subject in order to move readers from theory to real-world application. 

Pros and Cons of React

• React.js Overview by Alex Azarov and Will React Continue to Dominate? in 2019 by Arnab Roy give readers a solid understanding of the potential pitfalls of working with React, and, at the same time, demonstrate why the framework continues to be a mainstay in frontend developers' toolboxes. 

• 13 Reasons That Suggest React Is Taking the Web Development World by Storm by Sourabh Nagar discusses the features of React, such as its pure functional components and one-way data binding, that have allowed it to rocket in popularity this past year. 

React vs. Angular... and Vue too I Guess 

• Differences Between React and Angular by Uroosa Sehar discusses the differences between React and Angular for front-end development, while React vs. Angular: Which One Suits Your Project Better? by Oleksandra Krykova walks readers through the decision-making process of choosing between the two based on your individual project's needs. 

• React vs. Angular vs. Vue.js by Anton Shaleynikov brings Vue into the conversation for the best JavaScript framework and walks readers through the installation (including CLI) process for React, Angular, and Vue.js.  

• For the coffee addicts in our midst, Hybrid Spring Boot and React or Angular: A Better Way by Eric Murphy provides a tutorial on using either React or Angular on the front-end along with Spring Boot on the backend to create a full-stack web application.
  
  And, just in case that didn't get y'all your fix, we've also provided Spring Boot and React: Happily Ever After by Matt McCandless and Integrating Spring Boot and React With Spring Security: Basic and JWT Authentication by Ranga Rao Karanam for more Spring-Boot-React goodness you might be missing in your Angular-less life. 

• Game of Frameworks by Andrew Stetsenko rounds out our list, as it gives readers insights from experts on all things JavaScript in 2019 (and this writer a sad reminder that, even at work, my lack of HBO means I'm doomed to miss GoT references for at least the next six months). 

React Tutorials

Components and Their Lifecycles 

• In React Component and Lifecycle by Ankit Kumar, provides examples of some of React's most popular components and demonstrates how to implement them in your application. 

• Harika Tirunagiri furthers this conversation by demonstrating how to best work with pure components in React with her article, Pure Components in React. 

• If you've already started to user React's render method, you might have asked yourself, "Can't I just loop through an array of components to render them to the browser?" Well, you're not alone. Unfortunately, render doesn't support the use of a for loop. (Disappoint all around.)
  
  Fear not, MVB Kevin Hooke has you covered in Rendering Arrays of Components With React, as he provides a simple helper method to make your life a little easier.

• In this article, Souradip Panja gives readers a simple explanation of components' lifecycles in React, including key topics like initialization, mounting, updation, and unmounting. 

• Join developer Ajitesh Kumar, as he explains how the map function in JavaScript can be used to move through the DOM and find similar objects representing a component in What Is the React.js this.props.items.map Property?

Traversing the DOM 

• Because the Document Object Model (DOM) has been explored pretty extensively in the "What Is React" section of this piece, here, we'll focus more on working with React's virtual DOM in application.
  
  DOM Manipulation in React will serve as a solid starting point for any developer beginning to work with React. Author, Naveen Kosana, walks readers through basic rules and comparing element types, child elements, and keys. 

What Are Props?

• The three-part series, also by Kristina Grujic, gives readers a low down on all things props, ranging from passing props as booleans and functions, communication between parent and child and same-level/generation props, and type-checking. 

• Similar to Kevin Hooke's piece on rendering arrays of components, developer, Sibeesh Venu, presents readers with a tutorial on iterating through component properties in React's render function. 

State Management

• In State Management in React Apps — Part One, Three Essential Tips for Managing State in React Applications, and React.js Context Tutorial: A Better Way to Store State by Kristina Grujic, Brandon Satrom, and Piyush Arora respectively, readers focus on understanding state management, a foundational concept that every React developer should master.

• In Managing React State With Render Props, developer Jimmy Mintzer walks us through the necessary steps to properly manage states in React using render props.  

• Here, Azat Kumar gives readers an overview of working with states in React and provides a look into his book, "React Quickly." 

Hooked on Hooks

• In React.js Tutorial: Let's "Hook Up" by Mridel Chandel, readers get an entry-level look into the world of React.js hooks, showing various scenarios in which they can be used to create better code.

• In this four-part series, developer, Kent C. Dobbs, focuses on React Hooks and their impact on Render Props, context, and testing in React applications.
  
  The final article, on the other hand, focuses on array destructuring with React Hooks.

JSX (Handling HTML so You Don't Have to)

• Begin with a short, but extremely helpful code snippet in What Is JSX by Rasoul Nayebpour. Then, move to Getting Started With React.js, Babel 7, Webpack 4, and MobX 5 to get a better understanding of how Babel plays a role in interpreting JSX code. 

• React JSX: How to Do it the Right Way, Part I and Part II by Kristina Grujic provides readers with a tutorial on how to perform simple loops and conditionals in React in order to better understand how to render components. 

Higher-Order Components

• How to Use Higher-Order Components in React by Piyush Arora expands on the concepts presented in our first section, as readers get to see a different way of reusing component logic in React. 

React Router

• "One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them." Though React Router isn't quite as powerful as Ash nazg, it certainly will come in handy for your React development.
  
  Follow along with Mat Warger in One Router to Rule Them All: React Router, as he explains everything you need to know about the library.  

React and Redux

• It'd be hard to (try to) make a comprehensive list of tutorials on our site without mentioning Redux. So, without further ado, here are two articles to get you up and running with the state management tool. Aptly named, How to Connect Your React Application With Redux by Dashmeet Kaur, provides an introduction on how to begin working with React and Redux, while Showcase of React + Redux Web Application Development by Jian Li provides a tutorial on creating an application. 

• In this two-part series, Samuel Mendenhall explains best-practices for working with React and Redux that he learned from converting his company's internally facing applications from Angular to React. (We don't envy his struggle; we're just happy it's over, and that we can gain something from it.) Parts one and two can be found here and here respectively. 

• In our final Redux article, Halla Moore gives readers some tips and tricks for structuring a more complex Redux application. 

Working With External Data

• Building Dynamic React Apps With Database Data by Jerod Johnson discusses how to use an API server to create a REST API in order to allow a React application to integrate data from an SQLite database in order to build a dynamic app.

• This article, Consuming REST APIs With React by Sergiy Pylypets, demonstrates how to perform CRUD functions and take in data from a REST API.  

Testing React Apps

• In her two-part series, Alona Pysarenko shows readers how to test React components with Jest and Enzyme. Part one begins with foundational concepts and setup, while part two gives readers the opportunity to begin testing components, HOCs, forms, fields, and widgets.

• Kent C. Dobbs follows the piece up by explaining to those new to testing the importance of isolating components in tests in order to limit variables and ensure functionality in his article, Test Isolation With React.

•  Visually Testing React Components Using the Eyes Storybook SDK by Gil Tayar offers readers insights into testing shared libraries of React components. 

Authentication

• Perhaps some of the most important articles in this collection in terms of practical functionality are Prosper Otemiyiwa's on adding authentication to a React application. In the tutorial, he moves through building the "Chuck Norris [a.k.a. the world's greatest man] Jokes" application in parts one and two and adds authentication with JWTs and Auth() in part three. 

Hello, World!

• If I had to pick a place to start learning React, it'd be here. In this two-part series by Javin Paul, readers get a complete roadmap on beginning to work with React and JavaScript for modern web development, including online courses and tutorials, in-depth reviews of software used in tandem with React, and tips for integration further down the road. Part one and two can be found here and here.

• Hello, World! Get a simple program up and running with React.js for N00bs by Sajith Dilshan, as he walks readers through the theory behind and practical application of essential concepts in React, such as components and their lifecycles, states, and props. 

Moving Forward

• If you're coming from a .NET background, this series, A C# Developer's Guide to React.js by Paul Michael is absolutely for you. The first piece focuses on getting readers started with the framework, while the next two articles focus on allowing users to interact with the application and conditionally rendering HTML.
  
  As a bonus, we've included an additional tutorial (by Ankit Sharma) that focuses on creating a Crud application with ASP.NET Core and React.js, alongside Entity Framework Core.

• In The Functional Side of React by Andrea Chiarelli, readers get insights on functional programming in React and topics ranging from components as functions, unidirectional data flow, higher-order functions, and prop immutability.

• The following two articles by Freddy Montes provide information on how to work with React and a CMS. The first, Using a Headless CMS and React to Build Single Page Apps, focuses on creating an SPA with React and dotCMS, an open source Java CMS. The second, Making Your SPA Content Editable, Anywhere, demonstrates how to best integrate a React application into a dotCMS.

• Getting Started With ReGraph — The Graph Visualization Toolkit for React by Andrew Disney provides readers with a tutorial on how to use ReGraph in order to create network visualizations with React. The tutorial includes information on reducing clutter within a graph and displaying SNA centrality.

• In the tutorial by Kuashal Shah, the developer walks readers through step-by-step, demonstrating how to create a progressive web application and deploy it with Firebase. 

Full-Length Projects and Advanced Topics

• In this four-part series on using Backendless with React, full-stack developer Vladimir Upirov walks us through every stage of the development process, from setting up Backendless, building out a dynamic UI, adding real-time database integration, to finally testing and deploying the application. Parts one, two, three, and four can be found at their respective links.

• In this second full-length tutorial by Paul Michaels, readers get a chance to build a multi-user car game, modeled after Spectrum's Trans Am (which the author describes as "the peak of car game development," and, based on his final product, I'm inclined to believe him). Parts one, two, three, four, and five can be found at their respective numbers. 

• Wiring TypeScript Into React by Gil Fink focuses on integrating the language into your React application with Webpack.

• In this tutorial, Alexander Sokhanych walks readers through using React VR, a framework from Oculus, that allows users to build virtual reality web applications.   

Be a Part of the Conversation!

Think we missed something? Want to contribute? Let us know in the comments below... or, join the conversation by becoming a member of our community of thousands of developers eager to share their knowledge and passion for programming with others.

Further Reading 

• Angular: Everything You Need to Know. 

• React.js Essentials.