ReactJS(5)Composition vs Inheritance
Composition VS Inheritance
function FancyBorder(props){
return (
<div className={‘FancyBorder FacyBorder-‘ + props.color}> {props.children} </div>
);
}
function WelcomeDialog(){
return (
<FancyBorder color=“blue”>
<h1 className=“Dialog-title”> Welcome </h1>
<p className=“Dialog-message”> Thank you for visiting our spacecraft! </p>
</FancyBorder>
);
}
Anything inside the <FancyBorder> JSX tag gets passed into the FancyBorder component as a children prop.
Thinking in React
https://facebook.github.io/react/docs/thinking-in-react.html
Client Side
Checkout example project
https://github.com/jackhutu/jackblog-react
Start the project
>npm install
my npm version is 5.0.2
Start to debug
>npm start dev
Some small changes in the file
>git diff src/components/Toaster/index.js
- const { msg } = nextProps
- const { hideMsg } = this.props
+ const msg = nextProps
+ const hideMsg = this.props
Server Side
https://github.com/jackhutu/jackblog-api-express
>npm install
Start develop
>gulp serve
Exceptions:
events.js:182
throw er; // Unhandled 'error' event
^
Error: The module '/Users/carl/work/jackblog/jackblog-api-express/node_modules/ccap/build/Release/hcaptha.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 48. This version of Node.js requires
NODE_MODULE_VERSION 57. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
Solution:
>sudo npm install -g gulp
Start Mongo and Redis
>bin/redis-server
>bin/mongod -f conf/mongodb.conf
Start the Server Side
>gulp serve
Read the Detail as well
https://github.com/jackhutu/jackblog-api-express.git
References:
https://facebook.github.io/react/docs/composition-vs-inheritance.html
https://facebook.github.io/react/docs/thinking-in-react.html
ReactJS(5)Composition vs Inheritance
猜你喜欢
转载自sillycat.iteye.com/blog/2377910
今日推荐
周排行