From e102f0e863d3ef3a29dc3fd85e92d3d8913d4fc1 Mon Sep 17 00:00:00 2001 From: Taufiqurrahman <64482868+fiqgant@users.noreply.github.com> Date: Wed, 8 Mar 2023 11:29:04 +0700 Subject: [PATCH] React JS for Beginners --- data/blog/curriculum_for_basic_reactjs.mdx | 107 +++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 data/blog/curriculum_for_basic_reactjs.mdx diff --git a/data/blog/curriculum_for_basic_reactjs.mdx b/data/blog/curriculum_for_basic_reactjs.mdx new file mode 100644 index 0000000..b37107f --- /dev/null +++ b/data/blog/curriculum_for_basic_reactjs.mdx @@ -0,0 +1,107 @@ +--- +title: đŸ“˜Basic React JS for Beginners - A 16-Session Curriculum +date: '2023-03-08' +tags: ['react js'] +draft: false +summary: React JS has become one of the most popular JavaScript libraries for building user interfaces. With its modular and efficient approach to building UI components, React JS has revolutionized the way developers build web applications +--- + +
+ js +
+ +# Introduction +React JS has become one of the most popular JavaScript libraries for building user interfaces. With its modular and efficient approach to building UI components, React JS has revolutionized the way developers build web applications. If you're a beginner who wants to learn how to build web applications using React JS, this 16-session curriculum is designed for you. + +In this curriculum, you'll learn the basics of React JS, starting with an introduction to the library and its advantages over other UI libraries. You'll also learn how to install React JS and create your first project. The curriculum will cover the fundamentals of React JS, including JSX and Components, Props and Events, Lifecycle methods, and State Management. + +You'll also learn how to build a simple Todo List application using React JS and apply styling to the application. The curriculum will cover advanced concepts such as Routing, API and AJAX, Middleware, and Authentication. + +Additionally, you'll learn how to prepare your React JS application for deployment, and even get introduced to Next JS, a popular framework built on top of React JS. + +By the end of the 16 sessions, you'll have a solid understanding of the basics of React JS and how to build web applications using the library. With a mid-term and final exam, you'll have the opportunity to test your knowledge and ensure that you're on the right track. + +So, let's get started with Basic React JS for Beginners! + +## Session 1 - Introduction to React JS +- What is React JS? +- Why choose React JS? +- Installing React JS and creating the first project + +## Session 2 - JSX and Components +- What is JSX? +- Components and state in React JS +- Creating a simple component + +## Session 3 - Props and Events +- Understanding Props and Events in React JS +- Sending Props between components +- Using Events in React JS + +## Session 4 - Lifecycle +- React JS Lifecycle +- Using componentDidMount and componentDidUpdate +- Understanding state and props in React JS Lifecycle + +## Session 5 - Building a Todo List Application +- Building a simple Todo List application +- Using state and props +- Implementing onClick event on Todo List application + +## Session 6 - Forms and Validation +- Using forms in React JS +- Validating input form in React JS +- Using ref on forms in React JS + +## Session 7 - Styling +- Implementing styling on React JS components +- Using CSS Modules in React JS +- Applying styling on Todo List application + +## Session 8 - Mid-term Exam + +## Session 9 - Routing +- Using React Router for routing in React JS +- Creating navigation on Todo List application +- Using URL Parameters in React JS + +## Session 10 - API and AJAX +- Understanding API and AJAX concepts in React JS +- Using fetch() in React JS +- Retrieving data from API in React JS + +## Session 11 - State Management +- State management in React JS +- Using Redux in React JS +- Understanding action, reducer, and store concepts in Redux + +## Session 12 - Middleware +- Middleware in Redux +- Creating custom middleware in Redux +- Understanding thunk concept in Redux + +## Session 13 - Authentication +- Using Firebase Authentication in React JS +- Understanding login and logout concepts in Firebase Authentication +- Applying authentication on Todo List application + +## Session 14 - Deployment +- Preparing React JS application for deployment +- Using Netlify for deploying React JS application +- Applying custom domain on React JS application in Netlify + +## Session 15 - Introduction to Next JS +- What is Next JS? +- Installing Next JS and creating the first project +- Advantages of Next JS over React JS + +## Session 16 - Final Exam + + +This is the curriculum I recommend for Basic React JS for beginners for 16 sessions with the 8th session as a mid-term exam and the 16th session as the final exam. I hope this curriculum helps you in learning React JS. \ No newline at end of file