[ubermenu config_id="enmenu"]
Generic filters
Search in title

Test-Driven Development (TDD) Using React.js and ES6 Training

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

About the Training

Test-Driven Development (TDD) Using React.js and ES6 Training is a comprehensive program focused on how to develop web applications in a high-quality and efficient manner. By harnessing the power of the TDD methodology, students will learn how to build real-world web applications using React.js and ES6.

At the beginning of the training, we start with an in-depth introduction to the concept of Test-Driven Development (TDD). This section covers the fundamental principles of TDD, the process of writing tests, and how TDD can be integrated into the application development process. The advantages of TDD, such as improving code quality and reducing future errors, are discussed in detail.

Next, we move on to the basic concepts of the React.js library. We explain features such as React’s component-based structure, JSX, state, and props. Emphasis is also placed on ES6 features, especially arrow functions, classes, and modules.

In the following step, we begin developing an application using the TDD approach with React.js and ES6. Additionally, participants are introduced to popular testing libraries such as Jest and Enzyme.

Throughout the development process, we focus on performance optimization and best practices. Students will learn various techniques and tools to enhance performance and make their applications more efficient.

Furthermore, the training covers the concepts of Continuous Integration (CI) and Continuous Deployment (CD). Students will learn how to regularly test, integrate their code, and continuously deploy to production environments.

By the end of the training, participants will have the skills to effectively develop reliable, high-quality web applications using the TDD methodology with React.js and ES6.

Test-Driven Development (TDD) Using React.js and ES6 Training is highly valuable for anyone looking to advance their career, improve their ability to write quality code, and learn modern web development techniques.

What Will You Learn?

During the Test-Driven Development (TDD) Using React.js and ES6 training, students will learn the following:
  • What the Test-Driven Development (TDD) approach is and how it can be used.
  • How to test web applications using React.js and ES6.
  • How to use testing tools like Jest and similar frameworks.
  • How to test application components.
  • How to increase code reliability and quality using the test-driven approach.
  • Ways to develop applications quickly and efficiently.
  • Methods for optimizing and improving web applications.
These learnings will help students work more securely and efficiently on future web application development projects, providing a positive contribution to their careers.

Prerequisites

The following prerequisites are required to attend the Test-Driven Development (TDD) Using React.js and ES6training:
  • JavaScript: Basic knowledge of JavaScript is required as React.js and ES6 will be used throughout the training.
  • React.js: Participants should have a fundamental understanding of and experience with React.js.
  • Web Development: Basic knowledge of web development technologies such as HTML, CSS, and JavaScript is required.
  • Test Automation: Basic knowledge of test automation can be helpful, but it is not mandatory.
Meeting these prerequisites will help students work more efficiently and gain a better understanding throughout the training.

Who Should Attend?

The Test-Driven Development (TDD) Using React.js and ES6 training is aimed at the following professionals:
  • Web Developers: The training is designed for web developers who want to learn how to test web applications using React.js and ES6.
  • Test Automation Specialists: It is aimed at test automation specialists who want to learn how to automate tests using React.js and ES6.
  • Beginner or Advanced JavaScript Users: The training is suitable for beginner or advanced JavaScript users who want to learn the test-driven approach using JavaScript and React.js.
This training will help participants enhance their professional competencies and work more efficiently and securely on future web application development projects.

Outline

React Quickstart with Create-React-App Development Ecosystem
  • Code Editors and IDEs
  • Lab 1: Installing and Configuring WebStorm IDE
  • js
  • EventEmitter
  • Node Streams
  • Node Modules
  • Lab 2 – Getting Started with js
  • Git
  • What is Version Control
  • History of Git
  • What is Git?
  • 3 States of Git
  • Git Workflow
  • Lab 3 – Version Control With Git
  • Command Prompt
  • Know Your Shell
Reproducible Builds
  • Why Automate Your Build?
  • Build Requirements
  • npm
  • Lab 4 – Initialize npm
  • node_modules
  • json
  • npm install
  • Lab 5 – Using npm as a Build Tool
  • Lab 6 – Managing External Dependencies
Static Code Analysis
  • Lint tools
  • Configuring ESLint
  • ESLint: What Can Be Configured?
  • ESLint Rules
  • Lab 7 – Automate Linting
  • Lab 8 – Configure a Local Web Server
  • Browser Development Tools
Test-Driven Development
  • Goal of TDD
  • The TDD Cycle
  • Red, Green, Refactor
  • Assertions
  • JavaScript Testing Frameworks
  • JS Exception Handling
  • Jasmine Overview
  • How Jasmine Works
  • Test Suites
  • Specs
  • Expectations
  • Matchers
  • TDD BDD
  • Lab 9 – Get Started with Jasmine
  • Lab 10 – TDD Practice
  • Automated Cross-browser Testing
  • Karma
  • Lab 11 – In-browser Testing with Karma
