Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pktcodes/react-basics-v2
React Fundamentals
https://github.com/pktcodes/react-basics-v2
anonymous-functions children-props components create-react-app css es6-modules events html javascript john-smilga jsx key-props prop-drilling props react
Last synced: about 1 month ago
JSON representation
React Fundamentals
- Host: GitHub
- URL: https://github.com/pktcodes/react-basics-v2
- Owner: pktcodes
- Created: 2023-06-12T05:21:32.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-06T03:32:38.000Z (over 1 year ago)
- Last Synced: 2024-08-12T23:21:33.995Z (4 months ago)
- Topics: anonymous-functions, children-props, components, create-react-app, css, es6-modules, events, html, javascript, john-smilga, jsx, key-props, prop-drilling, props, react
- Language: HTML
- Homepage: https://react-basics-v2-prod.netlify.app/
- Size: 308 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Fundamentals
> PROD [Live] : https://react-basics-v2-prod.netlify.app
To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm run dev` to start up the development server on default port 5173.
#### Languages
HTML, CSS, JavaScript, ECMAScript, React
#### Deployment / Hosting
Netlify
## Notes
#### Folder Structure
- node_modules
Contains all dependencies required by the app. Main dependencies also listed in package.json
- public
Contains static assets including index.html (page template)
- index.html
- title
- fonts
- css
- favicon
- id="root" - our entire app
- src
In simplest form it's the brain of our app. This is where we will do all of our work. src/index.js is the JavaScript entry point.
- .gitignore
Specifies which files source control (Git) should ignore
- package.json
Every Node.js project has a package.json and it contains info about our project, for example list of dependencies and scripts
- package-lock.json
A snapshot of the entire dependency tree
- README
The markdown file where you can share more info about the project for example build instructions and summary
- zoom 175%
#### Remove Boilerplate
- remove src folder
- create src folder
- create index.js inside src
- toggle sidebar CMD + B
- shortcuts settings/keyboard shortcuts
#### First Component
```js
function Greeting() {
return
My First Component
;
}
// arrow function also works
const Greeting = () => {
return
My First Component
;
};
```
- starts with capital letter
- must return JSX (html)
- always close tag
##### Typical Component
```js
// imports or logic
const Greeting = () => {
return
My First Component
;
};
export default Greeting;
```
##### Root Component (only one)
index.js
```js
import React from "react";
import ReactDOM from "react-dom/client";
function Greeting() {
return
My First Component
;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();
```
#### Possible Bug
If for some reason you still have this error in the terminal
```
Module not found: Error: Can't resolve 'path/index.js'
```
Just restart the server
- CTRL + C (stop the server)
- "npm start" (start the dev server)
#### Extensions and settings.json
- Auto Rename Tag
- Highlight Matching Tag
- customize in settings.json
- Prettier
- format on save
- format on paste
- Default Formatter (Prettier - Code formatter)
settings.json
```json
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.singleQuote": true,
"prettier.semi": false,
```
- Emmet
settings.json
```json
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
```
- ES7 Snippets
- rafce (arrow func with export)
- rfce (regular func with export )
- same as the file name
- react auto import
- uncheck
- React Snippets › Settings: Import React On Top
#### First Component in Detail
- capital letter
- must return something
- JSX syntax (return html)
- to make our lives easier
- calling function under the hood
index.js
```js
const Greeting = () => {
return React.createElement("h2", {}, "hello world");
};
```
```js
function Greeting() {
return (
hello world
);
}
const Greeting = () => {
return React.createElement(
"div",
{},
React.createElement("h2", {}, "hello world")
);
};
```
#### JSX Rules
- return single element (one parent element)
- semantics section/article
- Fragment - let's us group elements without adding extra nodes
```js
return ...rest of the return;
// shorthand
return <>...rest of the return>;
```
- camelCase property naming convention
```js
return (
click me
Name
)
// in html
click me
Name
```
- className instead of class
```js
return
hello;
```
- close every element
```js
return ![]()
;
// or
return ;
```
- formatting
- opening tag in the same line as return or ()
```js
function Greeting() {
return (
<>
hello world
>
);
}
```
#### Nest Components
```js
function Greeting() {
return (
);
}
const Person = () =>
john doe
;
const Message = () => {
return this is my message
;
};
```
#### React Developer Tools
- top right corner
- more tools/extensions
- open chrome web store
#### Book List
- setup structure
```js
import React from "react";
import ReactDOM from "react-dom/client";
function BookList() {
return (
);
}
const Book = () => {
return (
);
};
const Image = () =>
image placeholder
;
const Title = () => {
return Book Title
;
};
const Author = () => Author
;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();
```
- in search engine type - 'amazon best selling books'
[Amazon Best Sellers](https://www.amazon.com/Best-Sellers-Books/zgbs/books/)
- DON'T NEED TO BUY ANYTHING !!!
- NOT AN AFFILIATE LINK !!!!
- choose a book
- copy image, title and author
```js
import React from "react";
import ReactDOM from "react-dom/client";
function BookList() {
return (
);
}
const Book = () => {
return (
);
};
const Image = () => (
);
const Title = () => {
return
Interesting Facts For Curious Minds
;
};
const Author = () => Jordan Moore
;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();
```
#### CSS
- create index.css in src
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: #f1f5f8;
color: #222;
}
```
- import file and add classes
```js
import "./index.css";
function BookList() {
return (
);
}
const Book = () => {
return (
);
};
```
- complete css
```css
.booklist {
width: 90vw;
max-width: 1170px;
margin: 5rem auto;
display: grid;
gap: 2rem;
}
@media screen and (min-width: 768px) {
.booklist {
grid-template-columns: repeat(3, 1fr);
}
}
.book {
background: #fff;
border-radius: 1rem;
padding: 2rem;
text-align: center;
}
.book img {
width: 100%;
object-fit: cover;
}
.book h2 {
margin-top: 1rem;
font-size: 1rem;
}
```
#### Local Images (Public Folder)
- Optional Video !!!
- external images (hosted on different server) - just need an url
- local images (public folder) - less performant
- local images (src folder) - better solution for assets,
since under the hood they get optimized.
- save image (Save Image As....)
- create images folder in public
- copy/paste image
- rename (optional)
- replace url in the src - './images/imageName.extension'
- './' because assets are on the same server
```js
const Image = () => (
);
```
- whatever assets we place in public - instantly available
- domain(localhost)/asset
#### JSX - CSS (inline styles)
- style prop
- {} in JSX means going back to JS Land
- value is an object with key/value pairs - capitalized and with ''
```js
const Author = () => (
Jordan Moore
);
```
- css rules still apply (inline vs external css)
```css
.book h4 {
/* won't work */
color: red;
/* will work */
letter-spacing: 2px;
}
```
- external libraries use inline css,
so if you want to make some changes,
reference the library docs and elements tab
- alternative option
```js
const Author = () => {
const inlineHeadingStyles = {
color: "#617d98",
fontSize: "0.75rem",
marginTop: "0.5rem",
};
return
Jordan Moore
;
};
```
- FOR THE MOST PART, MULTIPLE APPROACHES AVAILABLE !!!
- AS LONG AS THE RESULT IS THE SAME, REALLY COMES DOWN TO PREFERENCE !!!!
#### JSX - Javascript
- refactor to single book component (personal preference)
- remove inline css
```js
const Book = () => {
return (
Interesting Facts For Curious Minds
Jordan Moore
);
};
```
```css
.book h4 {
color: #617d98;
font-size: 0.75rem;
margin-top: 0.5rem;
letter-spacing: 2px;
}
```
- {} in JSX means going back to JS Land
- value inside must be an expression (return value),
can't be a statement
```js
const author = "Jordan Moore";
const Book = () => {
const title = "Interesting Facts For Curious Mindssssss";
return (
{title}
{author.toUpperCase()}
{/* {let x = 6}
*/}
{6 + 6}
);
};
```
- toggle line comment Edit/Toggle Line Comment
#### Props - Initial Setup
- refactor/clean up
```js
const author = "Jordan Moore";
const title = "Interesting Facts For Curious Minds";
const img = "./images/book-1.jpg";
function BookList() {
return (
);
}
const Book = () => {
return (
{title}
{author}
);
};
```
```js
// parameters
const someFunc = (param1, param2) => {
console.log(param1, param2);
};
// arguments
someFunc("job", "developer");
```
```js
const Book = (props) => {
console.log(props);
return (
{title}
{author}
{console.log(props)}
);
};
```
- props object, convention to call props, 'shakeAndBake' is an excellent alternative
- pass as key/value pairs
- if the prop exists it will return value, otherwise no value
```js
function BookList() {
return (
);
}
const Book = (props) => {
console.log(props);
return (
{title}
{author}
{props.job}
{props.title}
{props.number}
);
};
```
```js
function BookList() {
return (
);
}
const Book = (props) => {
console.log(props);
return (
{props.title}
{props.author}
);
};
```
#### Props - Somewhat Dynamic Setup
- setup an object
- refactor vars to properties
- copy/paste and rename
- get values for second book
- setup props
```js
const firstBook = {
author: "Jordan Moore",
title: "Interesting Facts For Curious Minds",
img: "./images/book-1.jpg",
};
const secondBook = {
author: "James Clear",
title: "Atomic Habits",
img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL900_SR900,600_.jpg",
};
function BookList() {
return (
);
}
const Book = (props) => {
console.log(props);
return (
{props.title}
{props.author}
);
};
```
#### Access Props - Multiple Approaches
- there is no right or wrong - again preference !!!
- Destructuring (object)
[JS Nuggets - Destructuring (object)](https://www.youtube.com/watch?v=i4vhNKihfto&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ&index=8&t=1s)
- destructuring in Vanilla JS
- saves time/typing
- pull out the properties
- don't need to reference object anymore
```js
const someObject = {
name: "john",
job: "developer",
location: "florida",
};
console.log(someObject.name);
const { name, job } = someObject;
console.log(job);
```
- no need for all the props.propName
- destructure inside component
```js
const Book = (props) => {
const { img, title, author } = props;
return (
{title}
{author}
);
};
```
- destructure in function parameters (in our case props)
- if you have console.log(props) - it won't be defined
```js
const Book = ({ img, title, author }) => {
return (
{title}
{author}
);
};
```
#### Children Prop
- everything we render between component tags
- during the course we will mostly use it Context API
- special prop, has to be "children"
- can place anywhere in JSX
```js
function BookList() {
return (
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque
repudiandae inventore eos qui animi sed iusto alias eius ea sapiente.
click me
);
}
const Book = ({ img, title, author, children }) => {
// rest of the logic
};
const Book = (props) => {
const { img, title, author, children } = props;
console.log(props);
return (
{title}
{author}
{children}
);
};
```
- optional
```css
@media screen and (min-width: 768px) {
.booklist {
grid-template-columns: repeat(3, 1fr);
align-items: start;
}
}
.book p {
margin: 1rem 0 0.5rem;
}
```
#### Simple List
- [Javascript Nuggets - Map ](https://www.youtube.com/watch?v=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ&index=1)
- refactor
```js
const books = [
{
author: "Jordan Moore",
title: "Interesting Facts For Curious Minds",
img: "./images/book-1.jpg",
},
{
author: "James Clear",
title: "Atomic Habits",
img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL900_SR900,600_.jpg",
},
];
function BookList() {
return ;
}
const Book = (props) => {
const { img, title, author } = props;
return (
{title}
{author}
);
};
```
- can't render objects in React
```js
function BookList() {
return {books};
}
```
- map - creates a new array from calling a function for every array element.
```js
const names = ["john", "peter", "susan"];
const newNames = names.map((name) => {
console.log(name);
return
{name}
;
});
function BookList() {
return {newNames};
}
```
#### Proper List
- remove names and newNames
```js
function BookList() {
return (
{books.map((book) => {
console.log(book);
// return 'hello';
return (
{book.title}
);
})}
);
}
```
- render component
- pass properties one by one
```js
function BookList() {
return (
{books.map((book) => {
console.log(book);
const { img, title, author } = book;
return ;
})}
);
}
```
#### Key Prop
- typically it's going to be id
```js
const books = [
{
author: "Jordan Moore",
title: "Interesting Facts For Curious Minds",
img: "./images/book-1.jpg",
id: 1,
},
{
author: "James Clear",
title: "Atomic Habits",
img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL900_SR900,600_.jpg",
id: 2,
},
];
function BookList() {
return (
{books.map((book) => {
console.log(book);
const { img, title, author, id } = book;
return ;
})}
);
}
```
- you will see index,but it's not advised if the list is changing
```js
function BookList() {
return (
{books.map((book, index) => {
console.log(book);
const { img, title, author, id } = book;
return ;
})}
);
}
```
#### Pass The Entire Object
- render component
- pass entire object
- Destructuring (object)
[JS Nuggets - Destructuring (object)](https://www.youtube.com/watch?v=i4vhNKihfto&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ&index=8&t=1s)
```js
function BookList() {
return (
{books.map((book) => {
console.log(book);
const { img, title, author } = book;
return ;
})}
);
}
const Book = (props) => {
const { img, title, author } = props.book;
return (
{title}
{author}
);
};
```
- alternative
```js
const Book = ({ book: { img, title, author } }) => {
return (
{title}
{author}
);
};
```
#### My Personal Preference
- utilize spread operator (...) - copy values
- Spread Operator
- [JS Nuggets - Spread Operator](https://www.youtube.com/watch?v=4Zyr5a3m0Fc&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ&index=10)
```js
const friends = ["john", "peter", "anna"];
const newFriends = [...friends, "susan"];
console.log(friends);
console.log(newFriends);
const someObject = {
name: "john",
job: "developer",
};
// COPY NOT A REFERENCE !!!!
const newObject = { ...someObject, location: "florida" };
console.log(someObject);
console.log(newObject);
```
```js
function BookList() {
return (
{books.map((book) => {
return ;
})}
);
}
const Book = (props) => {
const { img, title, author } = props;
return (
{title}
{author}
);
};
const Book = ({ img, title, author }) => {
// rest of the code
};
```
#### Events - Fundamentals
- Vanilla JS
```js
const btn = document.getElementById("btn");
btn.addEventListener("click", function (e) {
// access event object
// do something when event fires
});
```
- similar approach
- element, event, function
- again camelCase
```js
const EventExamples = () => {
const handleButtonClick = () => {
alert("handle button click");
};
return (
click me
);
};
```
- [React Events](https://reactjs.org/docs/events.html)
- no need to memorize them(idea is the same)
- most common
- onClick (click events)
- onSubmit (submit form )
- onChange (input change )
```js
function BookList() {
return (
{books.map((book) => {
return ;
})}
);
}
const EventExamples = () => {
const handleFormInput = () => {
console.log("handle form input");
};
const handleButtonClick = () => {
alert("handle button click");
};
return (
Typical Form
click me
);
};
```
#### Event Object and Form Submission
```js
const EventExamples = () => {
const handleFormInput = (e) => {
console.log(e);
// e.target - element
console.log(`Input Name : ${e.target.name}`);
console.log(`Input Value : ${e.target.value}`);
// console.log('handle form input');
};
const handleButtonClick = () => {
alert("handle button click");
};
const handleFormSubmission = (e) => {
e.preventDefault();
console.log("form submitted");
};
return (
{/* add onSubmit Event Handler */}
Typical Form
{/* add button with type='submit' */}
submit form
click me
);
};
```
- alternative approach
```js
submit form
```
#### Mind Grenade
- alternative approach
- pass anonymous function (in this case arrow function)
- one liner - less code
```js
const EventExamples = () => {
return (
console.log("hello there")}>click me
);
};
```
- also can access event object
```js
const EventExamples = () => {
return (
Typical Form
console.log(e.target.value)}
style={{ margin: "1rem 0" }}
/>
console.log("you clicked me")}>click me
);
};
```
#### Mind Grenade #2
- remove EventsExamples
- components are independent by default
```js
function BookList() {
return (
{books.map((book) => {
return ;
})}
);
}
const Book = (props) => {
const { img, title, author } = props;
const displayTitle = () => {
console.log(title);
};
return (
{title}
display title
{author}
);
};
```
- remove button
#### Prop Drilling
- react data flow - can only pass props down
- alternatives Context API, redux, other state libraries
```js
function BookList() {
const someValue = "shakeAndBake";
const displayValue = () => {
console.log(someValue);
};
return (
{books.map((book) => {
return ;
})}
);
}
const Book = (props) => {
const { img, title, author, displayValue } = props;
return (
{title}
click me
{author}
);
};
```
#### More Complex Example
- initial setup
- create getBook function in booklist
- accepts id as an argument and finds the book
- [Javascript Nuggets - Filter and Find](https://www.youtube.com/watch?v=KeYxsev737s&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ&index=4)
- pass the function down to Book Component and invoke on the button click
- in the Book Component destructure id and function
- invoke the function when user clicks the button, pass the id
- the goal : you should see the same book in the console
```js
const BookList = () => {
const getBook = (id) => {
const book = books.find((book) => book.id === id);
console.log(book);
};
return (
{books.map((book) => {
return ;
})}
);
};
const Book = (props) => {
const { img, title, author, getBook, id } = props;
// console.log(props);
return (
{title}
{/* this is not going to work */}
display title
{author}
);
};
```
- two fixes
- first option - setup wrapper
```js
const Book = (props) => {
const { img, title, author, getBook, id } = props;
// console.log(props);
const getSingleBook = () => {
getBook(id);
};
return (
{title}
display title
{author}
);
};
```
- two fixes
- second option - wrap in the anonymous arrow function
```js
const Book = (props) => {
const { img, title, author, getBook, id } = props;
// console.log(props);
const getSingleBook = () => {
getBook(id);
};
return (
{title}
getBook(id)}>display title
{author}
);
};
```
#### Import and Export Statements
- remove all getBook code
```js
function BookList() {
return (
{books.map((book) => {
return ;
})}
);
}
const Book = (props) => {
const { img, title, author } = props;
return (
{title}
{author}
);
};
```
- setup two files in src books.js and Book.js
- cut books array from index.js
- add to books.js
books.js
```js
const books = [
{
author: "Jordan Moore",
title: "Interesting Facts For Curious Minds",
img: "./images/book-1.jpg",
id: 1,
},
{
author: "James Clear",
title: "Atomic Habits",
img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL900_SR900,600_.jpg",
id: 2,
},
];
```
- two flavors named and default exports
- with named exports names MUST match
- with default exports,can rename but only one per file
- named export
```js
export const books = [
{
author: "Jordan Moore",
title: "Interesting Facts For Curious Minds",
img: "./images/book-1.jpg",
id: 1,
},
{
author: "James Clear",
title: "Atomic Habits",
img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL900_SR900,600_.jpg",
id: 2,
},
];
```
index.js
```js
import { books } from "./books";
```
- default export
```js
const Book = (props) => {
const { img, title, author } = props;
return (
{title}
{author}
);
};
export default Book;
```
index.js
```js
import Book from "./Book";
```
#### Local Images (src folder)
- better performance because optimized
- add one more book to array
- download all three images (rename)
- setup images folder in the src
- import all three images in the books.js
- set image property equal to import
- and yes each image requires new import
```js
import img1 from "./images/book-1.jpg";
import img2 from "./images/book-2.jpg";
import img3 from "./images/book-3.jpg";
export const books = [
{
author: "Jordan Moore",
title: "Interesting Facts For Curious Minds",
img: img1,
id: 1,
},
{
author: "James Clear",
title: "Atomic Habits",
img: img2,
id: 2,
},
{
author: "Stephen King",
title: "Fairy Tale",
img: img3,
id: 3,
},
];
```
#### Challenges
- setup numbers
- don't worry about css
- hint - index (second parameter in map)
index.js
```js
const BookList = () => {
return (
{books.map((book, index) => {
return ;
})}
);
};
const Book = (props) => {
const { img, title, author, number } = props;
return (
{title}
{author}
{`# ${number + 1}`}
);
};
```
index.css
```css
.book {
background: #fff;
border-radius: 1rem;
padding: 2rem;
text-align: center;
/* set relative */
position: relative;
}
.number {
position: absolute;
top: 0;
left: 0;
font-size: 1rem;
padding: 0.75rem;
border-top-left-radius: 1rem;
border-bottom-right-radius: 1rem;
background: #c35600;
color: #fff;
}
```
#### Add Title
- add a title to our app (css optional)
- change page title
index.js
```js
function BookList() {
return (
<>
amazon best sellers
{books.map((book) => {
return ;
})}
>
);
}
```
index.css
```css
h1 {
text-align: center;
margin-top: 4rem;
text-transform: capitalize;
}
```
public/index.html
```html
Best Sellers
```
#### Build Production Application
- stop the dev server "ctrl + c"
- run "npm run build"
- build folder gets created
#### Netlify
- sign up
- add new site/deploy manually
- choose build folder
- rename site - site settings/change site name
#### Create-React-App Boilerplate (src)
- index.js
```js
import React from "react";
import ReactDOM from "react-dom/client";
// styles (typically global)
import "./index.css";
// convention to name it App and setup in a separate file
import App from "./App";
// import report web vitals
import reportWebVitals from "./reportWebVitals";
// StrictMode
// StrictMode is a tool for highlighting potential problems in an application.Activates additional checks and warnings for its descendants.Runs only in Development, does not impact the production build. RENDERS TWICE !!! Possible to remove.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```
- remove in src
- setupTests.js
- reportWebVitals.js
- App.test.js
- be careful with multiple css files
App.js
```js
function App() {
return
backroads app
;
}
export default App;
```
- remove
- remove logo.svg
- App.css
#### Vite Docs
(Vite)[https://vitejs.dev/]
#### Vite Install
```sh
npm create vite@latest app-name -- --template react
npm install
npm run dev
```
- http://localhost:5173/
#### Vite Setup
- need to use .jsx extension
- index.html in the source instead of public
- assets still in public
- instead of index.js, need to use main.jsx
- to spin up dev server - "npm run dev"
- rest the same - imports/exports, deployment, assets, etc...
---
_Note: I have developed this project ~ [0] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._