React Basics - WeeK 3 By Meta - Navigation, Updates and assets
This resume highlights my accomplishments and learning outcomes from the React Basics Week 3 course
In this module we work with such topics:
1. Traditional versus SPA pages:
In a traditional web page, when a user requests the page, the server sends the complete HTML content, and the browser renders it. Any updates or interactions require a full page reload, resulting in a less dynamic and interactive experience. CSS styles are applied during the initial page load, and any changes in styles necessitate a page refresh (Figure 1).
Single Page Applications (SPAs) built with ReactJS follow a different lifecycle. When the user visits the app, the server sends a minimal HTML document along with JavaScript code. This code sets up the app and retrieves data from the server in JSON format (Figure 1). React uses a virtual DOM to efficiently update only the necessary parts of the UI without reloading the entire page. JSON data allows dynamic content updates without the need for a full refresh. CSS styles can be applied dynamically, providing a smoother user experience.
Figure 1: Traditional versus SPAs pages.
The SPA approach enhances interactivity, reduces server load, and results in faster navigation. Users can enjoy a seamless experience as they interact with the app, making it feel more like a native application rather than a traditional static web page. Additionally, SPAs can leverage client-side routing to handle page transitions without the need for additional server requests, further improving performance and user engagement. However, SPAs may require more initial loading time as they fetch JavaScript bundles, which is mitigated through code-splitting techniques. Overall, SPA with ReactJS and JSON brings modern web development to the forefront, delivering a more dynamic, interactive, and user-friendly experience.
2. Key Difference between React and HTML/CSS Navigation
HTML/CSS navigation (anchor tag) relies on traditional multi-page architecture, triggering full-page reloads when links are clicked. This approach is suitable for simple websites but can be slower and less efficient. React with React Router (Figure 2) creates single-page applications (SPAs), offering seamless navigation within the same page without full reloads. It utilizes a component-based approach, improving code organization, performance, and user experience, making it ideal for dynamic web applications.
Figure 2: Difference between React and HTML/CSS Navigation
3. Conditional Rendering
Conditional rendering in JavaScript is showed in Figure 3, for example. And in React, on the other hand, uses JSX to conditionally render components.
Figure 3: Conditional Rendering JavaScript versus React
4. Organizing Assets in React Projects (Images, Style Sheets, Fonts, Video, Audio)
In a React project, place assets (images, style sheets, fonts, video, audio) inside the "assets" folder within the "src" directory. Organize assets in respective subfolders for better management. In the Public folder we can put the images that the components will not have access, like logo icon. There are 3 differents types of using images in react (using import statement, using require function or providing a URL), like showed in the Figure 4:
Figure 4: Displaying images
Displaying videos in React can be done in several ways like through the HTML5 video element, setting the src attribute to the video URL. Another option is using third-party libraries like react-player, simplifying integration with various video sources and offering customization options(figure 5).
Figure 5: Displaying videos
If you are, for example, only planning to use videos from a site like YouTube, to reduce bundle size, you can use the import react-player/youtube(figure 6)
Figure 6: Re
duce bundle size using react-player/youtube5. Webpacks
Webpack is a JavaScript module bundler used to bundle, transform, and optimize various assets (including React components like react-player) for web applications. Webpack is responsible for managing dependencies, transpiling modern JavaScript code, and optimizing assets to improve the performance and loading times of web applications.
While both react-player and Webpack are commonly used in React projects, they serve different purposes. react-player focuses on providing a simple interface for media playback in React applications, while Webpack is a build tool that handles the bundling and optimization of assets to enhance the overall development process and user experience. Developers often use both together to build feature-rich and efficient React applications that include media playback functionality.
Conclusion:
This module covers topics like Traditional vs. SPA pages, React's advantages in navigation, conditional rendering, asset organization in React projects, and the role of Webpack. SPAs with ReactJS offer dynamic, interactive user experiences, reducing server load and improving performance. React's component-based approach enhances code organization and user experience. Asset organization and media display techniques in React are discussed, along with the usage of Webpack for bundling and optimizing assets. React's react-player aids media playback, while Webpack optimizes assets, resulting in efficient and feature-rich React applications.
Comments
Post a Comment