From 507b113ce9a3f1159a9d499e4aa632f6bc1ee34a Mon Sep 17 00:00:00 2001 From: michivonah Date: Fri, 18 Apr 2025 21:10:53 +0200 Subject: [PATCH] begin react foundations course & take notes --- docs/react/README.md | 186 ++++++++++++++++++++++++++++ react-foundations-course/react.html | 53 ++++++++ 2 files changed, 239 insertions(+) create mode 100644 docs/react/README.md create mode 100644 react-foundations-course/react.html diff --git a/docs/react/README.md b/docs/react/README.md new file mode 100644 index 0000000..13ac758 --- /dev/null +++ b/docs/react/README.md @@ -0,0 +1,186 @@ +# React +React is a descriptive way to define UI elements and things, which would produce repetive code in plain JS. + +React uses JSX is a extension of JavaScript. To render JSX a compiler like babel is required. + +React has some core concepts +- Components +- Props +- States + +React does manipulate the DOM via JS. Before you can do this, you have to define the app's root. This can be done like this: +```jsx +const app = document.getElementById("app"); +const root = ReactDOM.createRoot(app); +``` + +Now you can render HTML in the DOM: +```jsx +root.render(

Develop. Preview. Ship.

); +``` + +## Components +Components are reusable building blocks. + +React components are defined as a function which returns a DOM element. The name of react components are capitalized. To use a react component it needs to be in angel brackets <> like a HTML tag. + +Example component: +```jsx +function Header(){ + return (

Develop. Preview. Ship.

); +} +``` + +Usage of a component: +```jsx +root.render(
); +``` + +The trailing slash / before > is required for the component to be rendered. +React components can be nested inside each other. Example: +```jsx +function HomePage(){ + return ( +
+
+
+ ); +} +``` + +## Props +Props is a short form of properties. Props are inherited to children inside the hierarchy. +The ability to accept props is added via the parameter props to the component: +```jsx +function Component(props){ + // Definition of the component +} +``` + +The props are stored as an JS object. The content of the props can be access via object destruction inside the function parameters of a component. +```jsx +function Component({ title }){ + // Definition of the component +} +``` + +To use a property inside a component it has to be written in curly braces. Inside of curly braces normal JavaScript can be written and executed. Since a prop is just a JS variable you can access from inside the curly braces. +```jsx +function Component({ title }){ + return (

{title}

); +} +``` + +But its also possible to access a variable through the props object. +```jsx +function Component(props){ + return (

{props.title}

); +} +``` + +Normal JS like conditions & iterations can also be used inside of a component. +```jsx +function createTitle(title){ + if(title){ + return title; + } + else{ + return "Default createTitle"; + } +} + +function Header({ title }){ + return (

{createTitle(title)}

); +} +``` + +Its also possible to iterate through lists as following example shows: +```jsx +function HomePage(){ + const names = ['Max Meier', 'Josef Berchtold', 'Margrit Barmettler']; + + return ( +
+
    + {names.map((name) => ( +
  • {name}
    • + ))} +
+
+ ); +} +``` + +When iterating over an object the items should have a unique `key`, so they can be manipulated by React. +```jsx + +``` + +## States +Currently the page is very static and information is not saved. +To make a element interactive an event like `onClick` can be added. THe event names are `camelCase`. + +Example: +```jsx +function Component(){ + function handleClick(){ + console.log("increment like count"); + } + + return ( +
+ +
+ ); +} +``` + +Reacts has some functions that are called `hooks`. A `hook` adds some logic like a state to a component. A state is an information about an componennt which can change over time. Like the value of a toggle switch or a counter. The hook to save a state is named `useState()`. It can be access by using `React.useState()`. + +States are saved as an JS array containig of the values and a function for updating the current value. + +```jsx +const [likes, setLikes] = React.useState(); +``` + +Commonly the function is named with the prefix `set` followed by the name of the state. A default value can be set in the parentheses of `useState()`. + +```jsx +const [likes, setLikes] = React.useState(0); +``` + +The value of a state can afterwards be accessed via JS. +```jsx + +``` + +By calling the `set`-function the value of the state can be updated. +```jsx +setLikes(likes + 1); +``` + +full example of states +```jsx +function HomePage(){ + const [likes, setLikes] = React.useState(0); + + function handleClick(){ + setLikes(likes + 1); + } + + return ( +
+ +
+ ); +} +``` + + + +## Ressources +- [React Foundations course from Next.js](https://nextjs.org/learn/react-foundations) \ No newline at end of file diff --git a/react-foundations-course/react.html b/react-foundations-course/react.html new file mode 100644 index 0000000..8f865f0 --- /dev/null +++ b/react-foundations-course/react.html @@ -0,0 +1,53 @@ + + +
+ + + + + + \ No newline at end of file