Introduction to Frameworks & Tooling

[Audio] Good day, everyone. For this lesson, we are going to discuss Introduction to Frameworks and Tooling, with a particular focus on how modern JavaScript frameworks and libraries help developers build larger and more maintainable applications. We will begin by understanding what a framework is and why developers use frameworks instead of writing everything using plain JavaScript. We will then compare framework-based development with Vanilla JavaScript, and later focus on React. As we progress, we will discuss important React concepts such as components, props, state, JSX, useState, and useEffect. These concepts are important because modern web applications are rarely simple static pages. They are interactive systems where users click buttons, enter information, retrieve data, and expect the interface to respond immediately..

[Audio] At the end of this lesson, you should be able to define frameworks and explain their benefits, particularly in software development. You should also understand why Vanilla JavaScript, although powerful, can become difficult to manage when an application becomes large. Another important objective is to distinguish between developing an application using plain JavaScript and developing it using a framework or library. Finally, we want you to think critically about the effect of frameworks on code readability, performance, and developer experience or DX. These objectives are not only about memorizing definitions. As IT students, you should eventually be able to make a practical decision about whether a particular project should use plain JavaScript, a library such as React, or a larger framework..

[Audio] A framework is a structure or foundation that developers use to build software applications. Think of a framework like the framework of a building. When constructing a house, you do not necessarily begin by designing every structural component from raw materials. Instead, you follow an established structure that provides guidance regarding where different parts belong. Software frameworks work in a similar way. They provide developers with an organized structure, tools, and commonly needed functionality. According to the presentation, frameworks allow developers to focus more on business logic rather than repeatedly creating common functionality such as routing, state management, and UI rendering. Example Suppose we are developing an online enrollment system. We need pages for student registration, subjects, schedules, and payment. Without a framework, we may have to organize many JavaScript files and manually manage how the application moves from one section to another. A framework can provide an established way to organize these parts, allowing us to focus more on the actual enrollment functionality..

[Audio] There are several important characteristics of frameworks. First is structure, which provides developers with a clear project organization and guidelines. Second is Inversion of Control or IoC. This means that instead of the developer always controlling when a particular piece of code runs, the framework can determine when to call the developer's code. Third is reusable components, which allow common interface elements or functionality to be created once and used repeatedly. Fourth is the presence of built-in tools, such as tools for debugging, testing, routing, and API handling. Finally, frameworks improve efficiency because developers can follow established practices instead of solving the same problems repeatedly. Imagine that an application has twenty pages and every page needs the same navigation bar. Instead of creating twenty completely separate navigation implementations, a component-based framework allows us to create the navigation component once and reuse it..

[Audio] This examples of technologies commonly used in frontend and backend development. For frontend development, we have React, Angular, and Vue.js. React is technically classified as a JavaScript library, although it is commonly used within framework-based application development. Angular is a comprehensive frontend framework, while Vue.js is a progressive JavaScript framework. On the backend, examples include Express.js, which runs with Node.js, Django for Python, and Laravel for PHP. If we are creating a university student portal, React or Vue could be used to create the user interface. A backend such as Express.js could handle requests from the frontend, communicate with a database, and return information to the application..

[Audio] Using a framework makes development faster because it already has ready-made code, templates, and tools. Instead of building everything from scratch, developers just adjust or add what they need. This saves time, reduces effort, and speeds up the whole software development process. One of the biggest advantages of a framework is speed. Frameworks provide prebuilt code, templates, widgets, APIs, and reusable resources. This means developers do not have to create every functionality from the beginning. Instead, they can customize existing structures and add project-specific code. This reduces development effort and helps accelerate the software development life cycle or SDLC. The important idea here is "do not reinvent the wheel." If thousands of developers have already solved a common problem, a framework can provide a standardized way to address it..

[Audio] Vanilla JavaScript means using plain JavaScript without additional libraries or frameworks. It is the native JavaScript that browsers understand directly. When we use Vanilla JS, we are not using React, Angular, Vue, jQuery, or another external tool. This is actually a very important concept for students. Learning frameworks does not replace the importance of understanding JavaScript itself. In fact, developers who understand JavaScript fundamentals generally find it easier to understand frameworks because frameworks are built around programming concepts such as functions, objects, variables, events, asynchronous operations, and modules..

[Audio] Vanilla JavaScript has several important characteristics. It has no dependencies, meaning you do not need to install an external framework or library simply to execute basic JavaScript. It is also lightweight because browsers can execute JavaScript directly. Another characteristic is full control. Developers manually handle DOM manipulation, event handling, and data management. Finally, browser support is naturally strong because JavaScript is directly supported by modern web browsers. The advantage of this approach is flexibility. However, the same flexibility can become a disadvantage when applications become very large because the developer is responsible for organizing almost everything..

