initial

joplin notion extension/Web Development/React/Tips/Change parameters of URL without refreshing it.md

@@ -0,0 +1,23 @@
+Change parameters of URL without refreshing it
+
+```jsx
+const changeURLParams = (newValue) => {
+  const newURL = `${window.location.pathname}${newValue}`;
+
+  window.history.pushState({ path: newURL }, "", newURL);
+};
+```
+
+Change queries of URL without refreshing it
+
+```jsx
+const changeQueryParams = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  urlParams.set('queryParamName', 'newValue');
+
+  const newURL = `${window.location.pathname}?${urlParams.toString()}`;
+
+  window.history.pushState({ path: newURL }, '', newURL);
+};
+
+```

joplin notion extension/Web Development/React/Tips/Props.children.md

@@ -0,0 +1,38 @@
+Props.children
+
+
+
+    My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.
+
+    A simple example:
+
+    Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children
+```jsx
+const Picture = (props) => {
+  return (
+    <div>
+      <img src={props.src}/>
+      {props.children}
+    </div>
+  )
+}
+```
+    This component contains an <img> that is receiving some props and then it is displaying {props.children}.
+
+    Whenever this component is invoked, {props.children} will also be displayed and this is just a reference to what is between the opening and closing tags of the component.
+
+```jsx
+//App.js
+render () {
+  return (
+    <div className='container'>
+      <Picture key={picture.id} src={picture.src}>
+          //what is placed here is passed as props.children  
+      </Picture>
+    </div>
+  )
+}
+```
+    Instead of invoking the component with a self-closing tag <Picture /> if you invoke it with full opening and closing tags <Picture> </Picture> you can then place more code between it.
+
+    This de-couples the <Picture> component from its content and makes it more reusable.

joplin notion extension/Web Development/React/Tips/ternary operator for routing.md

@@ -0,0 +1,25 @@
+ternary operator for routing
+
+When using `{}`  for js expression make sure to wrap in under any component or element whether it is empty like `<> </>`
+
+```jsx
+
+const [route,setRoute]=useState('home')
+return (
+    <>
+      {route === "home" ? (
+        <div className="App">
+          <Nav />
+          <Article
+            files={files}
+            setFiles={setFiles}
+            category={category}
+            setCategory={setCategory}
+          />
+        </div>
+      ) : (
+        <Output />
+      )}
+    </>
+  );
+```