You are on page 1of 6

Training – ReactJS, API and C#

This training is for those who know the basics of programming and web development with
Javascript.

JavaScript Fundamentals

1. Functions
 Declaration, expressions.
 Arrow functions (ES6).
 Practice: Create a calculator using functions for add, subtract, multiply, divide.
2. Arrays and Objects
 Array methods (map, filter, reduce).
 Object manipulation.
 Practice: Create an object to store personal information and write functions to
manipulate it.
3. DOM Manipulation
 Selecting elements, event handling.
 Practice: Build a dynamic to-do list where items can be added and removed.
4. Asynchronous JavaScript
 Callbacks, Promises, Async/Await.
 Practice: Fetch data from a public API and display it on a webpage.

ReactJS Basics

1. State and Lifecycle


 useState, useEffect.
 Practice: Build a digital clock showing the current time.
 Can there be memory leaks during useEffect ? Identify what could lead to it and
the solution
2. Handling Events
 Practice: Implement form handling and submission.
3. Conditional Rendering
 Practice: Create a user login page with different views for logged-in and logged-
out states.

Advanced ReactJS

1. React Router
 Practice: Build a single-page application (SPA) with multiple pages/routes.
2. State Management (Redux or Context API)
 Practice: Implement a shopping cart feature in your SPA.
3. Hooks
 Custom hooks.
 Practice: Create a custom hook for fetching and storing data from an API.

C# Basics
1. OOP Concepts in C#
 Classes, objects, inheritance, polymorphism.
 Practice: Design a simple system like a library management system using OOP
principles – all the above
2. Collections
 Arrays, Lists, Dictionaries.
 Practice: Write a program to manage a list of students and their grades.

Web Development with C#

1. ASP.NET Core Introduction


 MVC architecture.
 Practice: Develop a simple CRUD (Create, Read, Update, Delete) application.
2. Entity Framework
 Database integration.
 Practice: Extend the CRUD application to use a database.
3. API Development
 Creating RESTful APIs.
 Practice: Develop an API for a bookstore that allows fetching, adding, and
deleting books.

Test API Knowledge

1. What is a Web Server and its responsibilities? Give some examples of


web servers.
2. How different is a Web Server from AWS, Database Server, Application
Server
3. Basic Concepts:
 What is an API, and how does it work?
 Explain the difference between REST and SOAP APIs.
 What are idempotent HTTP methods? Provide examples.
4. HTTP Methods:
 Describe the purpose of the following HTTP methods: GET, POST, PUT,
DELETE, PATCH.
 When would you use PUT vs. PATCH?
 Whats the difference between GET and PUT, where will you use which
one?
5. Status Codes:
 What does the status code 200 signify?
 Explain the difference between 4xx and 5xx status codes.
 When would you return a 204 status code?
6. Authentication & Security:
 Describe basic authentication and when it might be used.
 What is OAuth, and how does it work?
 Explain the concept of JWT and how it is used in API security.
7. API Design:
 How would you design a RESTful API for a simple blog application?
 What considerations should be taken into account when versioning an
API?
8. API Testing:
 What tools can be used for API testing?

Practical Exercises

1. Consume an API:
 Use a public API, such as the JSONPlaceholder or OpenWeatherMap, to
fetch data and display it in a simple web application. Focus on handling
different HTTP methods, parsing JSON data, and managing errors.
2. Design an API Endpoint:
 Design and document a RESTful API endpoint for creating a new user in
a system. Include the URL, HTTP method, request body, success
response, and error responses.
3. Postman Collection:
 Create a Postman collection to demonstrate requests to various
endpoints of a public API, including different HTTP methods, query
parameters, and headers.
4. Implement Authentication:
 Demonstrate the use of JWT for securing an API endpoint. You can
mock the API using tools like Postman Mock Server or create a simple
backend in languages like Node.js or Python.
5. Error Handling:
 Write pseudocode or an actual code snippet that shows how to handle
HTTP errors gracefully when consuming an API.

Full-Stack Application

 Project: Build a full-stack web application with ReactJS as the frontend and C# (ASP.NET
Core) as the backend.
 Example: A blog where users can read posts (ReactJS frontend) and an admin can