Modularity – Why is Modularity Important?
  • CommonJS
  • RequireJS
  • ES6 Modules
  • Front-end Modules
  • Manage Modules Manually
  • Front End Package Management with npm
Building and Refactoring
  • Building the dist directory
  • webpack
  • Lab 12: Deploying with Webpack
  • Lab 13 README Update and Refactoring
ES2015 (ES6)
  • Variable Scoping with const and let
  • let var
  • Block-scoped Functions
  • Arrow Functions
  • Default Parameter Handling
  • Rest Parameter
  • Spread Operator
  • Template Literals
  • Enhanced Object Properties
  • Array Matching
  • Object Matching
  • Symbol Primitive
  • User-defined Iterators
  • For-Of Operator
  • Creating and Consuming Generator Functions
  • Class Definition
  • Class Declaration
  • Class Expressions
  • Class Inheritance
  • Advanced JavaScript Topics
  • “use strict”
  • Understanding this
  • 4 Rules of this
  • What is this?
  • Implicit Binding
  • Explicit Binding
  • new Binding
  • window Binding
  • map()
  • Promises
  • Promises vs. Event Listeners
  • Why use Promises?
  • Demo: Callback vs. Promise
  • Using Promises
  • Babel
  • Lab 14: Transpiling with Babel
  • Lab 15: Converting to ES6
The Document Object Model
  • What is the DOM?
  • Understanding Nodes
  • EventTarget
  • DOM Events
  • Other Events
  • Element
  • Manipulating HTML with the DOM
  • Manipulating HTML with JQuery
  • Manipulating HTML with React
Introduction to React.js
  • What is js
  • Imperative API Declarative API
  • Imperative Declarative Screen updates
  • One-way Data Flow
  • Virtual DOM
  • Virtual DOM HTML DOM
  • State Machines
  • Lab 16, Part 1: Hello, React!
  • Understanding Components
  • render()
  • ReactDOM
  • React Development Process
  • Props vs. State
  • Setting Initial State
  • super()
  • Lab 16, Parts 2-3: Your first Component
JSX
  • What is JSX?
  • Using JSX
  • JSX is not Exactly HTML
  • Using React with JSX
  • Using React without JSX
  • Expressions in JSX
  • Precompiled JSX
  • Lab 17 – HTML to JSX
React Components
  • Creating Components
  • Pure Functions
  • Benefits of Pure Functions
  • I.R.S.T
  • Single Responsibility
  • Communication Between Components
  • Props
  • Ref Callback
  • Lab 18: Passing Props
  • Styles in React
  • Style Components
  • Lab 19: Style in React
  • Forms
  • Forms Have State
  • Form Events
  • Controlled Components
  • Uncontrolled Components
  • Lab 20: Controlling the Form
  • Stateless Functional Components
  • Lab 21: Refactoring the App
  • Component Life-Cycle Events
  • Life-Cycle Methods
  • Mount/Unmount
  • Mount/Unmount Life-Cycle Methods
  • Data Life-Cycle Methods
  • Component Life Cycle
  • Events
  • Lab 22: Life Cycle and Events
  • Composition
  • Reusable Components
  • Presentational Components
  • Container Components
  • PropTypes
  • Lab 23: PropTypes
  • Testing React Components
  • What to Test in a React Component
  • Jest
  • Mocking
  • Snapshot Testing
  • TestUtils
  • Enzyme
  • Shallow Rendering
  • Lab 24: Testing React Components
  • Lab 24.5: Testing with Jest and Enzyme
  • Lab 25: Multiple Components
  • React Router
  • Lab 26: React Router
  • Lab 27: React Router, Part 2
Flux and Redux
  • Flux
  • Flux Flow
  • Flux Action
  • Flux Dispatcher
  • Flux Stores
  • EventEmitter
  • Redux
  • Stores & Immutable State Tree
  • Redux Actions
  • Reducers
  • Things You Should Never Do in a Reducer
  • Reducer Composition
  • Redux Store
  • Redux Pros and Cons
  • Lab 28: Redux Thermometer
  • Lab 29: Implementing Redux
  • React AJAX Best Practices
  • Redux with Ajax
  • What is Redux Middleware?
  • What is Middleware Good For?
  • Thunk
  • Redux Saga
  • Using Sagas
  • Lab 30: SwimCalc App
  • Lab 31: Redux Middleware
  • create-react-app
  • Lab 32: create-react-app and enzyme
  • Relay and GraphQL

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