React dev

To improve English skill, all the notes will be written in EnglishMake our code modular.Export default and export const \- Ex. export default person –

React Basics & working with components What is components? All user interfaces in the end are made up of components You may see some building blocks

React State & Working with Events Goal: Learning concepts for making an app intercative & reactive How to listen to events? To add event listener,

Outputting Dynamic Lists of contentRendering Content unders certain conditionsInstead of static way of creating components as we did before, we can us

Stuling React Components

Understanding errorsDebugging & Analyzing react appsUsing the react dev ToolsWhen you make errors, react console point the line of error and give you

Fragments, Portals & Refs 1. JSX limitaion When we return several jsx elements in component, it will occur error because adjacent JSX elements must b

Again, The main job of react is rendering UI and reacting to user input.In addition, React evaluate and render JSX, manage states&props , react to eve

React only cares about components (+ props, state, context, etc..) for building user interfaces.ReactDOM is interface to the web and RealDom is what u

First of all , you must not give direct access to database in broswer side.The right order is React app <-> backend app <-> database.You can use

With custom hooks, you can extract component logic and reuse it as a function.When we build app, There will be duplicated logic definitely. This is th

In real word example, There is lots of routes in web page which is handled by Server. Of course, we should show different visual content of each paths

Advanced Redux Side Effects, Async Tasks with Redux Originally, Redux reducer functions is pure, side-effect free, synchronous. Then Where should si

Redux is a state management system for cross-component or app-wide state.There is three kind of states.Local state : a state belongs to a single compo

Forms & User input in detail What makes form complex? Forms and inputs can assume different states(one or more inputs are invalid vs All inputs are

Authentication with React Auth process client -> requetst permission (with user credentials) -> server If clidential accepted, server -> response (s

If we use CSS animation effect, we always have elements related to style on browser. The animiation may be pretty fine though.Sure, we can figure out

Manual Testing : Writing code preview and test in browser (still error-prone because it is hard to test all scenarios).Automated Testing : Testing wit