Generic filters
Search in title

Introduction to React with JavaScript Training

  • Training Duration:
  • 3 Days
  • Training Environment:
  • On-site at the Institution
  • In DVA Classrooms
  • Online
Download Training Document
Request Information!

About the Training

Introduction to React with JavaScript Training

The “Introduction to React with JavaScript” training is an excellent starting point for anyone looking to step into the world of React. Designed to help even those with no prior web development experience, this course covers the fundamental concepts of React and how to implement them using JavaScript in detail.

In the first part of the training, we provide an overview of React’s basics and explore why it has become a popular framework. Participants will understand the usefulness of React and why it is preferred by many developers. Following this, we delve deep into how React components are created and combined. In this section, the JSX (JavaScript XML) syntax is introduced, demonstrating how React components are utilized in conjunction with JavaScript code.

The next stage of the training covers the concepts of state and props. Participants will learn how to pass state and props data to React components and how to update this data. Topics such as state changes that trigger component re-renders and prop transitions are also addressed.

To develop dynamic web applications with React, participants will also learn about popular tools like React Router and state management libraries like Redux. React Router simplifies the routing of single-page applications, while Redux helps manage the overall state of the application. These additional tools enable more efficient application development with React.

The training offers ample opportunities for hands-on practice. Participants will develop small sample projects using the concepts they’ve learned, reinforcing topics like application structure, component composition, and data management. Additionally, towards the end of the training, we cover how to test and deploy the projects developed by the participants.

The “Introduction to React with JavaScript” training is suitable for developers of all levels who want to learn React. The course provides students with both theoretical knowledge and practical skills, ensuring a solid foundation in web development with React.

What Will You Learn?

In the “Introduction to React with JavaScript” training, you will learn the following topics:
  • The fundamental concepts and usage of the React framework
  • How to create React component structures
  • How to use key React components such as State and Props
  • How to develop dynamic web applications
  • Popular tools and technologies related to React, such as React Router and Redux
  • How to manage and structure application data
  • The processes of testing, developing, and deploying applications
  • How to perform performance and security testing
  • How to deploy the application
This training can be beneficial for anyone looking to get started with React and learn how to use JavaScript. The course offers hands-on opportunities, demonstrating how to apply theoretical knowledge in practice.

Prerequisites

To participate in the “Introduction to React with JavaScript” training, the following prerequisites are required:
  • Basic Knowledge of JavaScript: Since JavaScript is one of the languages used in this training, you need to understand the fundamental concepts of JavaScript.
  • Knowledge of HTML and CSS: React applications involve designing and styling using HTML and CSS, so you should understand the basic concepts of these languages.
  • Programming Experience: Throughout the training, you will be developing an application, so having some programming experience will be beneficial.
If you do not meet these prerequisites, it is recommended to first learn and practice these topics. This will allow you to get the most out of the training.

Who Should Attend?

The “Introduction to React with JavaScript” training is suitable for the following individuals:
  • Beginner programmers interested in web development
  • Those with a basic understanding of HTML, CSS, and JavaScript
  • Individuals who want to create dynamic and interactive web applications
  • Those looking to learn the fundamental concepts of React
  • Individuals who want to develop applications using JavaScript
  • Those looking to start a career in front-end development
This training will be beneficial for anyone interested in developing dynamic and interactive web applications using React. While it is suitable for beginner programmers, those with programming experience will be able to benefit from the training more quickly and effectively.

Outline

Package Manager (npm/Yarn)
  • npm
    • What is js?
    • What is npm?
    • Using npm
    • npm Scripts
 
  • Yarn
    • Why Yarn?
    • npm Yarn
    • Installation
    • Using Yarn
 

Compiler Setup

  • Setup (Babel)
 

ES6/ES2015

  • Classes
  • Scope (var, let, const)
  • Arrow Functions
  • Modules
  • Template Literals
  • Default, Rest, Spread
  • Default
  • Rest
  • Spread
  • Destructuring
  • Optional Parameters
  • assign()
  • Object Initializer
 

Project Setup (Create React App)

  • Create new Project
  • Folder Structure
  • Browser Support
  • Styles and Assets
  • Dependencies
 

Best Practices (Code Organization & Conventions) React Overview

  • Why React?
  • What it is?
  • Why it is useful?
  • Angular, React Compared
  • Web application architectures
    • Server-side web application architecture
    • Single-page web application architecture
  • React Architecture
 

Elements

  • Hello World in JavaScript
  • Hello World in React
 

 JSX

  • Replacing createElement
  • Embedding Expressions
  • Specifying Attributes
 

Virtual DOM Components

  • Creating an Element
  • Create a Function Component
  • Rendering a Component
  • Creating a Class Component
  • Composing & Reuse
 

 Props

  • Read-only
  • String Literals vs. Expressions
  • Function vs. Class Components
 

Events

  • Listening/Subscribing/Wiring to an Event
  • In Vanilla JavaScript
  • In React: Function Component
  • In React: Class Component
  • Binding
    • Why Binding is Necessary?
    • Class Method
    • Arrow Function
  • Passing Parameters
    • Using Arrow Functions
    • Using Bind
  • Handling Events
    • Using Arrow Functions
    • Using Bind
    • Synthetic Events
 

Hooks

  • Definition
  • Why Hooks?
  • No Breaking Changes
  • Hooks API: useState, useEffect, useRef, useContext
  • Rules of Hooks
 

State

  • Definition
  • State in Function Components
  • useState Hook
  • State in Class Components
  • Mutating state with setState
  • Using State Correctly
  • Data Flows Down
 

Side Effects & Lifecycle

  • useEffect Hook
  • What does useEffect do?
  • Using useEffect
  • useEffect Demo
  • What are Lifecycle Methods
  • Understanding Mounting
  • Common Less Common Methods
  • Using Lifecycle Methods

Conditional Rendering

  • If, else
  • Conditional Operator (?)
  • Logical (&&) Operator
 

Lists

  • In Vanilla JavaScript: for loop, forEach, array.map
  • In React: using Elements, Components
  • Why Keys are Needed
 

Component Architecture

  • Reuse
  • Component Communication
  • Design Patterns
    • Container and Presentation Components
    • Composition Inheritance
 

Forms

  • Controlled Components
  • Reuse of Change Logic across Multiple Inputs
  • Handling Form Submission
  • Controlling Other Form Elements: select, textarea, number
  • Validation
  • Uncontrolled Components
 

HTTP

  • Axios library
  • Fetch API
  • Using with React (HTTP GET)
  • Refactoring for Reuse
  • HTTP POST, PUT, DELETE
 

Routing (React Router)

  • Installation
  • Basics
  • Handling Not Found (404) (as time permits)
  • Parameters (Url & Query) (as time permits)
  • Nesting (as time permits)
 

Build & Deploy (as time permits)

  • Building a React Application for Production
  • Deploying a React Application
  • Serving Apps with Client-Side Routing
  • Customizing Environment Variables
 

Training Request Form

React Training

React Training: The Efficient Way to Develop User Interfaces The Importance of React Training for Organizations React is a JavaScript library developed by Facebook for

Eğitimi İncele »

If you want to maximize the benefits of your training in terms of time and cost efficiency, all you need to do is contact us.

Our training consultants will get in touch with you, assist in identifying your organization’s needs, and provide the most suitable training programs for your employees.

Training Request Form

Digital Vision Academy © All Rights Reserved 2023