[Audio] Vanilla JavaScript is excellent for small applications, simple websites, demonstrations, and learning programming fundamentals. However, as the project becomes larger, managing everything manually becomes increasingly difficult. Developers may end up with many JavaScript files, repeated code, numerous event handlers, and complicated DOM manipulation. The presentation emphasizes that Vanilla JS is powerful for small tasks but can become difficult to manage in large applications. Example Consider a simple calculator. Vanilla JavaScript is more than enough. But imagine developing Facebook-like social media software containing profiles, messaging, notifications, posts, comments, authentication, and real-time updates. Managing all of these manually can become complicated. This is where structured tools such as React become useful..

[Audio] One major benefit of frameworks is structure and organization. In a large Vanilla JS project, functions and event handlers may become scattered across multiple files. As the project grows, it becomes difficult for developers to know where a particular piece of functionality belongs. Frameworks provide conventions that help developers organize the application. React, for example, encourages developers to divide the interface into components. Example: A university website might have components such as: Header Navigation StudentProfile CourseList Footer Each component has a specific responsibility. This makes the application easier to understand and maintain..

[Audio] Another important advantage is reusability. In Vanilla JavaScript, developers may repeatedly write similar DOM manipulation logic in different places. Frameworks encourage reusable components. A component can be created once and then reused throughout the application. Example: Suppose an application uses a standard button design throughout the entire system. Instead of manually creating the button structure on every page, we can create a reusable Button component. Whenever the application needs a button, we use that component and provide the necessary information, such as its text or action..

[Audio] A major advantage of modern frameworks is reactivity and state management. In traditional Vanilla JavaScript, when data changes, the developer may need to manually find the corresponding DOM elements and update them. React and other frameworks provide mechanisms where changes in application data can cause the interface to update automatically. Example: Consider a shopping cart. If a user adds a product, the quantity displayed in the cart should change. With a reactive framework, changing the state of the application can cause the relevant interface to update without manually manipulating every affected DOM element..

[Audio] Frameworks also provide access to a large ecosystem and community. In a Vanilla JS project, developers may need to create many utilities themselves. Framework ecosystems provide libraries, plugins, tools, documentation, and community solutions for common problems such as routing, form validation, API communication, authentication, and testing. However, students should also understand that having many packages can create complexity. Developers must choose reliable packages, understand dependencies, and keep them updated..

[Audio] The final framework benefit discussed here is Developer Experience or DX. Good developer tools can make programming more efficient and enjoyable. Debugging tools, hot reloading, TypeScript integration, and framework-specific development tools can help developers identify errors and see changes quickly. For example, when developing a web application, it is convenient to modify code and immediately see the result in the browser without manually rebuilding the entire application every time. This short feedback cycle helps developers work faster..

[Audio] This introduces three important JavaScript technologies: React, Vue.js, and Node.js. React is a JavaScript library used to build user interfaces and is known for component-based development and the Virtual DOM. Vue.js is a progressive JavaScript framework designed for building user interfaces and is also component-based. Node.js is different because it is not a frontend framework. It is a JavaScript runtime environment that allows JavaScript to execute outside the browser. A useful way to remember the distinction is: React and Vue are commonly used for interfaces, while Node.js provides an environment for running JavaScript on the server..

[Audio] React or Vue can manage the frontend of an application, including the interface and client-side interactions. Node.js can be used on the backend to handle requests, communicate with databases, and provide APIs. Together, these technologies can be used to create full-stack JavaScript applications. Example: Consider an online bookstore. React could display the product catalog and shopping cart. When a customer clicks "Buy," React sends a request to the backend. Node.js can process that request, communicate with the database, and return the appropriate response. React then updates the interface..

[Audio] The React section focuses on understanding React, setting up a React development environment, learning JSX, understanding functional and class components, and learning how React renders elements. These concepts form the foundation for React development. Before students build complex React applications, they need to understand how components are created, how information is passed between components, how data changes are managed, and how React translates component code into the user interface..

Learning Objectives. At the end of the lesson, the learners should be able to: Explain what React is and identify its key benefits for modern web development. Set up the development environment using Node.js, npm, and build tools such as Vite or Create React App (CRA). Demonstrate understanding of JSX syntax and its role in writing React components. Differentiate between functional components and class components, including their use cases. Illustrate how to render elements effectively within a React application..

[Audio] React is a JavaScript library for building user interfaces. This explains that React was created by Jordan Walke, open-sourced in 2013, and became one of the widely used tools for frontend development. The most important concept to remember is that React encourages developers to construct an interface from components. Instead of thinking about a webpage as one huge document, we divide it into smaller reusable pieces. On the example, Welcome is a React functional component. It returns JSX that represents part of the user interface..

[Audio] React provides several advantages. Its component-based architecture encourages reusable code. Its declarative UI allows developers to describe what the interface should look like based on the current data. React also uses a Virtual DOM mechanism to efficiently determine which parts of the interface need updating. One-way data flow helps make the movement of information more predictable. Finally, React has a large ecosystem and community. The key idea behind declarative programming is that we describe the desired result rather than manually instructing the browser about every individual DOM operation..

[Audio] The Document Object Model or DOM represents the HTML structure of a webpage as a tree. When JavaScript changes an element, the browser has to locate the element, update it, and potentially perform layout and repaint operations..

