ant-design & react click bug!

ant-design-react-click-bug.md

ant-design & react click bug!

ant-design/ant-design#6576

prevent-react-component-click-event-bubble-to-document

https://stackoverflow.com/questions/44711549/how-to-prevent-react-component-click-event-bubble-to-document

    
//todo

Dynamically add child components in React

https://stackoverflow.com/questions/36651583/dynamically-add-child-components-in-react

    
var App = React.createClass({

    getInitialState: function(){
        return [
            {id:1,name:"Some Name"}
        ]
    },

    addChild: function() {
        // State change will cause component re-render
        this.setState(this.state.concat([
            {id:2,name:"Another Name"}
        ]))
    }

    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                {
                    this.state.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }

});

<Component {...this.props} more="values" />

https://gist.github.com/xgqfrms-gildata/c547bf26178fbc7b35d7f8458eed4fbd

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const names = ["Sara","Cahal", "Edite"];

function App() {
  return (
    <div>
      {names.map((name)=>{
        return <Welcome name={name} />;
      })}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

https://jsfiddle.net/reactjs/69z2wepo/
https://codepen.io/gaearon/pen/KgQKPr?editors=0010

https://codepen.io/bradleyboy/pen/OPBpGw
https://github.com/bradleyboy/codepen-react

https://cdnjs.com/libraries/react-router-dom

https://gist.github.com/xgqfrms-GitHub/83f022cd3274d923a1adb7cb33a69605

props

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author} />,
  document.getElementById('root')
);

https://facebook.github.io/react/docs/components-and-props.html#extracting-components

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/g/64/64'
  }
};
ReactDOM.render(
  {/* es6 destructuring assignment*/}
  <Comment {...comment} />,
  document.getElementById('root')
);

// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

解构赋值 语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

regex visualization

https://regexper.com/#%2F%5E(%5Cw%2B)%5C%3A%5C%2F%5C%2F(%5B%5E%5C%2F%5D%2B)%5C%2F(.*)%24%2F

https://github.com/javallone/regexper-static

tools

http://www.regexplanet.com/

regex-match-group

http://www.regextester.com/

XML to JSON

https://www.freeformatter.com/xml-to-json-converter.html

XMLSpyEnt2017

https://www.altova.com/

react-nanodegree

https://cn.udacity.com/course/react-nanodegree--nd019/

https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd019/ReactNDsyllabusZH.pdf

https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd019/ReactNDsyllabusEN.pdf

Books APIs

https://developers.google.com/books/docs/viewer/developers_guide

https://www.diaochapai.com/

https://developers.google.com/books/docs/v1/using

https://openlibrary.org/dev/docs/api/books

https://www.goodreads.com/

https://www.goodreads.com/api

https://placekitten.com/

function formatDate(date) {
  return date.toLocaleDateString();
}

function PropsTest(props) {
  return (
    <div>
      <h1>just props test!</h1>
      <span>My name is {props.name}</span>
      <h1>Age:{props.age}</h1>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
      <hr />
      <PropsTest {...infos}/>
    </div>
  );
}

const infos = {
  name: 'xgqfrms',
  age: 23
};
const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/72/72'
  }
};
ReactDOM.render(
  {/* es6 destructuring assignment*/}
  <div>
    <Comment {...comment} />
    <PropsTest {...infos}/>
  </div>,
  document.getElementById('root')
);

https://codepen.io/anon/pen/xrLRZp?editors=0010

A GIF is worth a thousand words:

https://facebook.github.io/react/blog/

https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

http://2ality.com/2017/01/import-operator.html#loading-code-on-demand

https://webpack.js.org/guides/migrating/#code-splitting-with-es2015

https://webpack.js.org/guides/code-splitting-async

function onClick() {
  import("./module").then(module => {
    return module.default;
  }).catch(err => {
    console.log("Chunk loading failed");
  });
}

function formatDate(date) {
  return date.toLocaleDateString();
}

function PropsTest(props) {
  return (
    <div>
      <h1>just props test!</h1>
      <span>My name is {props.name}</span>
      <h1>Age:{props.age}</h1>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
      <hr />
      <PropsTest {...infos}/>
    </div>
  );
}

const infos = {
  name: 'xgqfrms',
  age: '23'
};

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'http://placekitten.com/72/72'
  }
};
ReactDOM.render(
  <div>
     <Comment {...comment} />
     <PropsTest {...infos}/>
  </div>,
  document.getElementById('root')
);

https://codepen.io/anon/pen/xrLRZp

json-server

$ npm install -g json-server



https://github.com/typicode/json-server



$ json-server --watch db.json



json-server --watch data.json --port 8888


http://localhost:8888/

https://stackoverflow.com/questions/44711549/how-to-prevent-react-component-click-event-bubble-to-document

https://onedrive.live.com/edit.aspx?cid=720e28dc4819ec09&page=view&resid=720E28DC4819EC09!104&parId=720E28DC4819EC09!103&app=Word

http://editorconfig.org/

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 4

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 4

Ant bug & Solution

https://gist.github.com/xgqfrms-GitHub/4cf5cc3a67a9ed094cf008f13457bfac