WEB DEV REVIEWER - MIDTERM PDF

George INTRODUCTION TO RESPONSIVE WEB DESIGN: Responsive Web Design (RWD) is a method to make web pages look good on all devices by adapting the layout to the size of the screen. This can be achieved by using flexible layouts, images, and CSS media queries. It eliminates the need to create a diffe...

George INTRODUCTION TO RESPONSIVE WEB DESIGN: Responsive Web Design (RWD) is a method to make web pages look good on all devices by adapting the layout to the size of the screen. This can be achieved by using flexible layouts, images, and CSS media queries. It eliminates the need to create a different design and development phase for each new device that emerges. Why is Responsive Design Important? Responsive design is crucial in today’s multi-device world. Websites need to be accessible and look great on a wide variety of screen sizes, from small phones to large desktop monitors. Google also prioritizes mobile-friendly sites in search rankings. HTML (HyperText Markup Language) is the foundation of all web pages. The declaration is essential for ensuring the correct rendering of the page. HTML tags such as , , and structure the page’s content. Semantic HTML elements give meaning to the structure of a web page. Instead of using generic or tags, semantic elements like , , , and describe their content, improving accessibility and SEO. CSS (Cascading Style Sheets) is used to style and layout web pages. External stylesheets (linked through the tag) allow you to keep the CSS code separate from the HTML, making it easier to maintain and scale. The layout of webpages can be structured with CSS by using modern layout techniques such as Flexbox and Grid. These layouts are flexible and adaptive, which is important for responsive designs. Media queries – are a key component of responsive design. They allow you to apply different CSS styles based on the screen size or device type. JavaScript (JS) is the programming language that allows you to add dynamic and interactive elements to a website, such as animations, form validations, and responsive menus. A practical example of using Java Script to add interactivity is creating a responsive navigation menu. When viewed on smaller screens, the menu can collapse and expand using toggle button controlled by JS. REACT – is a popular JavaScript library used for building user interfaces, particularly for single- page applications (SPAs). It was developed by Facebook and has become widely adopted due to its efficiency and flexibility. The main idea behind React is to break down a complex user interface into small, reusable pieces called components. Component-Based Architecture – React applications are built using components, which are self- contained modules of UI. This modularity makes development more manageable and encourages code reusability. 1 George Virtual DOM – React uses a virtual representation of the real DOM (Document Object Model). Instead of updating the actual DOM directly, React updates the virtual DOM first, which is faster. Then, it finds the differences and efficiently updates only the necessary parts of the real DOM. Unidirectional Data Flow – React follows a one-way data-binding model, meaning data flows in one direction, making it easier to debug and understand the state of the application. REACT COMPONENTS: Components are the building blocks of a React application. They allow developers to split the UI into independent reusable pieces. Functional Components – These are simple JavaScript functions that return a UI (usually written in JSX, which is similar to HTML). Class Components – These are ES6 classes that can have more complex logic, including their own state and lifecycle methods. (though class components are used less often now with the introduction of hooks in functional components). 2 George JavaScript XML (JSX) is a syntax extension that looks like HTML but is written inside JavaScript. It allows you to write HTML structures in the same file as your JavaScript code. - It must return a single parent element - It allows embedding JavaScript expression inside {} - HTML attributes like class and for are written as className and htmlFor to avoid conflicts with JavaScript keywords. Props – Short for “properties”, these are read-only data that are passed from a parent component to a child component. Props are used to make components dynamic and reusable. State – is a data that a component manages and can change over time. Unlike props, which are passed down from a parent component, state is managed internally by the component itself. When the state of a component changes, React automatically re-renders the component to reflect the new state. 3 George React hooks are special functions that allow you to “hook into” React features, such as state and lifecycle methods, without needing to write class components. useState – This hook lets you add state to functional components. You call useState to define a state variable, which React will keep track of across re-renders. useEffect – This hook is used to handle side effects (like fetching data, subscriptions, or manually changing the DOM) in functional components. It can be thought of as a combination of lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. React’s Virtual DOM is one of it’s most helpful features. In traditional web applications, everytime something changes the UI, the real DOM is updated, which can be slow and inefficient for large applications. - Creating a virtual representation of the UI in memory. - When the state of a component changes, React updates the Virtual DOM first. - It then compares the Virtual DOM with the real DOM (a process called reconciliation) and efficiently updates only the parts of the real DOM that have changed. Every React component goes through several phases during its existence, known as it’s lifecycle. Class components have specific lifecycle methods that you can override to execute the code at different stages, such as when the component is first mounted to the DOM or when it’s about to be removed. In functional components, hooks like useEffect allow you to handle lifecycle-like behavior without needing a class. React follows a unidirectional data flow model, where data flows from parent components down to child components through props. This makes the data flow predictable and easier to debug. Changes in data (state) are passed down to the Ul, but Ul interactions do not directly modify data; instead, they trigger changes in the component's state, which re-renders the Ul accordingly. REST (Representational State Transfer) – is an architechtural style is widely used for designing networked applications, especially web services. It is based on a few principles that make APIs easy to understand, scalable, and stateless. Stateless – Each HTTP request from a client to a server must contain all the information needed to understand and process the request. The server does not store any session data about the client. Uniform Interface – A consistent interface is maintained across the API to simplify how resources (e.g., users, products) are interacted with. Resource-Based – In REST, everything is considered a resource and each resource is identified by a unique URL. 4 George RESTful API – is an implementation of REST. It uses HTTP method (like GET, POST, PUT, DELETE) to peform CRUD operations on resources. These APIs are often lightweight and efficient for communication between system, whether within the same network or across the web. HTTP METHODS IN REST: RESTful APIs are built around using standard HTTP methods to interact with resources: GET – Used to retrieve information about a resource. EXAMPLE: GET /users retrieve all users record from the server. POST – Used to create a new resource. EXAMPLE: POST /users create a new user record on the server. PUT – Used to update an existing resource. EXAMPLE: PUT /users/1 updates the user record with ID 1. DELETE - Used to delete a resource. EXAMPLE: DELETE /users/1 deletes the user with ID 1. These operations map to CRUD actions in a database management. RESTful APIs follow these conventions to maintain a clean and understandable interface. BUILDING A SIMPLE RESTFUL API: Backend Setup – A RESTful API can be built using a backend framework, like Node.js with Express, which is a lightweight framework for building web servers. Step by step Example: Setting Up a Server – the first step is to initialize a Node.js project and install Express. The server can be set up to listen on a port (e.g., 3000) and respond to basic HTTP requests. Creating Routes – Routes are created for each HTTP method (GET, POST, etc). allowing users to retrieve data (GET), create a new entries (POST), update (PUT) or delete (DELETE) resources from the server. For example, a simple API might manage a collection of users, where each HTTP method provides different functionality: GET /users retrievers a list of users. POST /users creaters a new user. PUT /users/:id updates a specific user by ID DELETE /users/:id deletes a specific user by ID 5 George TESTING THE API: Once the API is created, it needs to be tested to ensure it works as expected. The most common tools for this are: Postman - A tool that allows you to easily send HTTP request (GET, POST, etc.) and view the responses from your API. Browser – You can directly test GET request by typing the API URL into a browser (e.g., http://localhost:3000/users to see a list of users). In testing, you verify that your routes (URLs) are correctly interacting with resources, sending the appropriate data back to the client. CONSUMING RESTFUL APIs: After building an API, clients (like web browsers or mobile apps) can consume it to fetch data or send new data to server. This is done using client-side JavaScript. Using Fetch API – Javascript’s fetch function is commonly used to make HTTP Request from a webpage to a RESTful API. GET Request: Used to retrieve data from the API. POST Request: Used to send data to the API (e.g., creating a new user). 6 George ERROR HANDLING IN RESTFUL APIs: When building and consuming APIs, error handling is crucial to ensure a smooth user experience and to manage unexpected issues HTTP Status Codes - APIs return specific status codes that inform the client of the result of their request: 200 OK: The request was successful. 404 Not Found: The requested resource doesn't exist. 400 Bad Request: The client sent an invalid request. 500 Internal Server Error: A general server error occurred. By using these codes, clients can easily handle errors and provide feedback to users. 7