add or remove posts (C# backend).

Single responsibility design

1. UI Layer (Presentation Layer): This is where you handle the rendering of the UI
elements. It should be concerned only with how things look.
2. Business Logic (Application Logic): This involves the data processing, computations,
and decision-making processes of the application. It's about how things work.
Best Practices for Separation

1. Use Functional Components for UI:


 Create stateless functional components that are responsible only for rendering
the UI based on the props they receive.
 Example: A Button component that receives text and an onClick function as props.
2. Container Components for Business Logic:
 Use container components (or higher-order components) to handle business
logic.
 These components fetch data, handle state, and pass data to presentation
components.
 Example: A TodoListContainer that fetches todo items and passes them to a TodoList
presentation component.
3. Custom Hooks for Reusable Logic:
 Extract reusable business logic into custom hooks.
 Example: A useFetch hook that abstracts the API fetching logic.
4. State Management Tools:
 For complex applications, use state management libraries like Redux or Context
API to manage state separately from components.
 This centralizes the business logic and separates it from UI components.
5. Utility Functions:
 Encapsulate complex logic in utility functions or services.
 Example: A function calculateTotalPrice in an e-commerce app.

Implementing the Separation

1. Component Structure:
 Presentation Component: It takes data via props and displays UI.
 Focus on how things look.
 Avoid embedding business logic.
 Container Component: Manages data and business logic.
 Fetches data, manages state, and handles logic.
 Passes data and callbacks to presentation components.
2. Example Implementation:
 UI Component (e.g., TodoItem.js):
 A simple component that receives a todo item and displays it.
 Container Component (e.g., TodoListContainer.js):
 Fetches the list of todo items from an API.
 Manages state (like loading, error states).
 Passes the todo items to the TodoList presentation component.
 Custom Hook (e.g., useTodos.js):
 Encapsulates the logic for fetching and managing todo items.
 Used by TodoListContainer.
3. Testing:
 This separation makes it easier to write unit tests.
 Test UI components with mock data.
 Test business logic independently from UI.
Exercise
A detailed example to demonstrate the segregation of UI and business logic in a ReactJS
application. We'll use a simple "Todo List" application for this purpose.

Project Structure

1. Components:
 TodoList.js (UI Component)
 TodoItem.js (UI Component)
 TodoListContainer.js (Container Component)
2. Hooks:
 useTodoList.js (Custom Hook for business logic)
3. Services:
 todoService.js (Utility functions for API calls)

Implement as follows

TodoItem.js (UI Component)

This component is responsible for displaying an individual todo item.

 Responsibilities: Presentational only. Displays the todo item and handles the click event.

TodoList.js (UI Component)

This component is responsible for displaying the list of todo items.

 Responsibilities: Presentational only. Renders the list of TodoItem components.

useTodoList.js (Custom Hook)

This hook encapsulates the business logic for fetching and updating todo items.

 Responsibilities: Manages the state of the todo list and communicates with the todoService
for data.

TodoListContainer.js (Container Component)

This component connects the UI and business logic.

jsxCopy code
 Responsibilities: Uses the useTodoList hook to get the necessary data and behavior, and
passes them to the TodoList UI component.

todoService.js (Utility Functions)

This file contains functions to interact with the backend or API.


 Responsibilities: Handles API interactions, abstracting them away from the UI and business
logic.

Explanation

 UI Components (TodoItem.js, TodoList.js): These components are solely focused on how


things look. They receive data and callbacks via props and render accordingly.
 Custom Hook (useTodoList.js): This hook abstracts the logic for fetching, updating, and
managing the state of the todo list. It interacts with the todoService to fetch and update
data.
 Container Component (TodoListContainer.js): This component bridges the UI and business
logic. It uses the useTodoList hook to get and manage the data it needs, then passes this
data to the UI components.
 Service Layer (todoService.js): Responsible for making API calls, it keeps the data fetching
logic separate from the UI and business logic.

This structure ensures that each part of the application has a clear and single responsibility,
making the codebase more maintainable, testable, and scalable.

Lets go a bit beyond

What are the differences between GRPC and Signal R? In which situation would you be
implementing them in your to-do list? If so, in which of these 4 layers would you be implementing
them.

You might also like