초보자를 위한 React JS 기초

14152 단어 javascriptbeginnersreacttutorial

리액트 JS란 무엇인가



사용자 인터페이스 구축을 위한 JavaScript 라이브러리

index.js 이해하기



1. 반응에서 간단한 JSX 요소 렌더링



→index.js

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
<ul>
 <li>eat</li>
 <li>sleep</li>
 <li>code</li>
</ul>
,document.getElementById("root")
)


→index.html

여기 div 태그 안에 JS와 CSS를 id가 "root"인 모든 React 앱 렌더링에 연결했습니다.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>


2 Function을 사용하여 간단한 JSX 요소 렌더링




import React from "react"
import ReactDom from "react-dom"

//function
function App()
{
    return (<ul>
 <li>eat</li>
 <li>sleep</li>
 <li>code</li>
</ul>)
}
ReactDom.render(<App />,document.getElementById("root"))


3. 앱.js



여기에서는 create App.js를 사용하여 index.js로 렌더링합니다.

새 파일을 생성하자 → App.js

import React from "react"

function App(){
    return (
    <div>
    <h1>Umapathi K.</h1>
    <p>I am the student who loves...</p>
    <ol>
    <li>Running</li>
    <li>Coding</li>
    <li>Pubg</li>
    </ol>
    </div>)
}

export default App


여기서 "기본값 내보내기"는 App.js 파일을 내보내는 데 사용되므로 디렉토리의 어느 곳에서나 사용할 수 있습니다.

→index.js

import React from "react"
import ReactDom from "react-dom"
import App from "./App"

ReactDom.render(<App />,document.getElementById("root"))


4 프로젝트 구성



현재 React 프로젝트의 구조는 다음과 같습니다.
--📂공개
-index.html
--📂src
-style.css
-index.js
-앱.js

5가지 간단한 트위터 앱


단계:


  • 새로운 stackblitz 반응 프로젝트를 엽니다.

    • The best online code editor for React JS is stackblitz, It is very efficient for learning and building small projects, So, I recommend creating account on stackblitz for learning React JS



    2.src 내부에 "components"📂 폴더 생성

    3. components 폴더 안에 "Tweet.js"생성

    4. App.js 내부의 소품 전달

    props를 사용하여 구성 요소의 내용을 하드 코딩하는 대신 동적으로 변경하여 코드 재사용성을 향상시킵니다.

    →앱.js

    import React from "react";
import Tweet from "./components/Tweet";
function App(){
    return(
    <div className="tweet"> // class is keyword in js so we use className
         <Tweet name="Umapathi" content="coding with 2gb ram😁" likes="2" />
      <Tweet
        name="madhavan"
        content="finished my coding schedule😴"
        likes="15667"
      />
      <Tweet
        name="Ajay"
        content="I should have started learning recat early 😣"
        likes="2487"
      />
    </div>
    );
}
export default App;


    →구성요소

    →Tweet.js

    import React from "react";
function Tweet(props){
    return (
        <div>
        <h1>{props.name}</h1>
        <p>{props.content}</p>
        <h3>{props.likes} likes</h3>
        </div>
    );
}
export default Tweet;


    또는 소품을 작성하는 대신 "구조화"라고 하는 아래와 같이 코딩할 수도 있습니다. 매번 뭔가

    import React from "react";
function Tweet({name,content,likes}){
    return (
        <div>
        <h1>{name}</h1>
        <p>{content}</p>
        <h3>{likes} likes</h3>
        </div>
    );
}
export default Tweet;


    React의 기본적인 사용 사례를 이해하셨으면 좋겠습니다 😉

    ⚛ simple Twitter app demo
    자바의 함수형 인터페이스
    ES 매개변수 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage