Example with Vite:
================================
npm install -g create-react-app
npx create-react-app file-upload-app
cd file-upload-app
npm start
maxschwarzmueller https://github.com/academind/react-complete-guide-course-resources
PizzaStore: CartContext Modal Button
TicTacToe
Investment Calc:
Modal basic:
https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/07-adding-a-modal-cmp/src/components/ResultModal.jsx
Modal forwardRef:
https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/08-forwarding-refs/src/components/ResultModal.jsx
Section 8 Working with Refs and Portals
Demo project: Project Manager:
https://github.com/academind/react-complete-guide-course-resources/blob/main/code/09%20Practice%20Project%20-%20Project%20Management/10-finished/src/App.jsx
Demo project: Quiz app:
https://github.com/academind/react-complete-guide-course-resources/blob/main/code/13%20Demo%20Project%20-%20React%20Quiz/08-finished/src/App.jsx
Authentication: https://github.com/academind/react-complete-guide-course-resources/blob/main/code/22%20Authentication/09-finished/frontend/src/components/AuthForm.js
{data && data.errors && (
<ul>
{Object.values(data.errors).map((err) => (
<li key={err}>{err}</li>
))}
</ul>
)}
https://github.com/jonasschmedtmann/ultimate-react-course
https://react.new/ - code sandbox
VS Code extentions:
prettier, eslint, liveserver
Quokka - JavaScript and TypeScript playground in your editor.
1) we should never update the state in render logic
2) component will be re-rendered on:
-state change
-props change
-parent change
-
https://www.youtube.com/watch?v=i-hoSg8iRG0&t=231s
https://github.com/facebook/create-react-app
npx create-react-app my-app
cd my-app
npm start
https://react-bootstrap.github.io/getting-started/introduction/
npm install react-bootstrap bootstrap
https://www.pexels.com/
const [items, setItems] = useState([]);
function handleAddItems(item) {
setItems((items) => [...items, item]);
}
function handleDeleteItem(id) {
setItems((items) => items.filter((item) => item.id !== id));
}
function handleToggleItem(id) {
setItems((items) =>
items.map((item) =>
item.id === id ? { ...item, packed: !item.packed } : item
)
);
}
<PackingList
items={items}
onDeleteItem={handleDeleteItem}
onToggleItem={handleToggleItem}
onClearList={handleClearList}
/>
export default function PackingList({
items,
onDeleteItem,
onToggleItem,
onClearList,
}) {...}
<button onClick={() => onDeleteItem(item.id)}>❌</button>
https://i.pravatar.cc/
https://i.pravatar.cc/200
https://i.pravatar.cc/200?u=499476
https://jsonplaceholder.typicode.com/
https://api.adviceslip.com/
https://api.adviceslip.com/advice/1
https://www.omdbapi.com/apikey.aspx
const isWatched = watched.map((movie) => movie.imdbID).includes(selectedId);
const watchedUserRating = watched.find(
(movie) => movie.imdbID === selectedId
)?.userRating;
function handleDeleteWatched(id) {
setWatched((watched) => watched.filter((movie) => movie.imdbID !== id));
}
asdf
163 Initializing State With a Callback Lazy Initial State
localStorage.setItem("asdf",JSON.stringify(json));
const [asdf,setAsdf] = useEffect(function(){
return JSON.parse(localStorage.getItem("asdf");
});
localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));
const updateObject = () => {
setMyObject({
...myObject,
key2: 'updatedValue'
});
};const countRef = useRef(0);
useEffect(function(){
countRef.current++;
})
function getWeatherIcon(wmoCode) {
const icons = new Map([
[[0], "☀️"],
[[1], "🌤"],
[[2], "⛅️"],
[[3], "☁️"],
[[45, 48], "🌫"],
[[51, 56, 61, 66, 80], "🌦"],
[[53, 55, 63, 65, 57, 67, 81, 82], "🌧"],
[[71, 73, 75, 77, 85, 86], "🌨"],
[[95], "🌩"],
[[96, 99], "⛈"],
]);
const arr = [...icons.keys()].find((key) => key.includes(wmoCode));
if (!arr) return "NOT FOUND";
return icons.get(arr);
}
js: <script src="..." type="module"></script>
export let apikey="asdf"
import {apikey, somekey as newkey} from './props.js"
import * as props from "./props.js"
console.log(props.apikey)
import "img" from "./img/some.png"
<p className={`label ${ emailValid? 'valid' : 'invalid'}`}>email</p>
<p style={{color:'green', border:'solid'}}
import whateverName from './App.module.css'
<p className={whateverName.err}>Err</p>
className={`${whateverName.err}`}
const ChildComponent = forwardRef({ actual, ...otherProps },ref) => {
return (
<div>
{/* Pass other props to the input element */}
<input {...otherProps} ref={ref} />
{/* You can use the "actual" prop here */}
<p>Actual prop: {actual}</p>
</div>
);
});
npx create-next-app@13.4
npm run dev
npm run build #for prod
npm start
===============
npm create vite@latest
npm i(nstall) & npm run dev
