6. Styling React Components

The section focuses on styling React components and applications, emphasizing that it is not a CSS course but an introduction to applying CSS within React. It outlines various options for styling, starting with Vanilla CSS, and then progressing to more advanced techniques. Key topics include:

The course will cover both static styles and dynamic, conditional styles. A starting project is provided for hands-on practice, which includes basic styling with Vanilla CSS. Participants will learn how to set up the project and see some initial styles applied, although some interactive elements like account creation and sign-in will not function yet. The next lecture will begin with applying styles using Vanilla CSS.

The text discusses styling options for React applications, particularly focusing on the use of CSS files. It explains that you can create a CSS file, such as an index.css, to define your styles using various selectors (element, ID, class), and then import this CSS file into your JavaScript files. Using a build tool like Vite, the CSS is dynamically injected into the webpage, which can be confirmed through the developer tools.

Additionally, it emphasizes that you are not limited to a single CSS file; you can create multiple CSS files for better organization. For instance, you can separate styles related to specific components, like a header.css for header-specific rules, and import this file in the corresponding component file (e.g., header.jsx). After making these changes, the page will maintain the same appearance as the styles are still injected correctly by Vite, resulting in multiple style tags in the head section of the webpage.

The lecture discusses the use of Vanilla CSS for styling React applications. Key advantages include the ease of importing CSS files into JSX, allowing collaboration between developers and designers without interference, and the ability to write standard CSS without special conventions. This separation of concerns enables different team members to work on components and styles independently. However, there are disadvantages, such as the necessity of knowing CSS to write it effectively and the potential for styling clashes due to the lack of component scoping in Vanilla CSS. The lecturer mentions that the latter issue will be explored in more detail in the next session.

The lecture discusses a key disadvantage of using Vanilla CSS: the lack of component-specific scoping for CSS rules. An example is provided with a Header.css file, where styles intended for a header affect paragraphs across different components, such as AuthInputs.jsx. When a paragraph is added in AuthInputs, it inherits styles from Header.css, demonstrating that CSS rules are applied globally rather than being restricted to the component they are imported into. This highlights the importance of understanding that CSS in Vanilla CSS is not scoped and is injected into the head of the document, affecting all applicable elements on the page. The speaker emphasizes reverting changes made during the demonstration to maintain intended styles.