07/17 - 07/21 - Githubissues

kunheejeon commented 1 year ago

07/17

Limitation of JSX: need only one root element need

wrapper => causing div soup sol: use wrapper helper component work as empty component use <React.Fragment> use <> </>

React Portals (ReactDom.createPortal) Modal should not be deeply nested => above root as sibling Q. onClick vs onConfirm

Ref => mostly for reading element (ref.current)

controlled components: managed by react uncontrolled: not managed by react

useReducer Used for complect state management const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);

React Context Component-wide State Storage ContextFn.Provider, ContextFn.Consumer Most case, use props. But if data or function have to travel a lot of components (which even might not need the data nor function), use context

Authentication

is needed if content should be protected
Client(Browser) -> request to server with user credentials -> Server response with auth token
Authentication action was implemented to process login and logout mechanism
then send http request to communicate between server

kunheejeon commented 1 year ago

07/18

Next.js

React Framework
built-in Server-side Rendering: data-fetching done on server so client don't have to wait data to be loaded
- automatic page pre-rendering ex) search engine optimization (SEO)
File-based routing
- Define pages and routes with files and folders instead of code => less code and work
fullstack capabilities
- Easily add backend code to app
- Storing data, getting data, authentication

Pages Router

pages directory is needed with index.js file because the name is reserved to NextJS
- pages/index.js → /
- pages/blog/index.js → /blog
- Dynamic routes: pages/posts/[dynamicVal].js can be accessed with posts/1, posts/2
- useRouter().query.dynamicVal to retrieve the param
<Link href="/"></Link> SPA navigation

Return pre-rendered page

Static Generation
Server-side Rendering

getStaticProps() is reserved code by Next.js

fetch data at build time. fetched when the application is built and is then served statically
useful when you need to fetch data that doesn't change frequently export async function getStaticProps() {}
```
export async function getStaticProps() {
return {
props: { meetups: DUMMY_MEETUPS },
revalidate: 10
}
}
```

getServerSideProps() is reserved code by Next.js

fetches data from an external source during runtime.

useful when you need to serve up-to-date information that changes frequently

export async function getServerSideProps(context) {
const req = context.req;
const res = context.res;

return {
props: { meetups: DUMMY_MEETUPS }
};
}

getStaticPaths is required for dynamic SSG pages when using getStaticProps()

API Router

pages/api directory is needed with index.js file because the name is reserved to NextJS
- turn JS files into API route

Adding 'head'

import Head from "next/head";

locate in component function return

<Head>
<title>React Meetups</title>
<meta
name="description"
content="Browse a huge list of highly active React meetups!"
/>
</Head>

metadata description shows on search engine

kunheejeon commented 1 year ago

07/19

Deployment

Deploying React Apps

Test Code -> Optimize Code -> Build App -> Upload Production Code to Server -> Configure Server

Optimize Lazy loading

Initial load can take quite long and leads to a bad user experience

lazy import () => import('./page/Blog').then((module) => module.loader())

import returns a promise => need .then

Lazy fuction lazy() where lazy(() => import('./pages/Blog'))

Since import returns a promise, needs lazy() to use it as a component
- now, need to wrap component JSX with <Suspense>
```
<Suspense fallback={<p>Loading...</p>}>
<BlogPage />
</Suspense>
```

Build App npm run build => create build folder

codes are minify

Upload

React SPA is a "Static Website"
Need a Static Site Host
- Firebase Hosting

kunheejeon commented 1 year ago

07/20

### React Animaion

CSS Animation

.ModalOpen { animation: openModal 0.4s ease-out forwards; }
@keyframes openModal {
    0% { opacity: 0; transform: translateY(-100%); }
    50% { opacity: 1; transform: translateY(20%); } // bounce down
    100% { opacity: 1; transform: translateY(0%); }
}

modal hiding: displayed on dev tool element: not reactive and consume resourses (slowing down)

ReactTransitionGroup npm install react-transition-group --save https://reactcommunity.org/react-transition-group/

Transition <Transition> component to show animation

4 main states a Transition: 'entering' 'entered' 'exiting' 'exited'
in={} : condition
timeout={} : duration of the transition
mountOnEnter and unmountOnExit

CSSTransition

applies a pair of class names during the appear, enter, and exit states of the transition <CSSTransition classNames="my-css"> in CSS file

.my-css-enter { opacity: 0; }
.my-css-enter-active {
opacity: 1;
transition: opacity 200ms;
}
.my-css-exit { opacity: 1; }
.my-css-exit-active {
opacity: 0;
transition: opacity 200ms;
}

TransitionGroup

Special usage in a list : manages a set of transition components

<TransitionGroup component="ul" className="List">
{listItems} // should be <CSSTransition>
</TransitionGroup>

Alternative Animation Packages React-Motion, React-Move, react-router-transition

kunheejeon / frontend-react-sessions

07/17 - 07/21 #3

Next.js