Step by step building the recipe app in react & flux.
Home Page: https://github.com/FormidableLabs/react-flux-concepts
i download your code and then run
npm install
warn: npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]
npm start[email protected] start E:\ITDocument\Nodejs\react-flux-concepts-maste
r
http-server -p 9009
Starting up http-server, serving ./
Available on:
http:192.168.1.108:9009
http:127.0.0.1:9009
Hit CTRL-C to stop the server
i visit 'http:127.0.0.1:9009', cmd get a error Following :
Hi guys, great work. Thanks for posting to Youtube so East-Coasters like me can follow along. Can someone share their solution to this problem? here is mine, which is not working:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<!--https://medium.com/react-tutorials/react-state-14a6d4f736f5
http://facebook.github.io/react/docs/tutorial.html#reactive-state -->
<script type="text/jsx">
/**
*
* Assignment:
*
* 1. Add a hover event to the div with the on click (http://facebook.github.io/react/docs/events.html)
* 2. Add a new callback that calls setState
* 3. Change something on screen (the text, etc.)
*
*/
var Recipe = React.createClass({
getInitialState : function() {
return {
dropDownIsOpen : false,
showText: false
};
},
handleClick : function() {
this.setState({
dropDownIsOpen : !this.state.dropDownIsOpen
});
},
handleHover : function (){
this.setState({
showText : !this.state.showText
});
},
renderDropdown: function () {
return (
<div style={{ background: "#ccc" }}>
I am a dropdown!
</div>
);
},
renderText: function(){
return(
<div>
I am some text yo!
</div>
);
},
render : function() {
var dropdown = this.state.dropDownIsOpen ? this.renderDropdown() : null; var showText = this.state.showText ? this.renderText(): this.state.showText = false;
return (
<div onClick={this.handleClick} onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}>
Click me!
{dropdown}
</div>
)
}
});
React.render(
<Recipe />,
document.body
);
</script>
</body>
</html>Hey @colinmegill I'm working through the Workshops you held at SeattleJS. Unfortunately I'm on the east coast and I wanted to know where I can find your solution to 006.3 that was mailed out.
I have my own implementation but wanted to compare. Care to include it in the repo? Thanks!
May be outside the scope of your learning modules, but thought I'd drop this here in case you were interested.
https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.9wchkw5td
It would be bad practise to use a mapping function's index as the keys to the generation of multiple children, as it may cause unexpected results when the data source would get updated, especially on the addition/removal of items. The fix would be to use some kind of id would within the data source that makes each item unique, though I understand that this may be outside the scope of your learning modules as you're surely trying to show the fundamentals of React.
When I try to open 006-flux.html I get the following error in Chrome, after clicking on "Add recipe".
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.