entry: {
application: /* ... */
},
....
plugins: {
new webpack.optimize.CommonsChunkPlugin({
name: 'application', // <--- Так же как и entryPoint
async: "vendors", // <--- будет использовано как имя файла (можно оставить просто true). "vendors.js"
children: true,
minChunks: 2 // <--- должно быть >= 2
})
}{
entry: {
main: './reactStartup.js'
},
output: {
filename: '[name]-bundle.js',
chunkFilename: '[name]-chunk.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
async: true,
children: true,
minChunks: 2,
}),
]
}// .babelrc
{
"plugins": [
"syntax-dynamic-import"
]
}"presets": [
[
"env",
{
"targets": {
"node": "current",
"browsers": "last 2 versions"
},
"modules": false,
"loose": true
}
],
"react",
],const Item = props => (
<li>{props.data.title}</li>
)
const List = props => (
<ul>{props.items.map(item => <Item data={item} />}</ul>
)
const ConnectedList = connect(
state => ({ items: state.someItems })
)(List)const Item = props => (
<li>{props.data.title}</li>
)
const ConnectedItem = connect(
(state, props) => ({ data: state.someItems.entities[props.id] })
)(Item)
const List = props => (
<ul>{props.items.map(id => <ConnectedItem id={id} />}</ul>
)
const ConnectedList = connect(
state => ({ items: state.someItems.ids })
)(List)fetch('http://country.io/names.json')
.then(r => r.json())
.then(names => console.log('Names arrived!', names)class MyComponent extends PureComponent {
clickHandler = () => {
// Так как это стрелочная функция - она будет забиндена при создании элемента (объекта)
}
render() {
return (
<SearchCollection onClick={this.clickHandler}/>
)
}
}class MyComponent extends PureComponent {
constructor(props, context) {
super(props, context)
this.clickHandler = this.clickHandler.bind(this)
}
clickHandler() {
}
render() {
return (
<SearchCollection onClick={this.clickHandler}/>
)
}
}но на клиенте, как раз наоборот, если дела обстоят с промисами, то каждая цепочка вызова функцию ждут друг-друга, т.е поочередно.
return (
<El />
)render() {
return this.renderChildren(this.props);
}const app = express()
// раздача статики (css, fonts, images, ...)
app.use('/static/', express.static(__dirname + '/../../public/static'))
app.get('/*', (req, res) => {
res.send(/* ваш index.html */)
})class MyElement extends Component {
componentDidMount() {
// начиная с этого момента у вас есть доступ к
// this.container - это ссылка на DOM ноду (или реакт-элемент)
jQuery(this.container) // например используем джейквери
// или вызовем метод элемента
// выведет в консоль 'Wow, so super!'
this.componentWithMethod.mySuperMethod()
}
handle3dPartyContainerRef = node => {
this.container = node
}
handleComponentRef= node => {
this.componentWithMethod= node
}
render() {
return (
<div>
<h1>Hello!</h1>
<div ref={this.handle3dPartyContainerRef} />
<ComponentWithMethod ref={this.handleComponentRef} />
</div>
)
}
}
class ComponentWithMethod extends Component {
mySuperMethod = () => {
// Вот так можно добавить метод к элементу
// вызывать его можно если получить ссылку на установленный в DOM элемент
console.log('Wow, so super!')
}
render() {
return (
<span>just a node</span>
)
}
}<Router>
<App>
<Route exact path="/" component={Home}/>
<Route path="/item0" component={Item0}/>
<Route path="/item1" component={Item1}/>
</App>
</Router>,<Router basename="/joonline"/>
<App>
<Route exact path="/" component={Home}/>
<Route path="/item0" component={Item0}/>
<Route path="/item1" component={Item1}/>
</App>
</Router>,