Build a Text Translator using React and React Hooks
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.
Web Development,Development,React JS
Lectures -15
Duration -47 mins
30-days Money-Back Guarantee
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
- React
- React Hooks
- API handling
- Semantic UI
- Creating Components
- State and Props
Prerequisites
- Node js installed
![Build a Text Translator using React and React Hooks Build a Text Translator using React and React Hooks](https://d3mxt5v3yxgcsr.cloudfront.net/courses/5244/course_5244_image.png)
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](https://www.tutorialspoint.com/assets/profiles/379599/profile/200_711991-1632833011.jpeg)
Nishant Kumar
Hello, I'm Kumar Nishant and I'm an online instructor at the Angular University.
Over the years I have helped over 5k developers to learn the Angular framework and its surrounding ecosystem of technologies.
I also build full-stack applications and acquired expert DevOps and cloud computing knowledge - proven by the many AWS certifications I hold (incl. the top-level Solutions Architect Professional certification).
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)