Course Content
  • 1. Introduction to React JS + Installation | Complete React Course in Hindi #1
    Free YouTube Video
  • 2. Creating our first react app using create-react-app | Complete React Course in Hindi #2
    Free YouTube Video
  • 3. JavaScript Refresher | Complete React Course in Hindi #3
    Free YouTube Video
  • 4. Understanding JSX | Complete React Course in Hindi #4
    Free YouTube Video
  • 5. Project 1: Setup + Adding Bootstrap to React | Complete React Course in Hindi #5
    Free YouTube Video
  • 6. Understanding Props and PropTypes in React | Complete React Course in Hindi #6
    Free YouTube Video
  • 7. Understanding State & Handling Events in React | Complete React Course in Hindi #7
    Free YouTube Video
  • 8. Adding more Logic to TextUtils | Complete React Course in Hindi #8
    Free YouTube Video
  • 9. Exercise 1: Enhancing TextUtils | Complete React Course in Hindi #9
    Free YouTube Video
  • 10. Creating "Enable Dark Mode" Button Using useState Hook | Complete React Course in Hindi #10
    Free YouTube Video
  • 11. Exercise 1: Solutions + Shoutouts | Complete React Course in Hindi #11
    Free YouTube Video
  • 12. Improving Dark Mode & Refactoring App Component | Complete React Course in Hindi #12
    Free YouTube Video
  • 13. Adding + Auto Dismissing Alert Messages | Complete React Course in Hindi #13
    Free YouTube Video
  • 14. Exercise 2: Adding Custom Color Theme to TextUtils | Complete React Course in Hindi #14
    Free YouTube Video
  • 15. Changing title dynamically & adding favicons to TextUtils | Complete React Course in Hindi #15
    Free YouTube Video
  • 16. React Router Setup + Usage | Complete React Course in Hindi #16
    Free YouTube Video
  • 17. [Free] Building + Hosting React App For free on Github Pages | Complete React Course in Hindi #17
    Free YouTube Video
  • 18. Purchasing a Domain + Hosting TextUtils on a VPS | Complete React Course in Hindi #18
    Free YouTube Video
  • 19. Fixing Issus & Wrapping up TextUtils | Complete React Course in Hindi #19
    Free YouTube Video
  • 20. Exercise 2: Solutions + Shoutouts | Complete React Course in Hindi #20
    Free YouTube Video
  • 21. Fixing few more Textutils Issues | Complete React Course in Hindi #21
    Free YouTube Video
  • 22. Project 2 Setup + Introduction to Class based components | Complete React Course in Hindi #22
    Free YouTube Video
  • 23. Component Structure of our NewsMonkey React App | Complete React Course in Hindi #23
    Free YouTube Video
  • 24. Fetching API Key from News API | Complete React Course in Hindi #24
    Free YouTube Video
  • 25. Understanding state in class based components | Complete React Course in Hindi #25
    Free YouTube Video
  • 26. Looping through an array in JSX to display NewsItems from state | Complete React Course in Hindi #26
    Free YouTube Video
  • 27. Using Fetch API in React to populate NewsItems | Complete React Course in Hindi #27
    Free YouTube Video
  • 28. Adding Previous & Next Buttons to populate NewsItems | Complete React Course in Hindi #28
    Free YouTube Video
  • 29. Adding loading spinner & variable pageSize to NewsMonkey | Complete React Course in Hindi #29
    Free YouTube Video
  • 30. Adding Categories & propTypes to NewsMonkey React App | Complete React Course in Hindi #30
    Free YouTube Video
  • 31. Fetching News category wise in NewsMonkey React App | Complete React Course in Hindi #31
    Free YouTube Video
  • 32. Adding time, author and news source to News React App | Complete React Course in Hindi #32
    Free YouTube Video
  • 33. Refactoring News component to use the same function | Complete React Course in Hindi #33
    Free YouTube Video
  • 34. React Component Lifecycle & Lifecycle methods | Complete React Course in Hindi #34
    Free YouTube Video
  • 35. Adding Infinite Scroll to NewsMonkey | Complete React Course in Hindi #35
    Free YouTube Video
  • 36. Adding a top loading bar to NewsMonkey | Complete React Course in Hindi #36
    Free YouTube Video
  • 37. Hiding API Key by Adding Custom Environment Variables | Complete React Course in Hindi #37
    Free YouTube Video

Introduction to React JS + Installation | Complete React Course in Hindi #1

React Js is a javascript library originally developed by Facebook. It helps in building highly engaging Single page web applications. React Js helps in breaking down complex UI into Simpler components. React JS has a high demand in the field of Web development.

 Installation VS Code, Extension and NodeJs

  • Install VS code: You can Search ‘Download VS Code’ or directly click here to download VS Code. Open the setup and click next until the ‘Select Additional task’ Dialog box appears. Make sure to check all the options and click next to install the VS Code.

  • Install Node Js: You can Download Nodejs by clicking here. Select your OS and click on next, and your Nodejs will be installed.
  • Download react dev tools: Click here to add react dev tool chrome extension. It is a chrome extension, which shows your React component hierarchies.

After Installation, Open the windows power shell(Shift + right-click and select windows power shell option) and write node --version and Npm --version to check the installation and version of Nodejs and Node Package manager(npm) on your computer.

 

Getting Started with VS code:

Open your desired folder and select the option of “Open with Code.”

Downloading  VS code extensions:
  • Thunder Client: It is a visual studio code extension that allows you to use ‘get post’ requests and test your APIs by easily displaying the response of your API.
  • ES7 React/redux/GraphQL/React-native snippets: It is just like an emmett abbreviation, which allows you to autocomplete the code.
  • Bracket pair Colorizer: It allows matching brackets so that they can be easily identified with colors.
  • Auto rename tag: Automatically rename paired HTML/XML tag.
  • Live server: It allows us to visualize our static page by opening the page with a live server.

 

In the upcoming videos, we will be covering a lot of concepts of React with some amazing projects that would allow you to understand React completely. 

Do remember to Access the playlist of the Free React Course in Hindi by clicking here.

Thank you for being with me throughout the tutorial. See you all in the next tutorial. Till then, Keep learning and Keep Coding.

You need to be logged in to post a comment!

Comments

laksh2552 Aug 29, 2021
Hey, anyone whoever is logged in can get access to your dashboard. This is may a threat :- https://www.codewithharry.com/dashboard
Show 2 replies
laksh2552 Aug 14, 2021
Your website may be vulnerable. I have got all the blogpost images, videoSeriesTiles images and videoSeriesFiles. I have also got all the jsons of video courses, blogposts, course content and the css files used in the admin panel and your website. See it here :- https://api.codewithharry.com/video/getcourses?format=api...
Show 2 replies
laksh2552 Aug 14, 2021
Nice work. Please make a video on flask user authentication, flask search bar using flask_sqlalchemy. And also full course on django rest framework , that you have used to combine your website with angular with django backend. Please harry bhai please. Reply me. And also on showing category wise post in django and flask like your course contents.
arkodev Aug 14, 2021
Hello Sir.Thanks for this course.

Resources

No resource files associated with this project

Course Announcements

Any Course related announcements will be posted here