JSX에서 JavaScript 표현식을 계산하는 방법은 무엇입니까? 매우 간단합니다. 다음과 같이 Curly Braces를 사용하십시오
코드를 업데이트하고 브라우저에 "Hello, Jane Doe"가 표시되는지 확인하십시오. {5 2} <code>create-react-app message-app</code>와 같은 다른 예제를 시도하십시오. JSX의 기본 사항이 있으므로 반응 구성 요소를 만들어 보겠습니다. <p>
<t> 반응 구성 요소를 선언합니다
<is> 위의 예는 ReactDom.render ()가 어떻게 작동하는지 보여주는 쉬운 방법입니다. 일반적으로 모든 프로젝트 로직을 React 구성 요소에서 캡슐화하여 ReactDom.Render 함수로 전달합니다. </is></t></p>
SRC 폴더에서 app.js라는 파일을 만들고 다음 코드를 입력하십시오.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>npx i -g create-react-app</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<create> 여기서, 우리는 react.component의 서브 클래스 인 JavaScript 클래스를 정의하여 React 구성 요소를 만듭니다. 또한 JSX 요소를 반환하는 렌더링 함수도 정의합니다. 다른 JSX 코드를 <code> <div> <p> 태그에 넣을 수 있습니다. 다음으로 다음 코드로 SRC/Index.js를 업데이트하여 브라우저의 반사 된 변경 사항을 확인하십시오.
</p>
<import> 먼저 앱 구성 요소를 가져옵니다. 그런 다음 다음과 같이 앱을 JSX 형식으로 렌더링합니다. JSX가 React DOM으로 밀 수있는 요소로 컴파일 할 수 있도록 필요합니다. 변경 사항을 저장 한 후 브라우저를 확인하여 올바른 메시지를 렌더링하십시오. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
다음으로, 우리는 스타일을 적용하는 방법을 배웁니다. <p>
<of> JSX 요소의 스타일을 설정하십시오
<ways> 반응 구성 요소를 스타일링하는 다양한 방법이 있습니다. 이 튜토리얼에서는 두 가지 방법을 소개합니다
</ways></of></p>
<in in> JSX 인라인 스타일
<sheet> 외부 스타일 시트
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>cd message-app
npm start</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<an> 다음은 JSX 인라인 스타일을 구현하는 방법의 예입니다.
<p>
<y> 반응 스타일은 일반 CSS와 매우 비슷하지만 몇 가지 주요 차이점이 있습니다. 예를 들어, Headerstyle은 객체 문자 그대로입니다. 우리는 평소와 같이 세미콜론을 사용할 수 없습니다. 또한 많은 CSS 선언이 JavaScript 구문과 호환되도록 변경되었습니다. 예를 들어, 우리는 텍스트 결정 대신 TextDecoration을 사용합니다. 기본적으로 Camel Nomenclature는 WebKitTransition과 같은 공급 업체 접두사를 제외하고 모든 CSS 키에 사용됩니다. 이는 대문자로 시작해야합니다. <code>{5 2}
우리는 또한 이런 방식으로 스타일을 구현할 수 있습니다 : <code>npm i -g create-react-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
SRC 폴더에서 app.css라는 파일을 만들고 다음 코드를 입력하십시오.
src/app.js 파일 상단에서 다음 가져 오기 명령문을 추가하십시오 :
저장 후 브라우저에서 텍스트 콘텐츠 크기가 크게 변경 될 것입니다. 다음과 같이 CSS 클래스를 사용할 수도 있습니다
src/app.js를 다음과 같이 업데이트하십시오
<code>create-react-app message-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
이제 REACT 프로젝트에 스타일을 추가하는 방법을 배웠으므로 무국적 및 상태의 반응 구성 요소를 계속 배우겠습니다. <code>npx i -g create-react-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
멍청한 구성 요소라고도하는 상태의 구성 요소는 정보를 표시하는 구성 요소 일뿐입니다. 데이터 운영에 대한 논리가 포함되어 있지 않습니다. 사용자로부터 이벤트를 수신 한 다음 처리를 위해 부모 컨테이너로 전달할 수 있습니다.
파일 Message-View.js를 작성하고 다음 샘플 코드를 복사하십시오. 다음은 멍청한 구성 요소의 완벽한 예입니다 (기술적으로는 정적 구성 요소와 비슷하지만) : <code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>로그인 후 복사
로그인 후 복사
다음 코드를 사용하여 SRC/App.CSS에 몇 가지 기본 스타일을 추가하십시오.
마지막으로 전체 파일이 다음과 같이 보이도록 src/app.js를 수정하십시오.
<code>cd message-app
npm start</code>
로그인 후 복사
로그인 후 복사
우리는 앞에서 React가 클래스 기반 및 기능 기반 구성 요소를 제공한다고 언급했습니다. 다음과 같이 함수 구문을 사용하여 MessageView를 다시 작성할 수 있습니다.
는 함수 구문에서 필요하지 않기 때문에 구성 요소 가져 오기를 제거했습니다. 이 스타일은 처음에는 혼란 스러울 수 있지만 곧 React 구성 요소 작성이 더 빠르다는 것을 곧 알게 될 것입니다.
또한, React 후크의 출현으로 인해 이러한 스타일의 쓰기 React 구성 요소가 점점 인기를 얻고 있습니다.
소품을 통해 데이터를 전송합니다
당신은 무국적 반응 구성 요소를 성공적으로 만들었습니다. 그러나 상태가 많은 구성 요소 나 컨테이너와 올바르게 통합하려면 추가 작업이 필요하기 때문에 완전하지 않습니다. 현재 MessageView는 정적 데이터를 표시합니다. 입력 매개 변수를 수락 할 수 있도록 수정해야합니다. 우리는 소위 소품을 사용하여이를 달성합니다 - 부모 구성 요소에서 전달할 데이터입니다.
먼저 다음과 같이 메시지 뷰 구성 요소를 변경하십시오<code>npm i -g create-react-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
이제 MessageView의 부모 구성 요소를 작성하겠습니다. Message-list.js라는 새 파일을 만들고 다음 코드를 추가하십시오.
this.props.message
그런 다음 JSX에서는 State Object의 메시지 속성을 MessageView 구성 요소로 전달합니다.
마지막 단계는 앱 구성 요소를 업데이트하여 상태가없는 Messagelist 구성 요소를 렌더링하는 것입니다.
변경 사항을 저장 한 후 브라우저에서 결과를 확인하십시오. <code>create-react-app message-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
무슨 일이 일어나고 있는지 이해하기 위해 잠시 시간을 내십시오. 우리는 (상태가 많은) Messagelist 구성 요소의 상태 객체를 선언합니다. 이 개체의 메시지 속성에는 메시지가 포함되어 있습니다. 우리의 렌더링 함수에서 우리는이 메시지를 소위 소품을 사용하여 (무국적) 아동 구성 요소에게 전달할 수 있습니다.
(stationeles) messageview 구성 요소에서 를 사용하여 메시지에 액세스 할 수 있습니다. 그런 다음이 값을 JSX로 전달하여 페이지로 렌더링 할 수 있습니다.
허!
prop check
응용 프로그램이 커지고 데이터가 소품으로 전달되면 구성 요소가 예상되는 데이터 유형을 수신하는지 확인하는 것이 유용합니다.
운 좋게도, 우리는 prop-types 패키지를 사용하여이를 달성 할 수 있습니다. 실제 예를 신속하게 보려면 다음과 같이 MessageView 구성 요소를 변경하십시오.
<code>npx i -g create-react-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
부모 구성 요소의 상태를 다음과 같이 변경하여 시도 할 수 있습니다.
브라우저로 돌아가 콘솔을 엽니 다. 콘솔에 문서화 된 다음을 볼 수 있습니다.
우리는 또한 ID와 같은 Key라는 특수 속성으로 고유 한 값을 채워야합니다. RECT는 목록에 어떤 항목이 변경, 추가 또는 삭제되었는지 추적해야합니다.
다음과 같이 Messagelist 코드를 업데이트하십시오
결과를 확인하려면 브라우저를 확인하십시오 
보시다시피, 강력하고 복잡한 UI 인터페이스를 만들기 위해 React로 빌딩 블록을 쉽게 정의 할 수 있습니다.
반응 후크를 사용하도록 리팩토링되었습니다
후크는 최신 버전의 React이지만 React World를 휩쓸고 있습니다. 간단히 말해서, 그들은 함수 구성 요소를 반응하기 위해 상태 (및 기타 기능)를 추가 할 수있게합니다.
나는 Messag React V16.8 이상을 사용할 때만 가능합니다.
위의 예에서, 상태 객체를 usestate React 후크로 교체했습니다. 이름에서 알 수 있듯이 구성 요소 상태를 관리 할 수 있습니다.
후크를 사용하면 대규모 프로젝트를 수행 할 때 소위 소품 시추를 피하는 데 도움이됩니다. Prop Drilling을 사용하면 소품을 여러 구성 요소 (궁극적으로 해당 데이터가 필요하지 않음)에 전달할 수 있으며, 단지 깊게 중첩 된 구성 요소에 도달 할 수 있습니다.
우리는 또한 MessageView 구성 요소를 함수 구성 요소로 변환 할 수 있습니다 :
이제 구성 요소에서 메시지 소품을받는 방법에 주목하십시오.
이것은 객체 파괴라는 기술을 사용하여 배열이나 객체에서 개별 항목을 추출하여 약어 구문을 사용하여 변수에 넣을 수 있습니다.
우리는 여기에서 동일한 기술을 사용하여 메시지 객체에서 필요한 값을 얻고 모든 것에 메시지를 추가하는 것을 피합니다.
<code>npm i -g create-react-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
나는이 게시물에서 React Hooks를 더 소개하려고하지 않으며, 그것들이 존재하고 React 커뮤니티에서 점점 더 인기를 얻고 있음을 알려주십시오. 후크에 대해 더 많이 배우려면 시작 가이드에 대한 반응 후크를 읽으십시오.
데모
이것은 당신이 사용할 수있는 라이브 데모입니다 :
Codepen Demo Link
<code>create-react-app message-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
react
를 시작하는 것에 대한 FAQ
REACT 학습의 전제 조건은 무엇입니까? <code>npx i -g create-react-app</code>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
React의 개발 환경을 설정하는 방법은 무엇입니까?
JSX 란 무엇이며 반응에서 중요한 이유는 무엇입니까?
JSX는 JavaScript XML을 나타냅니다. Facebook에서 개발 한 JavaScript 구문 확장으로 반응에 HTML을 쓸 수 있습니다. JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가 할 수 있습니다. 그것 없이는 JavaScript 코드를 읽고 쓰기가 어렵습니다. 또한 코드를 모듈화하고 이해하고 유지하기 쉽게 만드는 데 도움이됩니다.
React의 구성 요소는 무엇입니까?
구성 요소는 모든 RECT 응용 프로그램의 빌딩 블록입니다. React의 구성 요소는 UI의 일부를 제어하는 재사용 가능한 코드입니다. 각 구성 요소는 독립적이며 복잡한 UI를 만들기 위해 결합 할 수 있습니다. React 구성 요소는 일반적으로 JSX로 작성되며 자체 상태와 소품을 유지할 수 있습니다.
React의 상태와 소품의 차이는 무엇입니까?
반응에서 상태와 소품은 JavaScript 객체입니다. 비록 둘 다 렌더 출력에 영향을 미치는 정보를 보유하고 있지만 구성 요소와 관련하여 다르게 수행합니다. 소품 (속성의 약어)은 부모 구성 요소에서 어린이 구성 요소로 데이터를 전달하는 방법입니다. 반면에 상태는 구성 요소 내부에서 관리되며 구성 요소 내부에서 변경할 수 있습니다.
반응은 어떻게 이벤트를 처리합니까?
React 이벤트는 소문자가 아닌 Camelcase를 사용하여 명명되었습니다. JSX를 사용할 때는이 기능을 문자열이 아닌 이벤트 핸들러로 전달합니다. 예를 들어, HTML 클릭 이벤트는 JSX에서 OnClick으로 작성됩니다. React에는 또한 합성 이벤트 시스템이 있습니다. 즉, 자체 이벤트 시스템이있어 W3C 이벤트 시스템과 완전히 호환됩니다.
React Middle Key의 의미는 무엇입니까?
React의 키는 해당 드라이버 렌더링 데이터의 고유 한 가상 DOM 요소를 식별하는 데 사용됩니다. 기존 DOM 요소를 통한 반복하여 렌더링 최적화에 반응하는 데 도움이됩니다. 키는 고유 한 숫자 또는 문자열이어야하며 중복 키를 사용하면 응용 프로그램을 중단 할 수 있습니다.
React의 컨텍스트 API는 무엇입니까?
Context API는 RECT가 제공하는 구성 요소 구조로, 응용 프로그램의 모든 수준에서 특정 형태의 데이터를 공유 할 수 있습니다. 그 목표는 소품 시추 문제를 해결하는 것입니다.
Redux는 무엇이며 React와 어떤 관련이 있습니까?
redux는 클라이언트, 서버 및 기본 환경에서 일관되게 실행되고 테스트하기 쉽습니다. 주로 React의 상태 관리 도구로 사용되지만 다른 JavaScript 프레임 워크 또는 라이브러리와 함께 사용할 수 있습니다.
반응의 고리는 무엇입니까?
위의 내용이 원래 텍스트를 다시 작성하고 연마하여 원래 의미를 바꾸지 않고 가독성과 유창성을 향상시키기 위해 노력했습니다. 이미지 형식은 동일하게 유지됩니다. 네트워크 사진에 직접 액세스 할 수 없으므로 이미지 링크는 동일하게 유지됩니다.
개발 업계에서 인기있는 JavaScript 라이브러리 인 React는 대화식 사용자 인터페이스를 구축하는 프로세스를 단순화하며 애플리케이션 범위는 웹 페이지, 모바일 터미널 및 데스크톱 플랫폼을 포함합니다. Netflix 및 Airbnb와 같은 거인을 포함한 전 세계의 많은 회사들이 React를 사용하고 있습니다. 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
