Developer Team
BorntoDev Co., Ltd.
React āļāļ·āļāļāļ°āđāļĢ ?
React āđāļāđāļ JavaScript library āļāļĩāđāđāļāđāļŠāļģāļŦāļĢāļąāļāļŠāļĢāđāļēāļ user interface āļāļĩāđāđāļŦāđāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĩāļĒāļāđāļāđāļāđāļāļāļēāļĢāļŠāļĢāđāļēāļ UI āļāļĩāđāļĄāļĩāļāļ§āļēāļĄāļāļąāļāļāđāļāļāđāļāđāļāđāļāđāļāļŠāđāļ§āļāđāļĨāđāļāđāļāļāļāļāļēāļāļāļąāļāđāļāđ āļāļķāđāļāđāļāđāļĨāļ°āļŠāđāļ§āļāļŠāļēāļĄāļēāļĢāļāđāļĒāļāļāļēāļĢāļāļģāļāļēāļāļāļāļāļāļēāļāļāļąāļāđāļāđāļāļĒāđāļēāļāļāļīāļŠāļĢāļ° āđāļĨāļ°āļāļģāđāļŦāđāļŠāļēāļĄāļēāļĢāļāļāļģāļāļīāđāļāļŠāđāļ§āļ UI āđāļŦāļĨāđāļēāļāļąāđāļāđāļāđāļāđāļāđāļģāđāļāđāļāļĩāļ
āđāļāļĢāļĩāļĒāļĄāđāļāđāļāļēāļ React
- āļāļīāļāļāļąāđāļ npm āđāļ§āđāđāļāđāļāļĢāļ·āđāļāļāđāļŦāđāđāļĢāļĩāļĒāļāļĢāđāļāļĒ āđāļāđāļēāđāļāļāļēāļ§āļāđāđāļŦāļĨāļāđāļāđāļĨāļīāļāļāđāļāļĩāđ https://www.npmjs.com/get-npm
- āđāļĢāļēāļāļ°āļŠāļĢāđāļēāļāđāļāļĢāđāļāđāļāļāđāđāļĢāļīāđāļĄāļāđāļāļāļķāđāļāļĄāļēāļāļēāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļĩāđāļāļ·āđāļ create-react-app āļāļĩāđāļāļ°āļŠāļĢāđāļēāļāđāļāļĨāđāļāļ·āđāļāļāļēāļāļāđāļēāļāđāļāļĩāđāļāļģāđāļāđāļāđāļāļāļēāļĢāđāļāļĩāļĒāļ React āļāļķāđāļāļĄāļē āđāļŦāđāļāļģāļāļēāļĢāļāļīāļāļāļąāđāļāļāđāļ§āļĒāļāļģāļŠāļąāđāļ
npm install -g create-react-app
- āļŠāļĢāđāļēāļāđāļāļĢāđāļāđāļāļāđāđāļŦāļĄāđāļāļķāđāļāļĄāļēāļāđāļ§āļĒāļāļģāļŠāļąāđāļ
npx create-react-app myreact
- āđāļĢāļēāļāļ°āđāļāđāđāļāļĨāđāļāđāļēāļāđāļāļķāđāļāļĄāļēāļāļĢāļ°āļĄāļēāļāļāļĩāđ
- āļĨāļāļāļĢāļąāļāļāđāļ§āļĒāļāļģāļŠāļąāđāļ
npm start
- āđāļāļĢāļēāđāļāļāļĢāđāļāļ°āđāļāļīāļāļāļķāđāļāļĄāļēāļāļĩāđ http://localhost:3000/ āļāđāļēāļĄāļĩāļŦāļāđāļēāļāļēāđāļāļāļāļĩāđāđāļŠāļāļāļ§āđāļēāļāļĢāđāļāļĄāđāļāđāļāļēāļāđāļĨāđāļ§
āļāļđāđāļāđāļāļāļĩāđāđāļāđāļāļēāļ create-react-app āļāļąāļāļāđāļāļ
/public/index.html
āļāļāđāļāđāļāđāļ§āđāļāđāļĨāđāļ§āļŠāļīāđāļāļāļĩāđāļāđāļāļāļāļķāļāļāļķāļāļāļĒāđāļēāļāđāļĢāļāļāđāļāļ·āļāđāļāļĨāđ HTML āļāļķāđāļ React āđāļāļāđāļ§āļĨāļēāļāļĩāđāđāļāđāļŠāļāļāļāļĨāđāļāđāļāļĢāļēāđāļāļāļĢāđāļāđāļāļ°āļāđāļāļāļĄāļĩ HTML āđāļāđāļāļāļąāļ āļāļĒāđāļēāļāđāļāđāļāļāļĩāđāļŠāļĢāđāļēāļāļāļēāļāļāļģāļŠāļąāđāļ create-react-app āļāđāļĄāļĩāđāļāļĨāđāļāļ·āđāļ index.html āļāļĒāļđāđāđāļāđāļāļĨāđāļāļāļĢāđ public āļāļĩāļāļāļĩāļāļķāļ
āļāļķāđāļāļŠāđāļ§āļāļāļĩāđāđāļĢāļēāđāļĢāļēāļŠāļāđāļāļāđāļāļ·āļāļŠāđāļ§āļāļāļĩāđāļāļĒāļđāđāđāļ <body> āđāļāđāļ <div id=ârootâ> āđāļāļĢāļēāļ°āļ§āđāļēāđāļāđāļāļāļĩāđāđāļĢāļēāļāļ°āļĨāļāļāđāļāļĩāļĒāļāļāļąāļāđāļāļāļāļāļ§āļēāļĄāļāļĩāđāļāļ°āļĄāļēāđāļāļĨāđāđāļ div āļāļąāļ§āļāļĩāđāļāļąāđāļāđāļāļ
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>src/App.js
āđāļāļĨāđāļāļĩāđāđāļŦāļĄāļ·āļāļāđāļāđāļāđāļāļĨāđāļŦāļĨāļąāļāļāļĩāđ create-react-app āļŠāļĢāđāļēāļāļāļķāđāļāļĄāļēāđāļŦāļĄāļ·āļāļāļāļąāļāđāļāđāļāđāļāļĨāđ main āļāļāļāđāļāļĢāđāļāļĢāļĄ āļāļĩāđāļāļ°āļāļģāļŠāđāļ§āļāļāļĢāļ°āļāļāļāļāđāļēāļāđāļĄāļēāđāļāđāļāļēāļāļāđāļ§āļĒāļāļąāļāđāļāđāļāļĨāđāļāļĩāđ
src/index.js
āļāļĒāđāļēāļāļāļĩāđāđāļŦāđāļāļ§āđāļēāđāļĢāļēāļĄāļĩāđāļāļĨāđ index.html āļāļĢāļĢāļĄāļāļēāđāđāļĨāļ°āđāļāļĨāđ App.js āļāļĩāđāđāļāđāļāđāļŦāļĄāļ·āļāļ main āļāļāļāđāļāļĢāđāļāļĢāļĄāđāļĨāđāļ§ āđāļāļĨāđ index.js āļāļĩāđāļāļ°āđāļāđāļāļāļąāļ§āđāļāļ·āđāļāļĄāļĢāļ°āļŦāļ§āđāļēāļāđāļāļĨāđāļāļąāđāļāļŠāļāļāđāļāļĨāđ
āđāļāđāđāļāđāļāļāļīāļāļŦāļāđāļāļĒāđāļŦāđāļāļđāļāđāļēāļĒāđ
āđāļāđāđāļāļĨāđ index.html āđāļŦāđāđāļāđāļāđāļŦāļĄāļ·āļāļāļāđāļēāļāļĨāđāļēāļāļāļĩāđ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
āđāļĨāļ°āđāļāļĨāđ index.js
import React from 'react';
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello BorntoDev :)</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));āļĢāļąāļāļāđāļ§āļĒāļāļģāļŠāļąāđāļ npm start āđāļŦāļĄāļ·āļāļāđāļāļīāļĄ āļŦāļĢāļ·āļāļāđāļēāđāļāļĢāļĒāļąāļāļĢāļąāļāļāļĒāļđāđāļāļąāđāļāđāļāđāđāļāļāđāļāļāđāļāļāļāļĩāđ āđāļāđāļāļ save āļŦāļāđāļēāļāļēāđāļāđāļāļĢāļēāđāļāļāļĢāđāļāđāļāļ°āļāļąāļāđāļāļāļāļēāļĄāļāļąāļāđāļāļĄāļąāļāļī āļāļķāđāļāļāļ°āđāļāđāļāļģāļ§āđāļē Hello BorntoDev ð āļāļāļāļĄāļēāđāļĨāđāļ§
React JSX
āđāļāđāļāļĨāđ index.js āļāļ°āđāļŦāđāļāļ§āđāļēāđāļĢāļēāļŠāļĢāđāļēāļāļāļąāļ§āđāļāļĢāļāļ·āđāļ myfirstelement āļāļķāđāļāļĄāļēāđāļĨāļ°āļāļģāļŦāļāļāļāđāļēāđāļāđāļ <h1>Hello BorntoDev :)</h1> āļāļķāđāļāđāļāđāļ HTML Tag āļāļĩāđāļāļāļāļīāđāļĨāđāļ§āđāļĢāļēāļāļ°āđāļāļāļĢāļ°āļāļēāļĻāđāļāļāļāļĩāđāđāļ JavaScript āļāļĢāļĢāļĄāļāļēāđāļĄāđāđāļāđ āđāļāļĒāļāļēāļĢāđāļāđāļāļēāļāđāļāļāļāļĩāđāļāļ°āđāļĢāļĩāļĒāļāļ§āđāļē JSX āļĄāļēāļāļēāļ JavaScript XML āļāļķāđāļāļāļģāđāļŦāđāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĩāļĒāļ HTML āđāļ§āđāđāļ React āđāļāđāļāļĒāđāļēāļāļŠāļ°āļāļ§āļāļŠāļāļēāļĒ
āđāļāļĢāļ JavaScript āđāļ HTML
āļāļāļāļāļēāļāđāļāļĩāļĒāļ HTML āđāļĨāđāļ§ JSX āļĒāļąāļāļāļģāđāļŦāđāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĢāļāļāļēāļĢāļāļģāļāļēāļāđāļāđāļāđāļāđāļ JavaScript āđāļāļēāđāļ§āđāđāļ element āđāļāđāļāđāļ§āļĒāļāļēāļĢāđāļŠāđāđāļ { } āļāļĒāđāļēāļāđāļāđāļāļāđāļēāđāļĢāļēāđāļāļĨāļĩāđāļĒāļāļāđāļēāļāļāļ myfirstelement āđāļŦāđāđāļāđāļāđāļāļāļāļĩāđāđāļĨāđāļ§āļāļāđāļāļ
const myfirstelement = <h1> PI: {Math.PI}</h1>āļāđāļāļ°āđāļāđāļāđāļē PI āļāļāļāļĄāļēāđāļĨāđāļ§
āļāđāļēāđāļāđāļāđāļāđāļ HTML āļŦāļĨāļēāļĒāļāļĢāļĢāļāļąāļāđāļŦāđāļāļĢāļāļāļāđāļ§āļĒ ()
const myfirstelement = (
<span>
<h1>Hello World</h1>
</span>
);HTML āļāđāļāļāļĄāļĩ tag āļāļąāđāļāļāļāļāļŠāļļāļāđāļāļĩāļĒāļāļāļąāļ§āđāļāļĩāļĒāļ§
āļāđāļēāđāļĢāļēāļāđāļāļāļāļēāļĢāļāļ°āļŠāļĢāđāļēāļ HTML tag āļŦāļĨāļēāļĒāđāļāļąāļ§āđāļĢāļēāļāļģāđāļāđāļāļāļ°āļāđāļāļāļāļĢāļāļāđāļāļēāđāļ§āđāļāđāļ§āļĒ tag āļāļąāđāļāļāļāļāļŠāļļāļāđāļŦāđāļĢāļ§āļĄāđāļāđāļāļāļąāļ§āđāļāļĩāļĒāļ§āļāļąāļ āđāļāđāļāđāļŠāđāđāļāļēāđāļ§āđāđāļ <div>
const myfirstelement = (
<div>
<span>
<h1>Hello World</h1>
</span>
<span>
<h1>Hello Dad</h1>
</span>
<span>
<h1>Hello Mom</h1>
</span>
</div>
);React Components
Components āļāļģāđāļŦāđāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāđāļ UI āļāļĩāđāļĄāļĩāļāļ§āļēāļĄāļāļąāļāļāđāļāļāļāļāļāđāļāđāļāļŠāđāļ§āļāđāļĨāđāļāđāļāļĩāđāļāļģāļāļēāļāđāļāđāļāļĒāđāļēāļāļāļīāļŠāļĢāļ° āđāļĨāļ°āļŠāļēāļĄāļēāļĢāļāļāļģāđāļāđāļāđāļāđāļģāđāļāđ āđāļ React āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļŠāļĢāđāļēāļ Components āđāļāđāđāļāļ function āđāļĨāļ° class āļāļķāđāļāļāļķāđāļāļāļĒāļđāđāļāļąāļāļāļēāļĢāļāļģāđāļāđāļāđāļāļēāļ āđāļāđāļāļąāđāļāļāļđāđāļāļ° return āļāļāļāļĄāļēāđāļāđāļāđāļŦāļĄāļ·āļāļ HTML element āļāļąāđāļ§āđāđāļ
Function Component
āļ§āļīāļāļĩāļāļĩāđāļāđāļēāļĒāļāļĩāđāļŠāļļāļāļāđāļāļ·āļāļŠāļĢāđāļēāļāđāļāļ function āđāļāļĒāđāļĢāļēāļŠāļĢāđāļēāļ JavaScript āļāļąāļāļāđāļāļąāļāļāļĢāļĢāļĄāļāļēāđ āļāļĩāđ return āļāđāļēāđāļāđāļ HTML āļāđāļāļ āļāļąāļ§āļāļĒāđāļēāļāđāļāđāļ
function Hello() {
return <h1><i>Hello BorntoDev</i></h1>;
}āđāļāđāļāļĩāđāļāđāđāļāđāđāļāđāļ component āļāļāļāļĄāļēāđāļĨāđāļ§āļŦāļāļķāđāļāļāļąāļ§ āļāļēāļĢāļāļģāđāļāđāļāđāļāļēāļāļāđāļŠāļēāļĄāļēāļĢāļāđāļāđāļāļēāļāļāļąāļ ReactDOM.render āđāļāđāđāļĨāļĒ
ReactDOM.render(<Hello />, document.getElementById('root'));āļāļ°āđāļŦāđāļāļ§āđāļēāđāļĢāļēāđāļĢāļĩāļĒāļāđāļāđ component āļāļ·āđāļ Hello āđāļāđāđāļŦāļĄāļ·āļāļāđāļāđāļāļēāļ HTML āļāļāļāļīāđāļĨāļĒ āļāļĨāļĨāļąāļāļāđāļāļĩāđāđāļāđ
Class Component
āļŠāļĢāđāļēāļ class āļāļĩāđ extends āļāļēāļ React.Component āđāļāļĒāļāđāļēāļāļĩāđāļĢāļĩāđāļāļīāļĢāđāļāļāđāđāļāđāļ HTML āđāļŦāļĄāļ·āļāļāļāļāļāļāļĩāđāļŠāļĢāđāļēāļ Function Component āđāļāđāļāđāļēāļŠāļĢāđāļēāļāđāļāđāļāđāļāļāļāļĨāļēāļŠāļāļ°āļĄāļĩāļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāđāļāļāļēāļĢāđāļāđāļāļēāļāļĄāļēāļāļāļ§āđāļēāđāļāļ Function āļāļąāļ§āļāļĒāđāļēāļ component āļāļ·āđāļ Hello āļāđāļāļāļŦāļāđāļēāļāļĩāđ āļāđāļēāđāļāļēāļĄāļēāđāļāļĩāļĒāļāđāļāļ class āļāļ°āļŠāļēāļĄāļēāļĢāļāđāļāļĩāļĒāļāđāļĨāļ°āđāļĢāļĩāļĒāļāđāļāđāļāļēāļāđāļāđāđāļāļāļāđāļēāļāļĨāđāļēāļāļāļĩāđ
class Hello extends React.Component {
render() {
return <h1><i>Hello BorntoDev</i></h1>;
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));React Props
Props āļāļ·āļāļāļąāļ§āđāļāļĢāļāļĩāđāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļŠāđāļāđāļāđāļēāđāļāđāļ React Components āđāļāđāļāđāļēāļāļāļēāļ HTML Attribute āļāļģāđāļŦāđ component āđāļāđāļĨāļ°āļāļąāļ§āļŠāļēāļĄāļēāļĢāļāļĢāļąāļāļāđāļēāđāļāđāļēāđāļāļāļģāļāļēāļāđāļāđ āļāļēāļÂ component <Hello /> āļāļāļāđāļĢāļēāļāđāļēāđāļĢāļēāļāļ°āļŠāđāļāļāđāļēāļāļēāļāļāļĒāđāļēāļāđāļāđāļēāđāļāļāđāļēāļ props āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļāļģāđāļāđāđāļāļāļāļĩāđ
Function Component
function Hello(props) {
return <h1>Hello {props.name}</h1>;
}Class Component
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}āđāļĢāļĩāļĒāļāđāļāđ
ReactDOM.render(<Hello name="Pororo" />, document.getElementById('root'));āļāļĨāļĨāļąāļāļāđ
Component āļŠāļēāļĄāļēāļĢāļāļāļĒāļđāđāđāļ Component āđāļāđ
āļĨāļąāļāļĐāļāļ°āļāļēāļĢāđāļāļĩāļĒāļāđāļāđāļ React āļāļąāđāļāļāļ·āļāļāļēāļĢāđāļāđāļāļŠāđāļ§āļ UI āļāļāļāđāļāđāļāļāļīāđāļāđāļĨāđāļāđ āđāļāđāļāļāļāļ§āđāļēāļāļīāđāļāļŠāđāļ§āļāđāļŦāļĨāđāļēāļāļąāđāļāļāđāļāļāļŠāļēāļĄāļēāļĢāļāļāļģāļĄāļēāđāļāđāļĢāđāļ§āļĄāļāļąāļāđāļāđ āđāļ component āđāļāđāļĨāļ°āļāļąāļ§āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļĢāļĩāļĒāļāđāļāđ component āļāļ·āđāļāđāđāļ§āđāļāđāļēāļāđāļāđāļāđāļāđāļ§āļĒ
function Someone() {
const everyone = ['John', 'See', 'Na'];
var anyone = everyone[Math.floor(Math.random() * everyone.length)];
return <span>and {anyone}</span>;
}
class Hello extends React.Component {
render() {
return (
<div>
Hello {this.props.name} <Someone />
</div>
);
}
}
ReactDOM.render(<Hello name="Pororo" />, document.getElementById('root'));āļāļĨāļĨāļąāļāļāđāļāļĩāđāđāļāđ
React State
āđāļ React Components āļāļ°āļĄāļĩ object āļāļĩāđāļāļ·āđāļāļ§āļ§āđāļē state āļāļĒāļđāđāļāđāļēāļāđāļāļāđāļ§āļĒ āļāļķāđāļāđāļāđāļŠāļģāļŦāļĢāļąāļāđāļāđāļāļāļąāļ§āđāļāļĢāđāļāđāļāļāđāļēāļāđāļēāļāđāļŠāļģāļŦāļĢāļąāļāđāļāđāđāļ component
āļŠāļĢāđāļēāļ State Object
āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļŠāļĢāđāļēāļ state āđāļāļ·āđāļāđāļāđāļāļēāļāđāļāđāđāļ constructure āļāļāļ Class Component
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
fname: "Nama",
lname: "Chocolate",
age: 20
}
}
render() {
return (
<div>
Hello
</div>
);
}
}āđāļāđāļāļēāļ State
State Object āļŠāļēāļĄāļēāļĢāļāđāļĢāļĩāļĒāļāđāļāđāļāļēāļāđāļāđāļāļļāļāļāļĩāđāđāļ component āđāļāļĒāļĄāļĩāļĢāļđāļāđāļāļāļāļ·āļ this.state.AttributeName
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
fname: "Nama",
lname: "Chocolate",
age: 20
}
}
render() {
return (
<div>
Hello, my name is {this.state.fname} {this.state.lname} ({this.state.age})
</div>
);
}
}āđāļāļĨāļĩāđāļĒāļāļāđāļē State
āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĨāļĩāđāļĒāļāđāļāļĨāļāļāđāļēāđāļ state āđāļāđāđāļŦāļĄāļ·āļāļāļāļąāļāđāļāđāļāļēāļāļāļąāļ§āđāļāļĢāļāļąāđāļ§āđāđāļ āđāļāđāđāļ component āļāļąāđāļāļāđāļēāļŦāļēāļ state āļĄāļĩāļāļēāļĢāđāļāļĨāļĩāđāļĒāļāđāļāļĨāļāļāđāļēāđāļ component āļāļ°āļāļđāļ render āđāļŦāļĄāđāđāļāļĒāļāļąāļāđāļāļĄāļąāļāļīāļāđāļ§āļĒ
āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĨāļĩāđāļĒāļāļāđāļēāđāļ state āđāļāđāļāđāļ§āļĒāļāļģāļŠāļąāđāļÂ
this.setState({
AttributeName: value
})āđāļāļāļĩāđāļāļĩāđāđāļĢāļēāļāļāļ°āļŠāļĢāđāļēāļāļāļļāđāļĄāļāļĩāđāļāļāđāļĨāđāļ§āļāļģāļāļēāļĢāđāļāļĨāļĩāđāļĒāļāļāđāļēāđāļ state
<button
type="button"
onClick={this.changeName}
>Change Name</button>āđāļāđāļāđāļāļŠāļĢāđāļēāļāļāļļāđāļĄāļāļ°āđāļŦāđāļāļ§āđāļēāļĄāļĩ attribute āļāļ·āđāļ onClick āļāļĩāđāđāļŦāļĄāļ·āļāļāđāļāđāļ HTML attribute āļāļāļāļīāđāļāđāļāđāļēāļŠāļąāļāđāļāļāļāļ°āđāļŦāđāļāļ§āđāļē C āđāļāļāļģāļ§āđāļē Click āđāļāđāļāļāļąāļ§āļāļīāļĄāļāđāđāļŦāļāđ āļāđāļēāđāļ HTML āļāļāļāļīāļāļ°āđāļāđāļ onclick āļāļąāđāļāđāļāļĢāļēāļ°āļāļĢāļīāļāđāđāļĨāđāļ§āđāļ§āļĨāļēāđāļĢāļēāļŠāļĢāđāļēāļ attribute āđāļāļ JSX āđāļāđāļĨāļ° attribute āđāļ HTML āļāļĩāđāđāļĢāļēāđāļŦāđāļāđāļāđāļ JSX attribute āđāļĄāđāđāļāđ HTML attribute āļāļĢāļĢāļĄāļāļēāļāļąāđāļāđāļāļ
āđāļĢāļēāļāļģāļŦāļāļāļāļēāļĢāļāļģāļāļēāļāļāļāļāļāļļāđāļĄāđāļŦāđāđāļĄāļ·āđāļāļāļĨāļīāļāđāļĨāđāļ§āđāļāđāļĢāļĩāļĒāļāļāļąāļāļāđāļāļąāļāļāļ·āđāļ changeName āļāļķāđāļāļĄāļĩāđāļāđāļāļāļĩāđāļāļģāļāļēāļĢāđāļāļĨāļĩāđāļĒāļāļāđāļēāđāļ state āļāļĒāļđāđāļāđāļēāļāđāļ (āļāļąāļāļāđāļāļąāļāđāļāļ ES6 āļāļĩāđāđāļāđāļāļĄāļēāļāļĢāļāļēāļāđāļ React)
changeName = () => {
this.setState({
fname: "Spicy",
lname: "Lemon"
})
}āļĢāļ§āļĄāđāļāđāļ component āļāļĩāđāļĄāļĩāļŦāļāđāļēāļāļēāđāļāļāļāļĩāđ
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
fname: "Nama",
lname: "Chocolate",
age: 20
}
}
changeName = () => {
this.setState({
fname: "Spicy",
lname: "Lemon"
})
}
render() {
return (
<div>
<p>Hello, my name is {this.state.fname} {this.state.lname} ({this.state.age})</p>
<button
type="button"
onClick={this.changeName}
>Change Name</button>
</div>
);
}
}āļŦāļāđāļēāļāļēāđāļ§āđāļāļāđāļāļāļāļāļāļļāđāļĄ
āļŦāļĨāļąāļāļāļāļāļļāđāļĄ
āļāļ°āđāļŦāđāļāļ§āđāļēāļāļķāļāđāļĄāđāđāļāđāļāđāļāļāļ°āđāļĄāđāđāļāđāļāļģāļŠāļąāđāļāđāļŦāđ render āđāļŦāļĄāđ āđāļāđāđāļĄāļ·āđāļāļāđāļēāđāļ state āđāļāļĨāļĩāđāļĒāļāđāļāļĨāļāđāļ component āļāļ°āļāļąāļāđāļāļāļāļāļĒāļāļąāļāđāļāļĄāļąāļāļīāđāļĨāļ°āđāļŠāļāļāļāļĨāļāļąāļāļāļĩ
āļŠāļģāļŦāļĢāļąāļ React āļāđāđāļāđāļāļāļĩāļāļŦāļāļķāđāļ library āđāļāļāļēāļĢāļŠāļĢāđāļēāļ UI āļāļĩāđāļāđāļēāļŠāļāđāļ āļāđāļēāđāļāļĢāļāđāļēāļāđāļĨāđāļ§āļāļĒāļēāļāļĨāļāļāđāļāđāļāđāļŠāļēāļĄāļēāļĢāļāļĻāļķāļāļĐāļēāđāļāļīāđāļĄāđāļāļīāļĄāļāļēāļ toturial āļāļāļ React āļāđāđāļāđāļāļ° āđāļāđāļāļāļēāļĢāļāļģāđāļāļĄ Tic-Tac-Toe āđāļĨāļ°āđāļĢāļĩāļĒāļāļĢāļđāđāļāļēāļĢāđāļāđāļāļēāļ React āđāļāđāļāđāļĨāļ°āđāļĢāļ·āđāļāļāđāļāđāļāļāļąāļ§ āļāļāđāļāļāļđāļāļĩāđāļĨāļīāļāļāđāļāļĩāđāđāļāđāđāļĨāļĒ https://reactjs.org/tutorial/tutorial.html
āļāđāļāļĄāļđāļĨāļāđāļēāļāļāļīāļāđāļĨāļ°āđāļāđāļāļāļąāļ§āļāļĒāđāļēāļāļāļēāļ
āļŦāļēāļāļāļļāļāļŠāļāđāļāļāļąāļāļāļē āļŠāļāļēāļĢāđāļāļāļąāļ āđāļāļāļāļĨāļīāđāļāļāļąāļ āđāļĨāļ° āđāļāļāđāļāđāļĨāļĒāļĩāļāļāļāļāļąāļ§āđāļāļ ?
āļāļĒāđāļēāļĢāļāļāđāļē ! āđāļĢāļĩāļĒāļāļĢāļđāđāļāļąāļāļĐāļ°āļāđāļēāļāļāļīāļāļīāļāļąāļĨāđāļāļ·āđāļāļāļąāļāđāļāļĢāļāļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāļāļāļāļāļļāļ
āđāļĢāļīāđāļĄāļāļąāđāļāđāļāđāļāļ·āđāļāļāļēāļ āļāļĢāđāļāļĄāļāļāļīāļāļąāļāļīāļāļĢāļīāļāđāļāļĢāļđāļāđāļāļāļŦāļĨāļąāļāļŠāļđāļāļĢāļāļāļāđāļĨāļāđāļ§āļąāļāļāļĩāđ
-
āļĨāļāļĢāļēāļāļē!
-
āļĨāļāļĢāļēāļāļē!
-
āļĨāļāļĢāļēāļāļē!
-
āļĨāļāļĢāļēāļāļē!
