리액트 (19) 썸네일형 리스트형 리액트 프로젝트가 실행안될때(react-scripts 배치파일 어쩌구) 리액트 프로젝트를 실행하려고 npm start 위 명령어를 실행했는데 react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이런 메시지가 뜬다면??? npm update 위 명령어를 실행해서 현재 필요한 라이브러리들을 설치해줍니다. 이런 오류가 뜨는 이유는 리액트 소스코드를 실행하기 위한 라이브러리가 없기 때문인데, 보통 깃허브에서 리액트 소스코드 다운받아와서 그냥 실행했을때 생기는 오류입니다. 그래서 npm update를 통해 해당 코드에서 요구하는 라이브러리들을 다운받고 다시 npm start를 해주면 정상적으로 리액트 프로젝트를 실행할 수 있습니다. reactjs로 동적인 UI 만들어보기 1. 개요 동적인 UI 만드는 STEP HTML, CSS로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI를 어떻게 보여줄지 조건문 등으로 작성 2. 코드 import {useState} from 'react'; function App() { let [card, setCard] = useState(false); return( { if (card==true){ setCard(false) } else { setCard(true) }}> 카드 컴포넌트 보여주기 {card == true ? : ''} ) } function Card() { return( 카드컴포넌트 ) } 우선 Card 컴포넌트를 만들어주고 먼저 card라는 state를 만들고, 그 안에다가 false 값을 넣어줌.. reactjs에서 component로 편리하게 HTML덩어리 관리하기 1. 개요 컴포넌트는? 반복적으로 출현하는 HTML덩어리를 쉽게 생성할 수 있게 해주는 도구 커다란 페이지를 컴포넌트화 해두면 편함 자주 변경되는 UI를 컴포넌트화 해두면 편함 함수 만들고, return() 안에 HTML 담고, 형태로 쓰면 됨(도 됨) 함수 규칙은 다른 함수의 밖에 만들 것, 첫글자를 영어 대문자로 만들 것 2. 코드 function Card() { return( 카드임 ) } 이 코드는 Card라는 이름의 컴포넌트를 만드는 코드임 function 뒤에 컴포넌트의 이름을 쓰면 되고 return 뒤에 내가 컴포넌트로 만들고 싶은 HTML코드를 넣어주면 됨 function App() { return( ) } function Card() { return( 카드임 ) } 이런식으로 코드 짜면 .. 이전 1 2 3 다음