React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다.
React는 컴포넌트 기반 아키텍처를 사용하며, 각 컴포넌트는 자체적으로 동작하며 다른 컴포넌트와 결합하여 전체 애플리케이션을 구성합니다. React는 가상 DOM (Virtual DOM)을 사용하여 성능을 최적화합니다. 이는 변경된 부분만 실제 DOM에 반영하여 전체 페이지를 다시 렌더링하는 것보다 더 빠르게 업데이트할 수 있도록 합니다. React는 또한 JSX라는 자체 문법을 사용하여 자바스크립트 코드 안에 HTML과 유사한 구문을 작성할 수 있도록 합니다.
React 애플리케이션을 개발하려면 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측 자바스크립트 실행 환경입니다. Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. npm은 React를 비롯한 다양한 자바스크립트 패키지를 관리하는 도구입니다.
Compiled successfully!
You can now view react1 in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.72:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>HELLO WORLD</h1>);
//hello world
JSX는 JavaScript XML의 약어로, React에서 UI를 구성하기 위한 문법입니다. JSX는 JavaScript의 확장 문법으로, XML과 유사한 문법을 사용하여 JavaScript 코드 안에 HTML 요소를 삽입할 수 있게 해줍니다.
const name = "webstoryboy";
const hello = <h1>hello {name}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
//hello webstoryboy
객체와 함수를 같이 사용한 경우
function helloName(){
return name.nick;
}
const name = {
nick : "webstoryboy",
}
const hello = <h1>Hello, {helloName()}</h1>;
// function clock(){
// let clock = document.getElementById("clock");
// setInterval(function(){
// clock.innerHTML = new Date().toLocaleDateString();
// }, 1000);
// }
// clock();
function clock(){
const element = (
<div>
<div>hello, webstoryboy</div>
<h2>지금은 {new Date().toLocaleDateString()}입니다. </h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
export default clock;
import React from "react";
import ReactDOM from "react-dom/client";
function Hello(){
return <h1>Hello, webstoryboy</h1>
}
const element = <Hello />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
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 = "webs" />
<Welcome name = "webstoryboy" />
<Welcome name = "webss" />
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
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);