Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/somikdatta/learning-react
🌐 A repo for my very first React learning experience - courtesy of @QuentinWatt. 📃 Study notes available in repo README.
https://github.com/somikdatta/learning-react
react-components react-functional-components react-hook react-props react-router react-tutorial react-views reactjs
Last synced: about 1 month ago
JSON representation
🌐 A repo for my very first React learning experience - courtesy of @QuentinWatt. 📃 Study notes available in repo README.
- Host: GitHub
- URL: https://github.com/somikdatta/learning-react
- Owner: somikdatta
- Created: 2020-08-04T09:32:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T13:17:18.000Z (almost 2 years ago)
- Last Synced: 2023-03-03T05:53:08.911Z (almost 2 years ago)
- Topics: react-components, react-functional-components, react-hook, react-props, react-router, react-tutorial, react-views, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.98 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notes on my learnings
## Scripts
In the project directory, you can:
### `yarn start`
Starts a development server
### `yarn test`
Launches the testner in the interactive watch mode.
### `yarn build`
Builds the app for production to the `build` folder.
# Notes
## Lecture 1: React Components
- React is shipped with a component i.e. App.js as an example and is a pretty great example of a stateless functional component.
- All components must return at least one wrapper element.
- There must be one parent wrapper for returning multiple components, e.g.
return (
)
- Components are of two kinds:
1. Stateless Components or Functional Components
2. Stateful Components or Class-Based Components
Example 1: Stateless Component
function HelloWorld(){
return (
Hello Drake
)
}
Example 2: Stateful Component
class HelloWorld extends React.Component{
render(){
return (
Hello Drake
)
}
}
- To pass a component in another component
- Prop (Properties)
- Pass in a prop -
```
```
- Access prop -
```
function HelloWorld(props){
return (
Hello {props.name}
)
}
```
## Lecture 2: Simple App Plus Minus
`Features hooks, class based approach`
- Functional approach
const [var, method_to_modify_var] = useState(initial_value_of_var)
useState(val) function returns a var and a function and that's the reason to declare the LHS const above
- To modify var we reference method_to_modify_var(new_data)
## Lecture 3: Conventional CSS class styling
- Add styles in CSS file
- Use the class name like so
```
function Header(){
return (
AppName
)
}
```
## Lecture 4: Add Tailwind CSS
- Remove App.css & all its imports
- `yarn i tailwindcss`
- `yarn tailwindcss init`
- `yarn i postcss-cli && autoprefixer`
- Create postcss.config.js with
```
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
```
- Modify package.json
`"build:css": "postcss src/index.css -o src/tailwind.css",`
`"watch:css": "postcss src/index.css -o src/tailwind.css -w",`
`"start": "yarn build:css && react-scripts start",`
`"build": "yarn build:css && react-scripts build",`
- Restart server with yarn start
## Lecture 5: Conditional Rendering
`Render HTML conditionally`
- Using state for conditional rendering
```
let menu=null;
if(showMenu){
menu =
The menu
}
```
## Lecture 6: React Spring (Animations)
- Install react-spring
`yarn add react-spring`
- Define transitions
```
const menuTransitions = useTransition(showMenu,null, {
from: {opacity: 0, transform: 'translateX(-100%)'},
enter: {opacity:1, transform: 'translateX(0%)'},
leave: {opacity: 0, transform: 'translateX(-100%)'}
})
```
- Use it as follows
```
{
maskTransitions.map(({item, key, props})=>
item &&
setShowMenu(false)}>
)
}
```
## Lecture 6: React Router
- Install React Router DOM
`yarn add react-router-dom`
- Add necessary imports
```import {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom'
```
- Make sure `Router` encapsulates at the topmost level
- Router can contain `Link` which defines navigation URL
- Router can contain `Switch` which in turn contains `Route` which acts as a router outlet for specified links
## Lecture 7: Axios - HTTP Requests
- Install axios by
`yarn add axios`
- axios works on the mechanisms of promise (then, catch - resolve, reject)
- Implementation
```
axios.method(url).then().catch()
```
## Lecture 8: Hooks
- Hooks let us use state and other React features without using a class i.e. through classless components
- Two introductory hooks
1. useState(value)
```
const [state,stateSetterMethod] = useState(initialValue)
```
`Example: const [count, setCount] = useState(0);`
2. A great substitute for componentDidMount, componentDidUpdate, componentWillUnmount put together
- No clearnup required
- Tell React that component needs to do something after rendering
```
useEffect(() => {
document.title = `You clicked ${count} times`;
});
```
- Rules
1. Always call Hooks at the top-level, not within loops, conditionals, nested functions
2. Only call Hooks from React function components or other custom Hooks