2-module-1 (20240925075115).pdf

PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 1 PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 2 Part 1 - Web Development 4 LEARNING OUTCOMES At th...

PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 1 PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 2 Part 1 - Web Development 4 LEARNING OUTCOMES At the end of this module the student be able to: 1. Proficiently incorporate modern frontend frameworks and libraries to enhance interactivity and user experience. 2. Design and implement robust server-side logic, manage databases, and build scalable and secure web applications. 3. Comprehensive understanding of Representational State Transfer (REST) RESOURCES NEEDED For this lesson, you would need the following resources: Hommond, T. (2020) Introduction to Software Engineering PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 3 M OD U LE CON TEN TS Frontend Development 4 Technologies Introduction to React 7 Settings up Development 9 Environment Functional Components 11 vs. Class Components Props and State 14 Statement Management 15 Lifecycle Method 18 Routing and Navigation 20 Adding Bootstrap 23 Sum mary, Key Terms, 25 Post Test and References PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 4 FRONTEND DEVELOPMENT TECHNOLOGIES Front-end technologies refer to the tools and languages used to create the user interface and experience of a website or web application. This encompasses everything that users interact with directly in their web browsers. Front-end development involves translating design mockups into code, implementing interactive features, and ensuring that the u ser experience is intuitive and visually appealing. Key components and technologies in front -end development include: 1. HTML (Hypertext Markup Language): HTML is the standard markup language used to create the structure of web pages. It defines the elements and content within a webpage, such as headings, paragraphs, images, links, and forms. 2. CSS (Cascading Style Sheets): CSS is used to style the HTML elements defined in a web page. It controls the layout, colors, fonts, and overall visual presentation, allowing developers to create visually appealing designs and ensure consistency across a website. 3. JavaScript: JavaScript is a powerful scripting language that adds interactivity and dynamic behavior to web pages. It enables features such as animations, form validation, dynamic content updates, and responsive design. JavaScript is essential for creating interactive web experiences and is supported by all modern web browsers. 4. CSS Preprocessors: CSS preprocessors like Sass (Syntactically Awesome Style Sheets) and LESS (Leaner Style Sheets) extend the functionality of CSS by adding features such as variables, mixins, and nested rules. They help developers write more maintainable and scalable stylesheets. 5. JavaScript Libraries and Frameworks: Libraries and frameworks like React, Angular, and Vue.js provide pre-written code and tools for building complex web applications more efficiently. They offer features such as component -based architecture, state management, and routing to streamline development and enhance code organization. 6. Responsive Design: With the increasing variety of devices and screen sizes, responsive design techniques ensure that websites adapt and display properly on different devices, including desktops, laptops, tablets, and smartphones. Techniques such as media queries and flexible layouts are used to create responsive web designs. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 5 7. CSS Frameworks: CSS frameworks like Bootstrap, Foundation, and Tailwind provide pre-designed CSS styles and components that developers can use to build responsive and visually consistent websites more quickly. They offer grids, typography, buttons, forms, and other UI components out of the box. 8. Browser Developer Tools: Browser developer tools such as Chrome DevTools and Firefox Developer Tools provide built -in features for inspecting and debugging front -end code directly within the browser. Developers can inspect HTML elements, modify CSS styles, debug JavaScript, and analyze network activity to troubleshoot issues and optimize performance. One of the JavaScript libraries that were going to discuss in this module is React. React is a popular JavaScript library for building user interfaces (UIs), particularly for single -page applications (SPAs) and dynamic web applications. Developed by Facebook, React allows developers to create reusable UI components and efficiently manage the s tate of their applications. Here's an overview of React and how it differs from other frameworks: 1. Component-Based Architecture: React follows a component-based architecture where UIs are built using reusable components. Each component encapsulates its own logic, state, and UI, making it easier to manage and maintain complex applications. This approach promotes modularity, reusabi lity, and separation of concerns. 2. Virtual DOM (Document Object Model): React uses a virtual DOM to efficiently update the UI. Instead of directly manipulating the browser's DOM, React creates a lightweight in-memory representation of the DOM. When the state of a component changes, React compares the virtual DOM with the real DOM and updates only the necessary parts, minimizing DOM manipulation and improving performance. 3. JSX (JavaScript X ML): JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. JSX makes it easier to define UI components and their structure, and it is transpiled into regular JavaScript by tools like Babel. While some other frameworks separate HTML and JavaScript more explicitly, React's JSX allows for a more integrated and expressive coding experience. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 6 4. Unidirectional Data Flow: React follows a unidirectional data flow, also known as one - way data binding. Data flows from parent components to child components via props, and changes to the data trigger re-renders of the affected components. This simplifies data management and makes it easier to understand how data changes propagate through the application. 5. React Hooks: Introduced in React 16.8, hooks are functions that allow developers to use state and other React features without writing classes. Hooks enable functional components to manage state, handle side effects, and access React lifecycle methods, making it easier to write and organize React code. 6. Community and Ecosystem: React has a large and active community with extensive documentation, tutorials, and third-party libraries (such as React Router for routing and Redux for state management) available. The ecosystem around React is vibrant, with many tools and resources for building, testing, and deploying React applications. Differences from Other Frameworks: 1. Angular: A full-fledged framework with its own opinionated architecture and conventions. React is a library focused solely on the UI layer. React's flexibility allows developers to choose their preferred tools and libraries for state management, routing, and other aspects of application development. 2. Vue.js: Vue.js shares some similarities with React such as its component-based architecture and virtual DOM, but it offers a more gradual learning curve and a simpler API. Vue.js provides built-in solutions for common tasks like state management and routing, whereas React relies on third-party libraries and tools for these functionalities. 3. Ember.js: Ember.js is a framework that includes conventions and tooling for building ambitious web applications. While Ember.js provides more built -in features and conventions out of the box compared to React but it may have a steeper learning curve and be less flexible in terms of integrating with other libraries and tools. Libraries provide specific standalone functionality that can be integrated into an application as needed, whereas frameworks offer a comprehensive platform with predefined structures, conventions, and components for building applications. The developers retain more control PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 7 over their code structure and flow using library while frameworks impose a more structured architecture and programming paradigm. Libraries are typically more lightweight and flexible whereas frameworks provide a more opinionated approach to application development. INTRODUCTION TO REACT React is a powerful JavaScript library developed by Facebook for building user interfaces (UIs). It provides a component-based architecture that allows developers to create reusable UI components and efficiently manage the state of their applications. Reac t's key features include a virtual DOM for optimizing performance, JSX syntax for writing declarative UI code, and a unidirectional data flow for managing state changes. Why use React? There are several reasons why developers choose to use React: 1. Component-Based Architecture: React promotes a modular and reusable approach to UI development. Developers can create encapsulated components with their own state and behavior, making it easier to build and maintain complex UIs. 2. Declarative Syntax with JSX : React uses JSX, a syntax extension for JavaScript that allows developers to write HTML-like code directly within their JavaScript files. This declarative approach makes it easier to visualize and understand the structure of UI components. 3. Virtual DOM for Performance: React uses a virtual DOM to optimize the rendering process. Instead of directly manipulating the browser's DOM, React creates a lightweight representation of the DOM in memory and updates it efficiently. This minimizes DOM manipulation and improves performance, especially for applications with dynamic data updates. 4. Unidirectional Data Flow: React follows a unidirectional data flow, also known as one - way data binding. Data flows from parent components to child components via props, PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 8 and changes to the data trigger re-renders of the affected components. This simplifies data management and helps prevent unexpected side effects. 5. Rich Ecosystem and Community Support: React has a large and active community of developers, with extensive documentation, tutorials, and third-party libraries available. The ecosystem around React includes tools for state management (e.g., Redux), routing (e.g., React Router), and testing (e.g., Jest), making it easier to build robust and maintainable applications. React's Ecosystem and Popularity React's ecosystem is diverse and vibrant with a wide range of tools, libraries, and resources available to developers: 1. State Management: Redux, MobX, and Context API are popular libraries for managing application state in React. They provide solutions for centralized state management, side - effect handling, and state synchronization across components. 2. Routing: React Router is the de facto standard for implementing client -side routing in React applications. It allows developers to define routes, handle navigation, and manage browser history within their applications. 3. Server-Side Rendering (SSR): Libraries like Next.js and Gatsby enable server -side rendering of React applications, improving performance and search engine optimization (SEO) by pre-rendering pages on the server before sending them to the client. 4. Component Libraries and UI Framework s: Libraries like Material-UI, Ant Design, and Bootstrap provide pre-designed UI components and styling for building responsive and visually appealing interfaces in React applications. 5. Tooling and DevOps: Tools like Create React App, Webpack, and Babel streamline the development workflow by providing scaffolding, bundling, and transpilation capabilities. Continuous integration and deployment (CI/CD) tools like Jenkins, Travis CI, and GitHub Actions help automate the build and deployment process for React applications. React's popularity continues to grow rapidly driven by its developer -friendly syntax, performance optimizations, and vibrant ecosystem. It is widely used by companies of all sizes PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 9 like tech giants Facebook, Instagram, Airbnb, and Netflix. It also used by startups and independent developers around the world. React's flexibility, performance, and extensive community support make it a top choice for building modern web applications and user interfaces. SETTINGS UP DEVELOPMENT ENVIRONMENT Setting up the development environment for React involves several steps to ensure that you have the necessary tools and dependencies installed to start building React applications. Below are the guide to setting up a basic React development environment: 1. Node.js and npm (Node Package Manager) Node.js is a JavaScript runtime environment that allows you to run JavaScript on the server-side. npm is a package manager for Node.js that allows you to install and manage dependencies for your projects. Installation: Download and install Node.js from the official website: Node.js npm is automatically installed with Node.js. Verify Installation: Open a terminal or command prompt. Run the following commands to check the installed versions of Node.js and npm: node -v npm -v 2. Create React App PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 10 Create React App is a tool that sets up a React development environment with a pre - configured build setup. It allows you to start building React applications with minimal configuration. Installation: Open a terminal or command prompt. Run the following command to install Create React App globally: npm install - g create- react- app 3. Initialize a New React Project Once Create React App is installed, you can use it to create a new React project. Initialization: Navigate to the directory where you want to create your new React project. Run the following command to create a new React project named "my -react-app" (replace "my-react-app" with your preferred project name): npx create -react -app my-react-app 4. Navigate to the Project Directory After creating the React project, navigate to the project directory: Navigation: Use the following command to navigate to the project directory: cd my-react-app 5. Start the Development Server PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 11 Once inside the project directory, you can start the development server to preview your React application in the browser. Run the following command to start the development server: npm start 6. View Your React App Your React application should be running locally after starting the development server. Open a web browser and navigate to http://localhost:3000 to view your React app. FUNCTIONAL COMPONENTS VS. CLASS COMPONENTS Components are the building blocks of a React application. They are reusable, self-contained pieces of UI that can be composed together to create complex user interfaces. In React, everything is a component, from simple elements like buttons and input fields to more complex elements like navigation bars and forms. Example: Consider a simple "Button" component: // Button.js import React from 'react'; const Button = ({ onClick, text }) => { return ( {text} ); } export default Button; In this example: The Button component is a functional component defined as a JavaScript function. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 12 It takes two props ( onClick and text ) and returns a element with the specified text and click handler. Functional Components: Functional components are defined as JavaScript functions and are typically used for presentational components that don't need to manage state or lifecycle methods. They are simpler and more lightweight compared to class components. Example of a Functional Component: // FunctionalComponent.js import React from 'react'; const FunctionalComponent = ({ name }) => { return Hello, {name}!; } export default FunctionalComponent; Class Components: Class components are defined as ES6 classes and can hold state and have access to lifecycle methods. They are used for more complex components that require state management and interaction with lifecycle events. Example of a Class Component: // ClassComponent.js import React, { Component } from 'react'; class ClassComponent extends Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( Count: {this.state.count} this.setState({ count: this.state.count + 1 })}> Increment PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 13 ); } } export default ClassComponent; Creating and Rendering Components Creating Components: To create a component in React, you define a JavaScript function or class and export it for use in other parts of your application. Components can take props as input and return JSX elements as output. Rendering Components: To render a component in a React application, you include the component's JSX tag in the render method of another component or directly in the JSX of your application. Example: // App.js import React from 'react'; import Button from './Button'; import FunctionalComponent from './FunctionalComponent'; import ClassComponent from './ClassComponent'; const App = () => { return ( My React App console.log('Button clicked')} text="Click Me" /> ); } export default App; In this example: The App component renders a heading ( ), a Button component, a FunctionalComponent , and a ClassComponent. Each component is imported and used within the JSX of the App component. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 14 You can build modular, reusable, and maintainable UIs b y creating and rendering components in this manner. Components allow you to encapsulate UI logic and behavior that make it easier to manage and scale your application. PROPS AND STATE Props and state are both fundamental concepts in React. They handle how data flows within and between components which are the building blocks of a React application. Props Function: Pass data down from parent components to child components. Read-only: Child components can access props but cannot modify them directly. Communication: Enables parent components to configure the behavior and appearance of their children. Example: Imagine a parent component for a product listing that passes details like name, price, and image as props to a child component that displays the product information. State Function: Manage data specific to a component that can change over time. Mutable: The component itself can update its state using the setState function. Reactivity: The component automatically re-renders when a state changes to reflect the updated data. Example: A counter component might use state to store the current count and update it when a button is clicked. Passing Data with Props In React, props (short for "properties") are used to pass data from a parent component to a child component. Props are immutable and are passed down from parent to child components, allowing for communication between components. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 15 Example of Passing Data with Props: // ParentComponent.js import React from 'react'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const name = "John"; return ( ); } export default ParentComponent; // ChildComponent.js import React from 'react'; const ChildComponent = (props) => { return Hello, {props.name}!; } export default ChildComponent; In this example: The ParentComponent passes the name prop to the ChildComponent. The ChildComponent receives the name prop and renders it within the JSX. STATE MANAGE MENT The state is used to manage component-specific data that may change over time. State is mutable and controlled by the component itself. When the state of a component changes the React automatically re-renders the component to reflect the updated state. Example of State Management in Class Component: // CounterComponent.js import React, { Component } from 'react'; class CounterComponent extends Component { constructor(props) { super(props); this.state = { count: 0 }; } PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 16 incrementCount = () => { this.setState({ count: this.state.count + 1 }); } render() { return ( Count: {this.state.count} Increment ); } } export default CounterComponent; In this example: The CounterComponent maintains a count state using this.state. The incrementCount method updates the count state when the button is clicked. The current value of count is displayed in the component's render method. Using Hook s for State Management Hooks are functions that allow functional components to use state and other React features without needing to use class components. The useState hook is used for managing state, and the useEffect hook is used for performing side effects in functional components. Example of Using useState Hook: // CounterComponent.js import React, { useState } from 'react'; const CounterComponent = () => { const [count, setCount] = useState(0); const incrementCount = () => { setCount(count + 1); } return ( Count: {count} Increment ); } PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 17 export default CounterComponent; In this example: The useState hook is used to declare a state variable count and a function setCount to update the state. The initial value of count is set to 0. When the button is clicked, the incrementCount function is called, updating the value of count. Example of Using useEffect Hook: // EffectComponent.js import React, { useState, useEffect } from 'react'; const EffectComponent = () => { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); const incrementCount = () => { setCount(count + 1); } return ( Count: {count} Increment ); } export default EffectComponent; In this example: The useEffect hook is used to perform a side effect when the component renders or when the count state changes. The effect sets the document title to include the current value of count. The effect is re-run whenever the count state changes due to the dependency array [count]. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 18 Using hooks like useState and useEffect the functional components in React can manage state and perform side effects that make them more powerful and expressive alternatives to class components for state management and lifecycle methods. LIFECYCLE METHODS The React lifecycle methods are special methods that are invoked at specific points in the lifecycle of a React component. These methods allow developers to perform actions such as setting up the component, fetching data, updating the UI, and cleaning up r esources. However, with the introduction of React Hooks, many lifecycle methods have been replaced by equivalent Hooks. Here, I'll discuss both class-based lifecycle methods and their equivalent Hooks. Class-based Lifecycle Methods: 1. constructor() : This method is called when a component is initialized. It is used for initializing state and binding event handlers. class MyComponent extends React.Component { constructor(props) { super(props); this.state = { data: [] }; this.handleClick = this.handleClick.bind(this); } } 2. componentDidMount() : This method is invoked immediately after a component is mounted (inserted into the DOM tree). It is commonly used to fetch data from an API or initialize third-party libraries. class MyComponent extends React.Component { componentDidMount() { fetch('https://api.example.com/data').then(response => response.json()).then(data => this.setState({ data })).catch(error => console.error('Error fetching data:', error)); } } PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 19 3. componentDidUpdate(prevProps, prevState) : This method is called after the component's state, or props have been updated. It is useful for performing side effects when the component re-renders. class MyComponent extends React.Component { componentDidUpdate(prevProps, prevState) { if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } } } 4. componentWillUnmount() : This method is invoked immediately before a component is unmounted and destroyed. It is used for cleanup tasks such as removing event listeners or canceling timers. class MyComponent extends React.Component { componentWillUnmount() { clearInterval(this.timerID); } } Equivalent React Hook s: 1. useEffect() : This Hook combines the functionality of componentDidMount , componentDidUpdate , and componentWillUnmount into a single function. It is used for handling side effects in functional components. import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState([]); useEffect(() => { fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data)).catch(error => console.error('Error fetching data:', error)); return () => { // Cleanup function clearInterval(timerID); }; }, []); // Empty dependency array means effect runs only once after initial render return {}; } PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 20 2. useLayoutEffect() : This Hook is similar to useEffect() , but it fires synchronously after all DOM mutations. It's useful for code that depends on the layout of the DOM. import React, { useState, useLayoutEffect } from 'react'; function MyComponent() { useLayoutEffect(() => { // DOM -related calculations return () => { // Cleanup function }; }, []); return {}; } The developers can effectively manage the lifecycle of their components by u nderstanding React lifecycle methods and their equivalent Hooks, handle side effects and ensure proper cleanup of resources that lead to more robust and maintainable React applications. ROUTING AND NAVIGATION Routing and Navigation is the process of managing the navigation and rendering different components based on the URL (Uniform Resource Locator) in a React application. React Router is the most popular library for handling routing and navigation in React applicati ons. It allows developers to define routes, map them to specific components, and handle navigation between different views of the application. Let's create a simple React application with routing and navigation using React Router. Step 1: Install React Router You can install React Router using npm or yarn: npm install react-router- dom Step 2: Set Up Routes Create a file named App.js and define the routes for your application using BrowserRouter and Route components from React Router. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 21 // App.js import React from 'react'; import { BrowserRouter, Route, Switch } from 'react -router-dom'; import Home from './components/Home'; import About from './components/About'; import Contact from './components/Contact'; const App = () => { return ( ); } export default App; In this example: We're using the BrowserRouter component as the top-level container for our routes. Inside the Switch component, we define multiple Route components, each mapping a URL path to a specific component. The exact attribute ensures that only the exact path is matched. Step 3: Create Components Create separate components for each route. // Home.js import React from 'react'; const Home = () => { return ( Home Welcome to the Home page ); } export default Home; // About.js import React from 'react'; PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 22 const About = () => { return ( About This is the About page ); } export default About; // Contact.js import React from 'react'; const Contact = () => { return ( Contact Contact us at: [email protected] ); } export default Contact; Step 4: Create Navigation Create navigation links using Link component from React Router. // Navigation.js import React from 'react'; import { Link } from 'react- router -dom'; const Navigation = () => { return ( Home About Contact ); } export default Navigation; Step 5: Use Navigation Include the Navigation component in your application to enable navigation between routes. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 23 // App.js import React from 'react'; import { BrowserRouter, Route, Routes } from 'react -router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Contact from './pages/Contact'; import Navigation from './pages/Navigation'; const App = () => { return ( ); } export default App; Step 6: Run the Application Run your React application and navigate between different routes using the navigation links. npm start You have a basic React application with routing and navigation using React Router. Users can navigate between different views of the application by clicking on the navigation links and each route renders the corresponding component. ADDING BOOTSTRAP You can use the react-bootstrap library to add Bootstrap to your React application which provides pre-built Bootstrap components as React components. Step 1: Install react-bootstrap PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 24 First, install the bootstrap library along with Bootstrap: npm install bootstrap@latest After installing the bootstrap library, it will be added on node module directory. To verify if it’s successfully installed the bootstrap, you can check the packaged.json where the bootstrap is added on dependencies. Step 2: To used bootstrap Import bootstrap to use on react app as an example below on App.js: //App.js import 'bootstrap/dist/css/bootstrap.min.css'; import ButtonComponent from './components/Button'; function App() { return ( ); } export default App; //Button.js import React from 'react'; function ButtonComponent() { return ( This is a Bootstrapnpm Button ); } export default ButtonComponent; In this example: ▪ The Button.js component defines a simple button with Bootstrap styling. ▪ It uses the className prop to apply multiple CSS classes: ▪ btn : This is a base class for Bootstrap buttons. ▪ btn- primary : This sets the button style to primary (blue) as defined by Bootstrap. ▪ btn- sm : This makes the button a small size.  PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 25 ▪ The text "This is a Bootstrap Button" is displayed within the button element. ▪ The App.js is component acts as the entry point for your React application. ▪ It imports the ButtonComponent from the components directory. ▪ The App function simply returns the ButtonComponent , rendering it within the application. SUMMARY React has become a dominant force in frontend development. It allows you to build dynamic and interactive user interfaces (UI) for web applications by breaking them down into reusable components. This makes development and maintenance more efficient. React uses a declarative approach, where you describe the desired UI state, and React efficiently handles updates. This, along with its virtual DOM, improves performance. A rich ecosystem of libraries and tools surrounds React, providing solutions for state management, styling, and testing, enabling developers to build complex web applications. Components are the fundamental building blocks. You can create reusable components that define how a UI element looks and behaves. These components are rendered on the screen by React. Props are like arguments passe d down from parent components to configure child components, while state is data managed within a component. Changes to the state trigger a re-render of the component and its children. Finally, React Router is a popular library for handling navigation within a React application. It allows you to define routes that map URLs to specific components, enabling seamless navigation within your single-page application. KEY TERMS Components Prop State React Router Conditional Rendering Lifecycle Methods Hooks Virtual DOM SPA Javascript API Responsive Design PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 26 POSTTEST Multiple Choice. Fill in the letter corresponding to your answer on space provided before the given number. _____1. Front-end development is mainly concerned with: B a. Server-side functionality and database interactions. b. The user interface and experience of a web application. c. Network security and data encryption. d. Developing web applications for different operating systems. _____2. Which of the following is NOT a core technology used in front -end development? C a. HTML b. JavaScript c. Python d. CSS _____3. What is the benefit of using a Responsive Design approach? B a. To create visually appealing and unique website aesthetics. b. To ensure websites adapt and display properly on different devices. c. To improve website loading speed and performance. d. To add complex animations and interactive features. _____4. What is the primary function of CSS preprocessors like Sass and LESS? B a. To add animations and interactivity to web pages. b. To extend the functionality of CSS by adding features like variables and mixins. c. To define the structure and content of a web page. d. To provide pre-written code and tools for building complex applications. _____5. React is a popular front-end library known for its: D a. Extensive use of server-side scripting for dynamic content. b. Focus on styling web pages and defining visual layouts. c. Ability to directly manipulate the browser's Document Object Model (DOM). d. Component-based architecture for building reusable UI elements. _____6. What is the primary advantage of using components? B a. They automatically enhance the visual appearance of the webpage. b. They allow you to break down the UI into reusable and manageable pieces of code. c. They directly manipulate the browser's DOM for faster performance. d. They require less JavaScript code compared to traditional HTML/CSS development. _____7. What is the main purpose of using a routing library like React Router in a React C application? a. To improve the loading speed of different sections within the application. b. To add animations and transitions between different views. c. To manage the navigation and display of different content based on the URL path. d. d. To simplify the process of writing JavaScript code for user interactions. PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 27 _____8. When creating a React component that represents a specific view or page, what is C the best practice for handling user navigation to other parts of the application? a. Directly manipulate the DOM to change the displayed content. b. Use conditional statements within the component based on the current URL. c. Utilize the Link component provided by React Router to define navigation links. d. Implement a custom navigation system using JavaScript event listeners. _____9. What is the primary difference between props and state? A a. Props are used for receiving data from a parent component, while state manages data specific to the component itself. b. Props are used for internal data management within a component, while state can be passed to child components. c. Props can be dynamically changed, while state remains static throughout the component's lifecycle. d. State is passed down to child components, while props are used for communication with parent components. _____10. When building a React component that displays a counter with an increment D button, which approach would be best for managing the counter value? a. Use a global variable to store the counter value and update it directly within the component. b. Define the counter value as a prop passed from a parent component. c. Implement a separate JavaScript function outside of React to handle the counter logic. d. Utilize the state management feature of React to store and update the counter value within the component itself. REF ERENCES Book s Campbell (2018). Web Design Introductory. Abante, M. et. al. (2015) Php with MYSQL: a web programming language Hommond, T. (2020) Introduction to Software Engineering 3G E-Learning (2020) Object Oriented Programming Vlasios, T. et. al. (2019) Internet of Things Olof, L. et. al. (2020) Cellular Internet of Things Online Resources "Tutorials Point," Tutorials Point India Private Limited, [Online]. Available: https://www.tutorialspoint.com/php/php_tutorial.pdf. [Accessed September 2023] PAMANTASAN N G CABUYAO |APPDEV AND EMERGING TECHN OLOGIES 28 "w3schools," W3Schools, 1999-2023. [Online]. Available: https://www.w3schools.com/kotlin/index.php. eJournal Subscription (https://link.gale.com/apps/menu?u= phpnc) Information Technology and Libraries Journal of Computer Science & Technology Electronic Journal of Computer Science and Information Technology (eJCSIT) eBook s Anthony, W (2022) Learn the Language of Coding 3G E-Learning (2020) Real-Time Embedded System Programming