Build a Text Translator using React and React Hooks

4.1 ★★★★ ★

Build a Text Translator using React and React Hooks

Name: Build a Text Translator using React and React Hooks
Rating: 4.1 (310 reviews)
Author: Nishant Kumar

In this video, I'll show you how to build a text translator application using React. It will support 17 languages, and you can do cross translation too.

updated on icon Updated on Apr, 2024

language icon Language - English

person icon Nishant Kumar

category icon Web Development,Development,React JS

Lectures -15

Duration -47 mins

4.1 ★★★★ ★

Add to Cart Buy Now

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

Hello, I am Nishant and I am an enthusiastic developer with a knack for building products with good UI and UX. I teach Front-end Development to beginners, and some other things too.

I build projects to learn how code works.

And while I am not coding, I enjoy writing poetry and stories and cooking delicious meals.

In this course, we cover all the steps from creating an app in React all the way through to build a Translator Application in React

We will start by initializing the React App.
We will learn how to create Components.
How to send API Requests.
How to use LibreTranslate API
And last but not the least, how to use Semantic UI Library.

Enroll now and get started on your journey to build React applications from scratch to finish.

What you’ll learn

React and React Hooks
How to create components.
How to send API Requests.
And last but not the least, how to use Semantic UI Library.
How to use Libre Translate API.

Who this course is for:

Anyone interested in learning React.
Anyone interested in learning API handling.
Beginner React.
Beginner Front-end developers.
Beginner Full Stack Developers.
Beginner Mobile Developers.
Beginner JavaScript Developers.
Intermediate Front-end Developers.
Intermediate React Developers
Beginner HTML/CSS Developers
Intermediate HTML/CSS Developers

Goals

What will you learn in this course:

React
React Hooks
API handling
Semantic UI
Creating Components
State and Props

Prerequisites

What are the prerequisites for this course?

Node js installed

Build a Text Translator using React and React Hooks

Curriculum

Check out the detailed breakdown of what’s inside the course

Building a Text Translator
15 Lectures

Introduction - What we will Build 00:43 00:43
Creating the React app 00:32 00:32
Creating the Translate Component 01:56 01:56
Installing Semantic UI Library and Adding the Header 04:07 04:07
Creating the Input Text Area 03:28 03:28
Adding Result Textarea, Translate button and Language Select option 05:00 05:00
Getting input data from Input Textarea 02:55 02:55
Getting Input Data to the Result Textarea 01:10 01:10
Creating the Languages List 03:46 03:46
Getting data from API for Lanaguages List I 03:18 03:18
Getting data from API for Lanaguages List II 03:53 03:53
Getting the Language Key from Language Select 02:43 02:43
Calling the Translate API I 02:15 02:15
Calling the Translate API II - Getting the Source Language Key 08:42 08:42
Making some Improvments 03:30 03:30

Instructor Details

Nishant Kumar

An enthusiastic developer with a knack for building products with good UI and UX.

Check out my blogs at freeCodeCamp: http://bit.ly/3gl0Ips Follow Cybernatico on Youtube: https://bit.ly/3AoJAHB

Course Certificate

Use your certificate to make a career change or to advance in your current career.