Week 02: React, Node, HTML ...semantics, semantics, semantics. 1 Agenda Prerequisites Creating a React project from a vite template React project structure and practices HTML5 revision & document structure Inline, Block elements Tables, Forms Meta tags Lighthouse, Inspect Documentation for WEB development Demo - dummy form for investing 2 Let's start! 3 Prerequisites You should have node and npm commands available. These commands are available on school Linux computers (nymfe, musa), so you can skip this step. When you work on your own computers: If you have not installed a Node.js manager yet, do so via nvm or fnm install pages. We advise you to install the manager of your choice under the Unix environment (Linux, MacOS, WSL). Windows has its own version of nvm - nvm-windows which is not maintained by the creators of nvm for Unix computers. We prefer you to work under WSL so both nvm/fnm will work fine there. If you have installed your Node.js manager (nvm/fnm) and the commands are not available, it might mean you have not installed Node yet, or your path has not been updated. Check the links above to see how to install the latest version depending on your Node.js manager. There are FAQ & troubleshooting pages for both. 4 Let's create a React app via the vite template npm create vite@latest seminar-02 --template react-ts or just: npm create vite@latest Where you can specify the underlying frontend technology & TypeScript support. 5 Inspect your Node project Check out package.json & included scripts Install dependencies included in your package.json via: npm i # or npm install Check out package-lock.json Check out the project strucure: index.html file src & public folders Check out where React is added injected onto the page 6 Run your React app npm run dev Possible discussion: How does it work? How do the files get in the browser? Now, try to change something on the page. What does HMR mean? Create a folder for pages/views and a folder for components? What's the difference between pages and components, when we represent them both as components? 7 JSX/TSX JavaScript(/TypeScript) XML (formally JavaScript/TypeScript syntax eXtension) - allows writing logic & code along with the underlying markup import { useState } from 'react' import './App.css' function App() { const [count, setCount] = useState(0); return ( <>

Vite + React

); } export default App; For the demo, we will need to quickly revise HTML. Ready? 8 HTML5 revision HTML = HyperText Markup Language Used for web documents, gives meaning to the content Not a programming language Latest specification of HTML - HTML5 Current standard New tags for semantic only (
,