Node.js 없이 React를 사용해 봅시다
반응의 맥락
React는 사용자 인터페이스 구축을 위한 오픈 소스 JavaScript 라이브러리입니다. Facebook에서 만들고 지원합니다.
여기에서 문서를 찾을 수 있습니다: https://reactjs.org/tutorial/tutorial.html#overview
HTML, CSS 및 JavaScript를 처리할 수 있는 웹 개발자라면 이를 관리하기 위해 Node.js 또는 기타 복잡한 도구 없이 React를 사용해 볼 수 있습니다.
케이크처럼 쉽게!
1. react, react-dom 및 babel 참조로 index.html을 생성합니다.
텍스트 편집기에서 이것을 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<!-- Import the React, React-Dom and Babel libraries from unpkg -->
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
</script>
</body>
</html>
2. text/babel 스크립트 태그 추가
스크립트 태그를 교체합니다.
<script type="text/javascript">
</script>
~을 위한
<script type="text/babel">
</script>
3. 새 text/babel 스크립트 태그에 웹에 있는 반응 예제를 작성합니다.
리액션을 해볼 수 있는 가장 기본적인 환경이 생겼으니 한번 해보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Obtain the root
const rootElement = document.getElementById('root')
// Create a ES6 class component
class ShoppingList extends React.Component {
// Use the render function to return JSX component
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Create a function to wrap up your component
function App(){
return(
<div>
<ShoppingList name="@luispagarcia on Dev.to!"/>
</div>
)
}
// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
<App />,
rootElement
)
</script>
</body>
</html>
그리고 그게 다야!
이 index.html 파일을 브라우저로 드래그하면 첫 번째 반응 인터페이스를 사용할 수 있습니다.
이 방법이 반응 애플리케이션을 빌드하는 가장 약하고 간단한 방법이라는 점을 분명히 하는 것이 중요합니다. 더 많은 것을 탐색하려면 이 무료 과정에서 반응 기본에 대해 배울 수 있습니다: https://egghead.io/courses/the-beginner-s-guide-to-reactjs
시도해 볼 수 있기를 바랍니다. 무엇이든 할 수 있는 쉽고 간단한 방법이 항상 있습니다.
Reference
이 문제에 관하여(Node.js 없이 React를 사용해 봅시다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/luispa/lets-try-react-without-nodejs-3a7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<!-- Import the React, React-Dom and Babel libraries from unpkg -->
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
</script>
</body>
</html>
스크립트 태그를 교체합니다.
<script type="text/javascript">
</script>
~을 위한
<script type="text/babel">
</script>
3. 새 text/babel 스크립트 태그에 웹에 있는 반응 예제를 작성합니다.
리액션을 해볼 수 있는 가장 기본적인 환경이 생겼으니 한번 해보자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Obtain the root
const rootElement = document.getElementById('root')
// Create a ES6 class component
class ShoppingList extends React.Component {
// Use the render function to return JSX component
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Create a function to wrap up your component
function App(){
return(
<div>
<ShoppingList name="@luispagarcia on Dev.to!"/>
</div>
)
}
// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
<App />,
rootElement
)
</script>
</body>
</html>
그리고 그게 다야!
이 index.html 파일을 브라우저로 드래그하면 첫 번째 반응 인터페이스를 사용할 수 있습니다.
이 방법이 반응 애플리케이션을 빌드하는 가장 약하고 간단한 방법이라는 점을 분명히 하는 것이 중요합니다. 더 많은 것을 탐색하려면 이 무료 과정에서 반응 기본에 대해 배울 수 있습니다: https://egghead.io/courses/the-beginner-s-guide-to-reactjs
시도해 볼 수 있기를 바랍니다. 무엇이든 할 수 있는 쉽고 간단한 방법이 항상 있습니다.
Reference
이 문제에 관하여(Node.js 없이 React를 사용해 봅시다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/luispa/lets-try-react-without-nodejs-3a7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Obtain the root
const rootElement = document.getElementById('root')
// Create a ES6 class component
class ShoppingList extends React.Component {
// Use the render function to return JSX component
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Create a function to wrap up your component
function App(){
return(
<div>
<ShoppingList name="@luispagarcia on Dev.to!"/>
</div>
)
}
// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
<App />,
rootElement
)
</script>
</body>
</html>
Reference
이 문제에 관하여(Node.js 없이 React를 사용해 봅시다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/luispa/lets-try-react-without-nodejs-3a7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
