Modern React Tutorial for Beginners: How to Create Your First React App Online Training

This entry-level Modern React Tutorial for Beginners: How to Create Your First React App training prepares software developers to code in React well enough that you can develop a simple web application ready for deployment.

Generally speaking, it's usually not a bad idea to follow Facebook's lead when it comes to internet trends. Especially when it comes to developing interfaces and writing web applications, you could do worse than follow the example of the internet company that has a billion users. What that means if you're into web application development is you should learn React and get used to developing in it. This React tutorial is a course specially designed for beginners to the JavaScript library and by the end of it, you'll write an entire application on your own..

After completing this open source training you'll know how to code in React well enough that you can develop a simple web application ready for deployment.

For anyone who manages their open source training, this open source training can be used to onboard new software developers, curated into individual or team training plans, or as a open source reference resource.

Modern React Tutorial for Beginners: How to Create Your First React App: What You Need to Know

For any software developer looking to improve their proficiency with JavaScript best practices, this open source course covers topics such as:

Designing, creating, and reusing React components
Understanding React routing
Refactoring React applications
Creating reusable forms in React

Who Should Take Modern React Tutorial for Beginners: How to Create Your First React App Training?

This Modern React Tutorial for Beginners: How to Create Your First React App training is considered foundational-level open source training, which means it was designed for software developers. This programming skills course is valuable for new IT professionals with at least a year of experience with JavaScript best practices and experienced software developers looking to validate their open source skills.

New or aspiring software developers. If you're hoping to eventually start working as a software developer, you should take this React tutorial as a way to dip your toes in the React waters. You don't have to know React backward and forward to be a successful software developer, but after this course, you'll know it well enough to choose it in the future when it's the right tool for the job.

Experienced software developers. If you've been working as a software developer for about five years and you haven't learned React yet, you should really take this React tutorial as soon as possible. You may be overlooking potential improvements to your development and apps if you don't know anything about React. Fortunately, this React tutorial course is quick and easy.

Skill:
Basic React Concepts & Syntax
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Benefits of React
  10 mins
- 4. Create and Run a React App
  5 mins
- 5. React Project Structure
  8 mins
- 6. Basics of JSX
  11 mins
- 7. Inserting Variables Into JSX
  9 mins
- 8. Creating and Rendering Components
  9 mins
- 9. Conclusion
  1 min
Skill:
Create and Reuse React Components
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Importing and Exporting Components
  5 mins
- 4. Basic Component Styling
  16 mins
- 5. React Fragments
  12 mins
- 6. Introduction to Component Props
  13 mins
- 7. Reusable Components
  10 mins
- 8. Conclusion
  1 min
Skill:
Type-Checking and Event-Handling in React
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. PropTypes
  14 mins
- 4. Basic Event Handling
  9 mins
- 5. Scoping Styles with CSS Modules
  9 mins
- 6. Creating more reusable components
  16 mins
- 7. React Dev-tools
  7 mins
- 8. Conclusion
  1 min
Skill:
Introduction to Component State
- 1. Overview
  1 min
- 2. Introduction
  2 mins
- 3. How to Add State to Components
  9 mins
- 4. How NOT to Add State to Components
  4 mins
- 5. Showing and Hiding Components
  9 mins
- 6. Sharing State Between Components
  8 mins
- 7. Passing Functions as Props
  12 mins
- 8. Conclusion
  1 min
Skill:
Lists and Component Reusability
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Displaying Lists
  13 mins
- 4. Breaking up Large Components
  15 mins
- 5. Creating a Tag Component
  8 mins
- 6. Persisting State in LocalStorage
  12 mins
- 7. Other State Persistence Options
  7 mins
- 8. Conclusion
  1 min
Skill:
Introduction to React Routing
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Basic Routing with React-Router-Dom
  19 mins
- 4. Creating a Navigation Bar
  14 mins
- 5. Implementing Page Components
  10 mins
- 6. Navigating Programmatically
  7 mins
- 7. Conclusion
  1 min
Skill:
Refactor React Applications
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Adding Multiple Function Props
  8 mins
- 4. Increasing Component Reusability
  7 mins
- 5. Passing Props to Pages
  12 mins
- 6. Increasing Component Reusability (Again)
  5 mins
- 7. Adding PropTypes to Pages
  8 mins
