node --version
npm --version
npm install <package> # local
npm i <package> # local
npm install <package1> <package2> ...
npm install -g <package>
npm install react <local>
npm install react
npm init
npm init -y
npm install # install all package.json (or package-lock.json)
npm install --save-dev react
npm install react react-dom
npm install -g create-react-app
create-react-app --version
create-react-app hackernews
npm test
npm test
npm run build
تفاوت let و var
1- let بلوکی اما var تابعی
2- در let از قبل دسترسی نداریم اما در var از قبل undefined است
3- let از طریق window دسترسی نداریم
4- var را می توانیم دوباره تعریف کنیم اما let را نه
ReactDOM.render(component, element)
//example:
ReactDOM.render(
<div>
<comp1>
<comp2>
</div>
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
(item) => { ... }
item => { ... }
x => x*2 :: function (x) { return x*2 }
//app.js
const arrToShow = [
{
objID: 0,
title: 'react',
exp: 'this is a book about react'
},
{
objID: 1,
title: 'native',
exp: 'this is a book about react native and mobile apps'
}
]
function App() {
return (
<>
{arrToShow.map(item =>
[<span>Number:</span>,<span>{item.objID}</span>,<br></br>,
<span>title:</span>,<span>{item.title}</span>,<br></br>,
<span>exp:</span>,<span>{item.exp}</span>,<br></br>]
)}
</>
);
}
export default App;
import React from 'react';
import logo from './logo.svg';
import './App.css';
const arrToShow = [
{
objID: 0,
title: 'react',
exp: 'this is a book about react'
},
{
objID: 1,
title: 'native',
exp: 'this is a book about react native and mobile apps'
}
]
function App() {
return (
<div>
{arrToShow.map(item =>
<>
<span>{item.title}</span><br></br>
<span>{item.title}</span><br></br>
<span>{item.title}</span><br></br>
<span>{item.title}</span><br></br>
</>
)}
</div>
);
}
export default App;
class App extends Component {
constructor(props) {
super(props);
this.onDismiss = this.onDismiss.bind(this)
}
sayhello() {
}
onDismiss(id) {
list.push({
title: 'ghol',
name: 'shol',
age: '78',
objNum: 3
})
this.setState({list: list})
}
render() {
return (
<>
{list.map(item =>
<div key={item.objNum}>
<span>{item.title}</span>
<button onClick={() => this.onDismiss(item.objNum)}>add</button>
</div>
)}
</>
)
}
}
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX; // in fact unboundGetX is return this.x and this means nothing here cause it's not refering to module;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42
// now you can understand:
this.func = this.func.bind(this)
حالا در داخل تابع this.func وقتی که از کلمه ی کلیدی this استفاده می کنی یعنی داری به همین کامپوننت اشاره می کنی نه undefiend
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
let list = [
{
title: 'react',
objNum: 1
},
{
title: 'react native',
objNum: 2
},
{
title: 'angular',
objNum: 3
}
]
class App extends Component {
constructor (props) {
super(props)
this.change = this.change.bind(this)
this.state = {
list: list,
term: ''
}
}
change (inputVal) {
// alert(inputVal)
// console.log(inputVal)
this.setState({term: inputVal}, () => this.setState({list: this.state.list.filter(item => item.title.includes(this.state.term))}))
}
render () {
return (
<div className="main-wrapper">
<div className="main-c">
<Search onChange={(item) => this.change(item)}/>
<Table list={this.state.list} />
</div>
</div>
)
}
}
class Search extends Component {
constructor (props) {
super(props)
this.state = {}
}
render () {
const {onChange} = this.props
return (
<div className="topBar-c">
<input className="searchInput" onChange={(ev) => onChange(ev.target.value)} autoFocus></input>
</div>
)
}
}
class Table extends Component {
render () {
const {list, onClick} = this.props
return (
<div className="results-c">
{list.map(item =>
<div className="result-c" key={item.objNum}>
<div>{item.title}</div>
<div className="jj">
<div onClick={onClick}>dismiss</div>
</div>
</div>
)}
</div>
)
}
}
export default App;