In CSS modules, CSS class names and animation names are scoped locally by default. In React you can use the file naming conversion as [file name].module.css. This let the React and Webpack know that you are using CSS Modules.
Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.
Welcome to Issue #2 of The Codbix! This week: Improve productivity through incremental automation, The modern web’s underrated powerhouse, and Wallpapers by Smashing Magazine.
React and ReactDOM are two distinct libraries that are commonly used together in the development of web applications with React.
React is a JavaScript library focused on building user interfaces. It follows a declarative approach, where developers define what the UI should look like based on the current state of the application. React then efficiently updates and renders components as the state changes. Its design emphasizes flexibility and efficiency, making it a popular choice for developing both web and mobile applications.
ReactDOM, on the other hand, serves as a bridge between React and the DOM (Document Object Model). The DOM is a hierarchical structure representing the HTML content of a web page. ReactDOM provides a set of methods that enable React components to be rendered and updated within the DOM. It ensures that the user interface is synchronized with the underlying HTML structure.
In summary, React is a library for building user interfaces, while ReactDOM handles the interaction with the DOM, rendering React components onto the web page. Although they are often used together, they serve different purposes and can function independently of each other.
notes
Conditional Rendering
22 February 2023
Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.
&& operator
{ isYes && <A />}
? : operator
isYes ? Yes() : No()
In React, you control branching logic with JavaScript.
You can return a JSX expression conditionally with an if statement.
You can conditionally save some JSX to a variable and then include it inside other JSX by - using the curly braces.
In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />.
In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.
The shortcuts are common, but you don’t have to use them if you prefer plain if.
Lifting state up in react means moving data from a child component to some parent component either to use it there or pass it some other child component.
When you want to coordinate two components, move their state to their common parent.
Then pass the information down through props from their common parent.
Finally, pass the event handlers down so that the children can change the parent’s state.
It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).
notes
Palm tree
20 February 2023
Blue skies and Palm tree in the Summer.
Hidd, Bahrain
notes
Browser default actions
18 February 2023
There are many default browser actions:
mousedown – starts the selection (move the mouse to select).
click on <input type="checkbox"> – checks/unchecks the input.
submit – clicking an <input type="submit"> or hitting Enter inside a form field causes this event to happen, and the browser submits the form after it.
keydown – pressing a key may lead to adding a character into a field, or other actions.
contextmenu – the event happens on a right-click, the action is to show the browser context menu.
…there are more…
All the default actions can be prevented if we want to handle the event exclusively by JavaScript.
To prevent a default action – use either event.preventDefault() or return false. The second method works only for handlers assigned with on<event>.
The passive: true option of addEventListener tells the browser that the action is not going to be prevented. That’s useful for some mobile events, like touchstart and touchmove, to tell the browser that it should not wait for all handlers to finish before scrolling.
If the default action was prevented, the value of event.defaultPrevented becomes true, otherwise it’s false.
