React 구성 요소의 구조를 잡아라!!(create-react-app으로 Hello World 속도 표시)

개요

React를 처음 터치하면 구성 요소의 구조를 잡는 데 시간이 오래 걸린다
절차를 비망록으로 남기다.
create-react-app 패키지를 사용하기 때문에 환경을 구축할 필요가 없습니다.
※ 세밀한 설정을 하는 사람은 환경 구축부터 스스로 하는 것이 좋다!

흐르다

1. 구성 요소
2.Node.js 설치
3. 응용 프로그램 만들기
4. 코드

1. 구성 요소

어셈블리는 부품 및 부품입니다.
React는 기능에 따라 구성 요소를 구성합니다. 아래 참고 이미지와 같이 여러 구성 요소를 조합하여 외관을 만듭니다.

리본에서 를 클릭합니다.
제작된 구성 요소는 App입니다.js로 호출, index.js로 JSX 형식을 HTML 형식으로 바꾸면 표시됩니다!!
※Todo.js는 생성된 구성 요소의 예입니다!

2. Node.js 설치

다음 링크에서 설치하는 것이 좋다고 생각합니다
https://nodejs.org/ja/
서버측 JavaScript에서 사용되었으나 이제 프런트엔드에서도 사용됩니다.

3. 응용 프로그램 만들기

npx create-react-app '任意のアプリ名'
cd '任意のアプリ名'
npm start

공식보다
React App을 만드는 것은 React를 배우는 편안한 환경이며, React에서 새로운 단일 페이지 응용 프로그램을 만드는 가장 좋은 방법입니다.
위의 명령을 실행하면 아래 화면이 일어설 수 있으면 OK!

4. 코드

그리고 만든 프로그램을 열고 src 아래에서 js 파일을 만듭니다.
※ 이번에는 토도다.js로서
Todo.js

import React, { Component } from 'react'; ①Reactをインポートする

class Todo extends Component {　②class名がcomponentの名前
  render(){
    return(
      <div className = "title">　③
        Hello World
      </div>
    );
  }
}
export default Todo; ④コンポネートをexportする

① 만든 js 파일에react를 사용합니다!성명
② class 이름은 어셈블리 이름이며 클래스 자체가 어셈블리입니다.
③ return은 JSX로 기록됩니다.JSX 내장 class는 className!
④ 이 설명을 통해 조합을 내보내서 가져올 수 있도록 한다App.jsApp.js

import React from 'react';
import Todo from './Todo';　①コンポーネントをインポート

function App() {
  return (
    < Todo/> ②JSX内にコンポネート記載
  );
}

export default App;

① import 제작 구성 요소
　※ import コンポーネント名 from './ファイル名'② JSX 내 쓰기 <コンポーネント名/>지금까지 Hello World가 나왔습니다!

마지막

구성 요소에 대한 설명이 주를 이루었기 때문에, 응용 프로그램이 설치되면 다시 보도할 수 있습니다!

참고 자료

https://ja.reactjs.org/
https://webkikaku.co.jp/blog/javascript/react-start/