🎉

Author: Bunlong

.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,25 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```console
+yarn install
+```
+
+## Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

blog/2019-05-28-hola.md

@@ -0,0 +1,11 @@
+---
+slug: hola
+title: Hola
+author: Gao Wei
+author_title: Docusaurus Core Team
+author_url: https://github.com/wgao19
+author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

blog/2019-05-29-hello-world.md

@@ -0,0 +1,17 @@
+---
+slug: hello-world
+title: Hello
+author: Endilie Yacop Sucipto
+author_title: Maintainer of Docusaurus
+author_url: https://github.com/endiliey
+author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
+tags: [hello, docusaurus]
+---
+
+Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).
+
+<!--truncate-->
+
+This is a test post.
+
+A whole bunch of other information.

blog/2019-05-30-welcome.md

@@ -0,0 +1,13 @@
+---
+slug: welcome
+title: Welcome
+author: Yangshun Tay
+author_title: Front End Engineer @ Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
+tags: [facebook, hello, docusaurus]
+---
+
+Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
+
+Delete the whole directory if you don't want the blog features. As simple as that!

docs/home.md

@@ -0,0 +1,18 @@
+---
+id: home
+title: React Patterns
+sidebar_label: Introduction
+description: React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Introduction
+image: /img/reactpatterns-cover.png
+slug: /
+---
+
+React Patterns, techniques, tips and tricks in development for Ract developer.
+
+To get the latest React patterns follow us on:
+
+* Twitter: <a href="https://twitter.com/reactjspatterns">@reactjspatterns</a>
+* Github: <a href="https://github.com/reactpatterns/reactpatterns">@reactpatterns</a>
+* Facebook: <a href="https://www.facebook.com/ReactJSPatterns">@reactjspatterns</a>

docs/make-the-api-call-in-componentdidmount.md

@@ -0,0 +1,37 @@
+---
+id: make-the-api-call-in-componentdidmount
+sidebar_label: Make the API call
+title: Make the API Call in componentDidMount()
+description: Make the API call in componentDidMount(), techniques, tips and tricks in development for Ract developer.
+keywords: ['make the api call in componentDidMount()', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Make the API call in componentDidMount()
+image: /img/reactpatterns-cover.png
+---
+
+You should populate data with AJAX calls in the `componentDidMount` lifecycle method. So you can use setState to update your component when the data is retrieved.
+
+For example using Class:
+
+```js
+function componentDidMount() {
+  fetch('api/sms')
+    .then(result => {
+      const sms = result.data
+      console.log('COMPONENT WILL Mount messages : ', sms)
+      this.setState({sms: [...sms.content]})
+    })
+}
+```
+
+For example using Hook:
+
+```js
+useEffect(() => {
+  fetch('api/sms')
+    .then(result => {
+      const sms = result.data
+      console.log('COMPONENT WILL Mount messages : ', sms)
+      this.setState({sms: [...sms.content]})
+    })
+}, [])
+```

docs/mdx.md

@@ -0,0 +1,17 @@
+---
+id: mdx
+title: Powered by MDX
+---
+
+You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
+
+export const Highlight = ({children, color}) => ( <span style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}>{children}</span> );
+
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my _JSX_!

docs/proxy-component.md

@@ -0,0 +1,31 @@
+---
+id: proxy-component
+sidebar_label: Proxy component
+title: Proxy Component
+description: Proxy Component | React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['proxy component', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Proxy Component
+image: /img/reactpatterns-cover.png
+---
+
+A proxy component is a placeholder component that can be rendered to or from another component. In short a proxy component is a reusable component.
+
+For example:
+
+```jsx
+import React from 'react'
+
+class Button extends React.Component {
+  render() {
+    return <button type="button">My Button</button>
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return <Button />
+  }
+}
+
+export default App
+```

docs/stateless-function.md

@@ -0,0 +1,96 @@
+---
+id: stateless-function
+sidebar_label: Stateless function
+title: Stateless Function (Presentational Component)
+description: Stateless function (Presentational component) | React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['Stateless function', 'statelessfunction', 'presentational component', 'presentationalcomponent', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Stateless function (Presentational component)
+image: /img/reactpatterns-cover.png
+---
+
+## What is Stateless Function?
+
+* Stateless function is a way to define React components as a function. Rather than as a class or via `React.createClass`.
+* Stateless function does not hold state; just props.
+
+## For examples
+
+Without stateless function, write a presentational component that is just renders props, and doesn't has state.
+
+```js
+const UserPassword = React.createClass({
+  render() {
+    return <p>The user password is: {this.props.userpassword}</p>
+  },
+})
+
+// OR
+
+class Userpassword extends React.Component {
+  render() {
+    return <p>The user password is: {this.props.userpassword}</p>
+  }
+}
+```
+
+With stateless function.
+
+```js
+const UserPassword = function(props) {
+  return <p>The user password is: {this.props.userpassword}</p>
+};
+```
+
+With stateless function, arrow function, destructuring and implicit return.
+
+```js
+const UserPassword = ({userpassword}) => <p>The user password is: {userpassword}</p>
+```
+
+Stateless function is great for styling as well.
+
+```js
+const PrimaryButton = props => {
+  const styles = { background: 'red', color: 'white' }
+
+  return <button {...props} style={styles} />
+}
+```
+
+Stateless function with event handlers.
+
+```js
+const Button = props => {
+  const onClick = e => console.log('You clicked me!')
+
+  return <button onClick={onClick}>Click me!</button>
+};
+```
+
+Stateless function can have defined defaultProps, propTypes.
+
+```js
+import PropTypes from 'prop-types'
+
+const UserPassword = props => <p>The user password is: {this.props.userpassword}</p>
+
+UserPassword.propTypes = {
+  userpassword: PropTypes.string.isRequired,
+}
+
+Username.defaultProps = {
+  username: 'Jonh',
+}
+```
+
+Stateless function can have defined contextTypes (when using context, it's simply passed in as the second argument).
+
+```js
+import PropTypes from 'prop-types'
+
+const UserPassword = (props, context) => <p>User password is {context.password}</p>
+
+WowComponent.contextTypes = {
+  password: PropTypes.string.isRequired,
+}
+```