Tech World Software School

4:32

Boldening and Emphasizing Inline Text in HTML with Strong, Em, b, i

The lecture goes over some HTML tags to mark some inline text in a particular way. You learn to mark text as being of strong importance, which by default visually appears in bold letters. You learn to emphasize text, which by default visually appears in slanted italics font style. The lesson also mentions how the bold tag and the idiomatic text tag were also used to visually bolden and italicize text. However today it is preferred to use the semantic tags strong and em due to their not necessarily being tied to a visual representation that could be changed. Documents can be read and understood semantically, the visual aspect being isolated from the meaning of the tags.

18 days ago 2 views 1 comment

Introduction to HTML and How to Write a Paragraph

4:48

Introduction to CSS - Software School (2024-02-29)

41:27

2:28

Moving definition of React.js Box Component to a Separate File

Learn to isolate a React.js component in a separate file, a common practice especially if your codebase is large and you want to separate the concerns and single out responsibility. In particular, take the colored Box component and move its definition to its own file Box.js instead of defining it in the same file as the App component.

24 days ago 10 views

11:00

React.js Box Component Color Controlled via Text Field

Continuing from the example of using the library React.js to build user interfaces. In this particular situation, a colored Box component whose color is controlled via a property. Now the goal is to change the color of a Box component using a text field. Using the hook useState, you can keep track of another state variable to hold the color name. That value is tied to an input of attribute type having the value text. That input is placed next to the existing button to change the color. You learn about controlled components, those whose value and onChange props are defined explicitly and controlled using a React state value. A function is defined to handle the changing of the text. That is, when the user types into the text field, the onChange handler function is called to update the value in state. An event handler function has a parameter called event that includes details about who triggered the event. In particular, you can use the event target to access the input element so that you can retrieve the value that was typed by the user. You can call on the mutate function for the color name to update its value after the user types into the text field. Then, the click handler for the button to change color is modified to set the Box component color prop to the value that was typed into the text field for the color name. That is, the click of the button takes the state value for color name and uses that as the prop passed to the Box component. The lesson also briefly mentions how in the past React.js components used to be mostly written with classes instead of functions. But that paradigm has since been changed and writing functional components is more encouraged now. Questions about the order of JavaScript code statements are also addressed, like the definition of a function inside a function and the order the functions are defined.

25 days ago 11 views 1 comment

11:54

Changing React.js Box Component Color with a Click While Keeping Track of State with Hook Private

Continuing the example of colored Box components in React.js, the lesson explains how to listen to and handle click events. More specifically the goal is to click a button to change the color of an existing box. You are introduced to the concept of state using the useState hook to keep track of a color name. See how you assign the return value of the useState hook to two variables created via destructuring of an array. One variable to access the state value and another to mutate (modify) that state value. When the React state changes, the component renders anew. That is, the function that defines the component is called again and if any values have changed from a previous render, they will be reflected in the updated document object model (DOM) for the web application.

30 days ago 4 views

Creating a custom Box component with React.js

9:06

14:10

Introduction to React.js and JSX

A lesson for beginners that introduces the library React.js that is used to build user interfaces (UI). It's part of frontend development in the browser, although learning the way of writing React can also translate to other platforms such as mobile with React Native and virtual reality with React VR. CodeSandbox is leveraged as the development environment, although other web-based alternatives are also available. You can also develop locally, generating the project with a tool like create-react-app. Writing an HTML-like pattern within JavaScript is also introduced. JSX transpilation is briefly explained using the Babel website's Try it out feature. The lesson goes on teaching how to change the view that is rendered by the React component. You learn to return multiple things from a component function using a Fragment. Finally, you briefly see, using the browser Developer Tools (DevTools for short), how the React.js application is injected in a lone, empty div element whose id is root.

1 month ago 10 views 1 comment

Introduction to HTML (including Forms) - Software School (2024-02-22)

37:26

Introduction to React frontend library - Software School (2024-02-15)

48:24