ReactJS(5)Composition vs Inheritance

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