REACT v1.0 </doc>

REACT

React는 페이스북에서 개발된 UI(User Interface) 라이브러리입니다.

React는 웹 애플리케이션을 구축하기 위한 자바스크립트 라이브러리이며, 사용자 인터페이스를 만들기 위한 많은 도구와 기술을 제공합니다. React는 컴포넌트 기반 아키텍처를 사용하여 UI를 작성합니다.React는 상태(state)와 속성(props)의 개념을 중요하게 다룹니다. 상태는 컴포넌트가 가지고 있는 데이터이며, 이 데이터가 변경되면 React는 자동으로 UI를 업데이트합니다. 속성은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.React는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화합니다. 가상 DOM은 변경 사항이 있는 부분만을 갱신하므로, 전체 UI를 다시 그리는 것보다 더 빠르게 UI를 업데이트할 수 있습니다.

REACT 설치

Node.js 설치하기: React를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 JavaScript 런타임 환경으로, JavaScript 코드를 실행할 수 있는 환경을 제공합니다. React는 Node.js를 사용하여 동작하므로, Node.js가 설치되어 있어야 합니다.

Compiled successfully!
You can now view react1 in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.0.149:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

REACT 기본개념 익히기

hello world 출력하기

import React from "react";
import ReactDOM  from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>hello. world</h1>);

1.JSX

JSX는 자바스크립트(XML-like) 확장 문법으로, 리액트(React) 라이브러리에서 사용되는 구문입니다. JSX는 UI 컴포넌트를 생성하고 렌더링하는 데 사용됩니다. JSX는 일반적인 자바스크립트와 유사하지만, XML과 비슷한 구문을 사용하여 UI를 기술할 수 있습니다. 이는 UI를 작성하는 데 있어서 가독성과 유지 보수성을 높여줍니다. 또한, JSX를 사용하면 컴파일 시점에 문법 오류를 찾을 수 있어 개발자가 코드를 보다 안정적으로 유지할 수 있습니다.

import React from "react";
import ReactDOM  from "react-dom/client";

const name = "webstroyboy";
const hello = <h1<hello {name}</h1<

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

2.JSX

객체와 함수를 같이 사용한 경우

import React from "react";
import ReactDOM  from "react-dom/client";

function helloName(){
    return name.nick;
}

const name = {
    nick : "webstroyboy"
}

const hello = <h1>hello, {helloName()}</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

3.랜더링

// function clock(){
//   const element = (
//     <div>
//       <div>hello, webstroyboy</div>
//       <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
//     </div>
//   );

//   ReactDOM.render(element, document.getElementById("root"));
// }
// export default clock

function App(){
    return (
    <div>
        <h1>리엑트</h1>
    </div>
    )
}
export default App;

4.컴포넌트

function Hello() {
return  <h1>hello. juneyungi</h1>

}
const element = <Hello />

ReactDOM.render(element, document.getElementById("root"));


export default Hello

import React from "react";
import ReactDOM  from "react-dom/client";

function Welcome(props){
    return <h1>hello, {props.name}</h1>
}

function App(){
    return (
    <div>
        <Welcome name="web`s" />
        <Welcome name ="webstoryboy" />
        <Welcome name = "webss" />
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

5.props

import React from "react";
import ReactDOM  from "react-dom/client";

function Hello(props){
    return <h1>hello, {props.name}</h1>
}

const element = <Hello name="webstoryboy" />;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

import React from "react";
import ReactDOM  from "react-dom/client";

function formatDate(date){
    return date.toLocaleDateString();
}
function Comment(props){
    return (
    <div>
        <div>{formatDate(props.date)}</div>
        <div>{props.text}</div>
        <div>3</div>
        <div>4</div>
    </div>
    )
}

const comment = {
    data : new Date(),
    text : "이해했니?"

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comment date={comment.data} text={comment.text}/>);

added 2 packages, removed 1 package, and audited 1498 packages in 4s
234 packages are looking for funding
    run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
    npm audit fix --force

Run `npm audit` for details.

added 3 packages, and audited 1501 packages in 5s
234 packages are looking for funding
    run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
    npm audit fix --force

Run `npm audit` for details.

added 3 packages, and audited 1501 packages in 5s
234 packages are looking for funding
    run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
    npm audit fix --force

Run `npm audit` for details.

added 3 packages, and audited 1501 packages in 5s
234 packages are looking for funding
    run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
    npm audit fix --force

Run `npm audit` for details.

added 3 packages, and audited 1501 packages in 5s
234 packages are looking for funding
    run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
    npm audit fix --force

Run `npm audit` for details.