Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Everything React: Tutorials for Beginners and Experts Alike

DZone 's Guide to

Everything React: Tutorials for Beginners and Experts Alike

React quickly — your one-stop-shop for all things React.

· Web Dev Zone ·
Free Resource

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 vs. Angular... and Vue too I Guess 

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?

State Management

Hooked on Hooks

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

Higher-Order Components

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

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

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 

Topics:
web dev ,props ,state management ,hook ,angular ,vue ,frontend developer ,tutorials

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}