- 8. Keeping Hidden Elements Hidden
  7 mins
- 9. Conclusion
  1 min
Skill:
Introduction to React Context
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Basics of Context
  7 mins
- 4. Creating and Accessing Context
  11 mins
- 5. Passing Functions through Context
  5 mins
- 6. Encapsulating Logic in a Provider Component
  8 mins
- 7. How Forms work in React
  14 mins
- 8. Conclusion
  1 min
Skill:
React Form Basics
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Creating Two-Way Form Bindings
  12 mins
- 4. Switching from Static to Dynamic Data with Context
  10 mins
- 5. Connecting Forms with Context
  11 mins
- 6. Persisting Context State
  7 mins
- 7. Conclusion
  1 min
Skill:
Reusable Forms in React
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. How to Make Forms Reusable
  11 mins
- 4. Pre-Populating Forms with Data
  10 mins
- 5. Passing Multiple Actions to Components
  8 mins
- 6. Methods For Editing Data
  9 mins
- 7. Conclusion
  1 min
Skill:
How React Rerendering Works
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. React's Rendering Process
  3 mins
- 4. Rerendering Rule #1
  8 mins
- 5. Rerendering Rule #2
  3 mins
- 6. Rerendering Rule #3
  6 mins
- 7. Preventing Rerendering with Memoization
  10 mins
- 8. Rerendering Rule #4
  3 mins
- 9. Rerendering Lists
  15 mins
- 10. Conclusion
  1 min
Skill:
React Inner Workings
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Component Lifecycle Basics
  19 mins
- 4. JSX Behind the Scenes
  18 mins
- 5. JSX and Cross-Site Scripting
  6 mins
- 6. Conclusion
  1 min

Loading transcripts...

Overview

Access all premium content with a free week!

Start a free week

Explore Features

Course overview

11 HOURS OF TRAINING

12 SKILLS

77 VIDEOS

0 VIRTUAL LABS

0 PRACTICE EXAMS

Shaun Wassell

Nugget trainer since 2021

Read the full bio

What is it like to train with us?

Our learners say it best.

Helps me learn the skills I need when I need them

THOMAS S. | SYSTEMS ENGINEER & CONSULTANT

Read Reviews

Modern React Tutorial for Beginners FAQs: Cost, Training, Value

What is React and what is it used for?

React is what's known as a JavaScript library, which is like a toolbelt full of pre-built functionality and components. Application developers and web developers can use React to build with JavaScript more quickly and efficiently. React is especially good at helping build interactive and dynamic UIs. Something that makes React distinct is that it updates and renders the pieces of a UI when data changes, which makes for a smoother user experience.

What should you know before beginning a React course?

This React tutorial was made for beginners, but not necessarily people who have never written a single line of code. Before you get started with React, you should know your way around HTML, CSS and JavaScript – you don't have to be an expert, but you should understand them and what they accomplish. Certain ES6 features like arrow functions and classes will also be important for understanding how React interacts with JavaScript.

Who is this React tutorial good for?

Web developers and application developers are the best candidates for React. If you're already comfortable with HTML, CSS and JavaScript, and especially if you use them on a regular basis, learning React is a natural next step. Front-end developers who have to build, maintain and design interesting and interactive user interfaces will get a lot out of this React tutorial. Even learning the basics of React can lead to promotions and hireability.

Is it possible to master React in 3 months or less?

React is more than a UI-maker, it's a robust and versatile library, and its learning curve is pretty substantial. While you can definitely become proficient with React in under three months, unless you're extremely focused and able to spend tons of time each week on it, it's unlikely that you'll master React in under three months. What produces mastery is putting the fundamentals of React to use in real-world settings.

Do you have to know JavaScript to learn React?

Yes, it's important that you have at least a foundational understanding of JavaScript before getting into React. The more JavaScript you know before jumping into React, the better. React is a JavaScript library, and so familiarity with using variables, managing functions, and implementing control flow is necessary. Without a grasp of ES6 and basic ES6 features, the component-based architecture and state management of React will be challenging.

Related Courses

Learn React

Full-Stack React Development

Learn JavaScript Essentials

What is it like to train with us?

Our learners say it best.

Modern React Tutorial for Beginners FAQs: Cost, Training, Value

Let's chat!