React
-
#3 Building with Reusable ComponentsReact/React Udemy Lecture 2022. 12. 9. 12:58
Props System Parent Component => [props] => Child Component - Pass data from a parent to a child - Allows a parent to configure each child differently - One-way flow of data. A child can't push props back up. - Like 25% of understanding React Example) Parent Component : function App(){ return } => Props Object : {color : "red"} => Child Component : function Child(props){ return props.color } 29...
-
Creating a React App #9 What is create react appReact/React Udemy Lecture 2022. 12. 9. 05:45
Generating a Project npx create-react-app Go Into the Project cd Run npm start What are we running in our terminal? Files in my Project [index.js , App.js , reportWebVitals.js] => Create React App Dev Server - Babel : Tool to true JSX into normal JS code => - Webpack : Tool to merge all project into a single file => - bundle.js Inside the folder - index.js : First file that gets executed when ou..
-
14. Cart / useReducerReact/React Practice 2022. 8. 16. 06:16
1. Feature - useReducer const [state, dispatch] = useReducer(reducer, initialState); //const [, ] = useReducer(, , ) //state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태 //dispatch 는 액션을 발생시키는 함수 2. Method content.js => useContext const url = "https://course-api.com/react-useReducer-cart-project"; cosnt AppContext = React.reactContext(); const initialState={ loading:false, cart:cartItems, total:0, amount:0 } c..
-
13 Stripe SubmenuReact/React Practice 2022. 8. 15. 23:16
1. Feature - useContext - useRef 2. Solution useContext const AppContext = React.CreateContext() const AppProvider = ({children}) =>{ const [isSidebarOpen , setIssidebarOpen] = useState(false); const [isSubmenuOpen, setIsSubmenuOpen] =useState(false); const [page, setPage] = useState({page:'', links:[]}) const [location, setLocation] =useState({}) const openSidebar = ()=>{ setIssidebarOpen(true)..
-
12. Sidebal_modalReact/React Practice 2022. 8. 13. 00:23
Everything I learned from YouTube below: I write because I want to organize and leave my knowledge. There is no purpose for economic profit. https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=518s 1. Feature - useContent 2. Solution - Create UseContent in the content.js const AppContext = React.createContext(); const AppProvider =({children}) =>{ const [isSidebarOpen, setIsSidebarOpen] = useState(fal..
-
11.NavbarReact/React Practice 2022. 8. 12. 23:14
Everything I learned from YouTube below: I write because I want to organize and leave my knowledge. There is no purpose for economic profit. https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=518s 1. Feature - UseRef -Toggle Button 2. Solution const Nav = ()=>{ const [showLinks, setShowLinks] = useState(false); const linksContainer = useRef(null); const links = useRef(null); useEffect(()=>{ const lin..
-
08. lorem-ipsumReact/React Practice 2022. 8. 11. 23:11
1. Feature - According to the user's input, the number of paragraphs is changed. 2. Method const App = ()=>{ const [count, setCount] = useState(0) const [paragraps, setParagraps] = useState([]) const handleSubmit = (e) =>{ e.preventDefault() let amount = parInt(count) if(count 9){ amount = 9 } setParagraps(data.slice(0, amount)) } return ( setCount(e.target.value) }..
-
07. SliderReact/React Practice 2022. 8. 11. 21:59
1. Feature - The screen changes every 5 seconds. - When the 'next', 'pre' buttons click, the screen changes. 2. Method const App = ()=>{ const [people, setPeople] =useState(data); const [index, setIndex] = useState(0); useEffect(()=>{ const PeopleNum = people.length -1; if(index PeopleNum){ setIndex(0) } }, [index, people]) useEffect(() => { let slider = se..