[Audio] React uses a lightweight representation of the interface called the Virtual DOM. Instead of immediately changing the browser's DOM for every change, React can compare the new Virtual DOM representation with the previous one. This comparison is commonly described as diffing, and React then performs the necessary updates to the real DOM through its reconciliation process. Imagine that you have a printed report containing 100 lines, but only one sentence has changed. Instead of printing the entire report again, you identify the changed sentence and replace only that part. This illustrates the basic idea behind efficient UI updates..

[Audio] To begin React development, the presentation identifies three important requirements: Node.js, a code editor such as Visual Studio Code, and a modern web browser such as Chrome, Firefox, or Edge. Node.js is important because it provides the environment needed to run development tools, while npm, which comes with Node.js, is used to manage packages. You should understand that React runs in the browser, but the development process requires tools such as Node.js and npm to install dependencies and run development servers..

[Audio] These demonstrate the setup process shown in the presentation. The important concept is that React development involves creating a project, installing the necessary dependencies, and running the development environment. When students perform this process, they should pay attention to the terminal commands, the project folder structure, and the files generated by the development tool. A typical modern React workflow uses a tool such as Vite to create a development project. The purpose of the tooling is to automate many tasks that would otherwise have to be performed manually. Students should also understand the distinction between development tools and the actual application code. Tools help us create, test, bundle, and serve the application, while React provides the programming model for building the interface..

[Audio] The purpose of the tooling is to automate many tasks that would otherwise have to be performed manually. Students should also understand the distinction between development tools and the actual application code..

[Audio] Tools help us create, test, bundle, and serve the application, while React provides the programming model for building the interface..

[Audio] Props, short for properties, are read-only values passed from a parent component to a child component. The presentation compares props to function parameters, which is a very useful analogy. When a function receives an argument, the function can use that information to perform its task. Similarly, a React component receives props and uses them to determine what it should display. Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables..

[Audio] destructuring, which is a JavaScript feature that allows us to extract values from objects or arrays into separate variables. This is especially useful in React because props are represented as an object. You have an object person with 3 properties: firstName, lastName, and age. Normally, to get the first name you would write: let firstName = person.firstName; But with destructuring, you can pull out the value directly: let = person;.

[Audio] Destructuring is just a shortcut to extract object properties into variables without typing.

[Audio] useState lets you create a state variable in a functional component. A state variable is just a value that can change over time (like a counter, text input, or toggle). Whenever the state changes, React re-renders the component to show the updated value. useState is a React Hook that allows functional components to maintain state. State refers to information that can change during the lifetime of a component. Examples include a counter value, text entered into a form, whether a menu is open, or whether a user is logged in. When state changes, React re-renders the component so the interface can reflect the new value..

[Audio] The easiest way to understand useState is to think about information that changes while the user interacts with the application. Consider a counter. Initially, the counter may contain zero. When the user clicks a button, the value changes to one, then two, then three. The state variable stores the current value, while the update function tells React that the value should change..

[Audio] useEffect is another React Hook used to handle side effects in functional components. A side effect is an operation that interacts with something outside the immediate rendering process of the component. Examples include fetching information from an API, interacting with local storage, subscribing to events, and creating timers or intervals..

[Audio] For example, if a component needs to retrieve student information from a server after it is rendered, useEffect can be used to perform that operation..

[Audio] JSX, or JavaScript XML, is a syntax extension that allows developers to write code that looks similar to HTML inside JavaScript. It makes React components easier to read because the structure of the user interface can be expressed directly within the component code. JSX is not literally HTML; it is transformed into JavaScript that React can use to create the interface..

[Audio] One important JSX rule is that a component generally needs to return a single root element. This means we cannot simply return multiple unrelated elements at the same level without wrapping them appropriately..

[Audio] JSX has several rules that are different from ordinary HTML. For example, instead of writing class, React JSX uses className. JavaScript expressions can be inserted using curly braces {}. JSX attributes also commonly use camelCase, such as onClick and tabIndex..

[Audio] A functional component is simply a JavaScript function that accepts props and returns JSX. Modern React development commonly uses functional components because they are relatively simple and work with Hooks such as useState and useEffect. Functional components are especially useful because they provide a clean way to divide an interface into small reusable units..

[Audio] A class component is an ES6 class that extends React.Component. Class components use this.props to access props and this.state to manage state. They can also use lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. ES6 modernized JavaScript and made it cleaner, easier to write, and more powerful..

[Audio] The comparison shows the main differences between functional and class components. Functional components use JavaScript functions, access props directly, and use Hooks such as useState and useEffect. Class components use ES6 classes, access props through this.props, manage state through this.state and setState(), and use lifecycle methods. The presentation identifies functional components as recommended for most modern applications, while class components remain relevant when working with legacy or older codebases. As students, you should not think that class components are "wrong." They are an older but legitimate approach to React development. The important skill is being able to read and understand both styles, while knowing that modern React development generally emphasizes functional components and Hooks..