React JS For Beginner Convert any HTML Site to React JS

Introduction: 

This course is designed to teach you how to convert an existing HTML website into a React JS project. React JS is a popular front-end JavaScript library that allows developers to create dynamic and interactive user interfaces. In this course, you will learn the basics of React JS, including components, state, props, and JSX.

You will also learn how to use React Router DOM to create a multi-page web application and how to fetch data from an API using Axios.

By the end of this course, you will have a good understanding of React JS and be able to build a simple but functional web application.

This course is suitable for beginners who are new to React JS and web development. However, it is assumed that you have a basic understanding of HTML, CSS, and JavaScript. If you are a complete beginner, you can still take this course, but you may need to supplement your learning with additional resources.

Objectives: 

1. ·         Understanding the basics of React JS and how it works.
2. ·         Familiarizing yourself with the tools and libraries used in React JS development, such as Babel, Webpack, and React Router DOM.
3. ·         Learning how to convert an existing HTML site into a React JS project, using components, props, state, and other React JS features.
4. ·         Understanding how to use Axios or Fetch to retrieve data from an API and display it in your React JS project.
5. ·         Implementing React JS features such as forms, input validation, and handling events.
6. ·         Styling your React JS project using CSS, Bootstrap, or React Bootstrap.
7. ·         Learning how to deploy your React JS project to a web server or hosting service such as cPanel.
8. ·         Acquiring the skills to create and develop your own React JS projects from scratch.
9. ·         Enhancing your knowledge of React JS through further exploration and practice with more advanced topics such as Redux, context API, and hooks.
10. ·         Developing problem-solving and critical thinking skills through hands-on experience with React JS development.

Course Outlines:

1. ·         Introduction
2. ·         Let, Const Var in JavaScript
3. ·         Arrow Function of JS
4. ·         This Keyword of JavaScript
5. ·         Classes, Object in JS
6. ·         React JS Fundamental
7. ·         Project Setup
8. ·         Project Structure and First Code
9. ·         Babel and Webpack
10. ·         Components
11. ·         Functional Components
12. ·         Class Components
13. ·         JSX
14. ·         Props
15. ·         State
16. ·         Event Handler with Methods
17. ·         State Manipulating
18. ·         React DOM
19. ·         Use of State Hook
20. ·         Two Way Data Binding, on Change
21. ·         Stylesheet & Inline Style in Component
22. ·         Single Input
23. ·         On Change
24. ·         Another Way On change
25. ·         On Submit
26. ·         Multiple Input
27. ·         Set Data to State in One Line
28. ·         Form Validation
29. ·         Error Showing
30. ·         Text area
31. ·         Select Option
32. ·         Lists
33. ·         JSON Array List
34. ·         Use Bootstrap
35. ·         React Bootstrap
36. ·         Routing
37. ·         React Router DOM
38. ·         Router Link Load Component
39. ·         HTTP Request
40. ·         Axios – Lifecycle Methods
41. ·         Fetch Data from API
42. ·         Covert HTML to React JS
43. ·         Setup Home Component
44. ·         Setup About Component
45. ·         Setup Services Component
46. ·         Setup Portfolio Component
47. ·         Setup Contact Component
48. ·         Setup Blog and Blog Details Page Component
49. ·         How to Upload Project in C-Panel

Who should attend?

1. ·         Students who want to learn a new skill and expand their knowledge in web development.
2. ·         Web developers who want to switch to React JS from other frameworks or libraries.
3. ·         Entrepreneurs who want to create a new website or web application using React JS.
4. ·         UI/UX designers who want to expand their knowledge of front-end development and create interactive and dynamic web pages.
5. ·         Anyone who wants to develop problem-solving and critical thinking skills through hands-on experience with React JS development.

Learning Outcomes:

1. ·         Understanding the basics of React JS and how it works.
2. ·         Familiarizing yourself with the tools and libraries used in React JS development, such as Babel, Webpack, and React Router DOM.
3. ·         Learning how to convert an existing HTML site into a React JS project, using components, props, state, and other React JS features.
4. ·         Understanding how to use Axios or Fetch to retrieve data from an API and display it in your React JS project.
5. ·         Implementing React JS features such as forms, input validation, and handling events.
6. ·         Styling your React JS project using CSS, Bootstrap, or React Bootstrap.
7. ·         Learning how to deploy your React JS project to a web server or hosting service such as cPanel.
8. ·         Acquiring the skills to create and develop your own React JS projects from scratch.
9. ·         Enhancing your knowledge of React JS through further exploration and practice with more advanced topics such as Redux, context API, and hooks.
10. ·         Developing problem-solving and critical thinking skills through hands-on experience with React JS development.

End of Course

After completion of the course students must undertake the exam. Once the exam is passed, it is considered as end of the course.