├── .gatsby-context.js ├── .gitignore ├── LICENSE ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── netlify.toml ├── package.json ├── src ├── components │ ├── logo.js │ ├── menu-desktop.js │ ├── menu-items.js │ ├── menu-mobile.js │ ├── profile-pic.jpg │ └── stars.js ├── css │ ├── main.css │ ├── markdown-styles.css │ ├── menu-desktop.css │ ├── menu-mobile.css │ └── zenburn.css ├── layouts │ └── index.js ├── pages │ ├── 404.md │ ├── _template.jsx │ ├── a11y.md │ ├── add-to-existing-app.md │ ├── additional-topics.md │ ├── animations.md │ ├── books.md │ ├── component-reuse-maintainable.md │ ├── components.md │ ├── components │ │ ├── binding.md │ │ ├── children-api.md │ │ ├── component-types.md │ │ ├── controlled-components.md │ │ ├── events.md │ │ ├── finding-components.md │ │ ├── keys.md │ │ ├── lifecycle-methods.md │ │ ├── props.md │ │ ├── refs.md │ │ ├── rendering.md │ │ └── state.md │ ├── context.md │ ├── creating-a-react-project.md │ ├── css.md │ ├── deep-dive.md │ ├── forms.md │ ├── fun.md │ ├── gotchas.md │ ├── history.md │ ├── index.js │ ├── internationalization.md │ ├── interview-questions.md │ ├── intro.md │ ├── jsx.md │ ├── more-resources.md │ ├── newsletters.md │ ├── patents.md │ ├── patterns.md │ ├── performance.md │ ├── react-ajax.md │ ├── react-elements.md │ ├── react-fiber.md │ ├── react-production.md │ ├── react16.md │ ├── redux-mobx.md │ ├── server-side-rendering.md │ ├── style-guides.md │ ├── svg-react.md │ ├── talks.md │ ├── testing.md │ ├── the-virtual-dom.md │ ├── third-party-libraries.md │ ├── tools.md │ ├── training.md │ ├── videos-courses.md │ └── why-use-react.md ├── svg │ └── Icon.js ├── templates │ └── blog-post.js └── utils │ └── typography.js ├── static ├── favicon.ico └── robots.txt └── yarn.lock /.gatsby-context.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* weak */ 4 | // This file is auto-written and used by Gatsby to require 5 | // files from your pages directory. 6 | module.exports = function (callback) { 7 | var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line 8 | if (module.hot) { 9 | module.hot.accept(context.id, function () { 10 | context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line 11 | return callback(context); 12 | }); 13 | } 14 | return callback(context); 15 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | 40 | .cache/* 41 | 42 | 43 | build/* 44 | .idea 45 | 46 | public/* 47 | 48 | config.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Tim Arney 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React FAQ 2 | 3 | https://reactfaq.site 4 | 5 | This guide aims to pull together quality content about React core concepts into a central location for quick reference. 6 | 7 | Remember we're all learning. Read, Try, Mess Up (it's okay). 8 | 9 | ## Notes 10 | This site is built with [gatsbyjs](https://github.com/gatsbyjs/gatsby) & deploys using [Netlify](https://www.netlify.com/). 11 | 12 | ## Contribute 13 | If you would like to see content added ping me on twitter [@timarney](https://twitter.com/timarney) or checkout the [pages](https://github.com/timarney/react-faq/tree/master/pages) directory + send a pull request. 14 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: "React FAQ", 4 | author: "Tim Arney" 5 | }, 6 | plugins: [ 7 | `gatsby-plugin-react-next`, 8 | { 9 | resolve: `gatsby-source-filesystem`, 10 | options: { 11 | path: `${__dirname}/src/pages`, 12 | name: "pages" 13 | } 14 | }, 15 | { 16 | resolve: `gatsby-transformer-remark`, 17 | options: { 18 | plugins: [ 19 | { 20 | resolve: `gatsby-remark-images`, 21 | options: { 22 | maxWidth: 590 23 | } 24 | }, 25 | { 26 | resolve: `gatsby-remark-responsive-iframe`, 27 | options: { 28 | wrapperStyle: `margin-bottom: 1.0725rem` 29 | } 30 | }, 31 | "gatsby-remark-prismjs", 32 | "gatsby-remark-copy-linked-files", 33 | "gatsby-remark-smartypants" 34 | ] 35 | } 36 | }, 37 | `gatsby-transformer-sharp`, 38 | `gatsby-plugin-sharp`, 39 | `gatsby-plugin-offline`, 40 | `gatsby-plugin-react-helmet`, 41 | { 42 | resolve: "gatsby-plugin-typography", 43 | options: { 44 | pathToConfigModule: "src/utils/typography" 45 | } 46 | } 47 | ] 48 | }; 49 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const _ = require("lodash") 2 | const Promise = require("bluebird") 3 | const path = require("path") 4 | const select = require(`unist-util-select`) 5 | const fs = require(`fs-extra`) 6 | 7 | exports.createPages = ({ graphql, boundActionCreators }) => { 8 | const { createPage } = boundActionCreators 9 | 10 | return new Promise((resolve, reject) => { 11 | const pages = [] 12 | const blogPost = path.resolve("./src/templates/blog-post.js") 13 | resolve( 14 | graphql( 15 | ` 16 | { 17 | allMarkdownRemark(limit: 1000) { 18 | edges { 19 | node { 20 | frontmatter { 21 | path 22 | } 23 | } 24 | } 25 | } 26 | } 27 | ` 28 | ).then(result => { 29 | if (result.errors) { 30 | console.log(result.errors) 31 | reject(result.errors) 32 | } 33 | 34 | // Create blog posts pages. 35 | _.each(result.data.allMarkdownRemark.edges, edge => { 36 | createPage({ 37 | path: edge.node.frontmatter.path, 38 | component: blogPost 39 | }) 40 | }) 41 | }) 42 | ) 43 | }) 44 | } 45 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "public" 4 | 5 | [template.environment] 6 | NODE_ENV = "production" 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-faq", 3 | "description": "React react-faq", 4 | "version": "2.0.1", 5 | "author": "Tim Arney ", 6 | "bugs": { 7 | "url": "https://github.com/timarney/react-faq/issues" 8 | }, 9 | "dependencies": { 10 | "classnames": "^2.2.5", 11 | "gatsby": "^1.9.225", 12 | "gatsby-link": "^1.6.38", 13 | "gatsby-plugin-manifest": "^1.0.15", 14 | "gatsby-plugin-offline": "^1.0.15", 15 | "gatsby-plugin-react-helmet": "^2.0.6", 16 | "gatsby-plugin-react-next": "1.0.10", 17 | "gatsby-plugin-sharp": "^1.6.39", 18 | "gatsby-plugin-typography": "^1.7.17", 19 | "gatsby-remark-copy-linked-files": "^1.5.30", 20 | "gatsby-remark-images": "^1.5.56", 21 | "gatsby-remark-prismjs": "^1.2.17", 22 | "gatsby-remark-responsive-iframe": "^1.4.18", 23 | "gatsby-remark-smartypants": "^1.4.12", 24 | "gatsby-source-filesystem": "^1.5.26", 25 | "gatsby-transformer-remark": "^1.7.36", 26 | "gatsby-transformer-sharp": "^1.6.22", 27 | "react-headroom": "^2.2.2", 28 | "react-helmet": "^5.2.0", 29 | "react-responsive-grid": "^0.3.4", 30 | "styled-components": "^3.2.0", 31 | "typography-plugin-code": "^0.16.11", 32 | "unfetch": "^3.0.0" 33 | }, 34 | "devDependencies": { 35 | "lodash": "4.17.5", 36 | "prettier": "^1.11.1" 37 | }, 38 | "homepage": "https://reactfaq.site", 39 | "keywords": [ 40 | "React FAQ" 41 | ], 42 | "license": "MIT", 43 | "main": "n/a", 44 | "repository": { 45 | "type": "git", 46 | "url": "git+https://github.com/timarney/react-faq" 47 | }, 48 | "scripts": { 49 | "dev": "gatsby develop", 50 | "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .", 51 | "test": "echo \"Error: no test specified\" && exit 1", 52 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'", 53 | "develop": "gatsby develop", 54 | "build": "gatsby build", 55 | "fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/components/logo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Link from "gatsby-link"; 3 | import { ReactIcon as Icon } from "../svg/Icon"; 4 | 5 | class Logo extends Component { 6 | render() { 7 | const { handleClick } = this.props; 8 | return ( 9 |
10 | 19 |
27 | 28 |
React FAQ
29 |
30 | 31 |
32 | ); 33 | } 34 | } 35 | 36 | export default Logo; 37 | -------------------------------------------------------------------------------- /src/components/menu-desktop.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import classNames from "classnames"; 3 | import "../css/menu-desktop.css"; 4 | import MenuItems from "../components/menu-items"; 5 | 6 | class MenuDesktop extends Component { 7 | render() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | } 15 | 16 | export default MenuDesktop; 17 | -------------------------------------------------------------------------------- /src/components/menu-items.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "gatsby-link"; 3 | 4 | function href(p, txt) { 5 | const path = `${"/"}${p}/`; 6 | return path; 7 | } 8 | 9 | const items = [ 10 | { href: "intro", text: "Start" }, 11 | { href: "creating-a-react-project", text: "Setup" }, 12 | { href: "jsx", text: "JSX" }, 13 | { href: "the-virtual-dom", text: "VDOM" }, 14 | { href: "react-elements", text: "Elements" }, 15 | { href: "components", text: "Components" }, 16 | { href: "patterns", text: "Patterns" }, 17 | { href: "additional-topics", text: "Additional Topics" }, 18 | { href: "more-resources", text: "Resources"}, 19 | { href: "react16", text: "React 16" } 20 | ]; 21 | 22 | function MenuItems(props) { 23 | const { showNavClass, handleClick } = props; 24 | return ( 25 | 43 | ); 44 | } 45 | 46 | export default MenuItems; 47 | -------------------------------------------------------------------------------- /src/components/menu-mobile.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class MenuMobile extends Component { 4 | render() { 5 | const { 6 | menuToggleClass, 7 | menuSectionClass, 8 | showNavClass, 9 | handleClick 10 | } = this.props; 11 | return ( 12 |
13 |
14 |
15 |
16 |
17 |
18 | {this.props.children} 19 |
20 | ); 21 | } 22 | } 23 | 24 | export default MenuMobile; 25 | -------------------------------------------------------------------------------- /src/components/profile-pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timarney/react-faq/fd9c9731738046d6d45a391cf8323627609be4da/src/components/profile-pic.jpg -------------------------------------------------------------------------------- /src/components/stars.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import styled from "styled-components"; 3 | import fetch from 'unfetch' 4 | 5 | const Wrapper = styled.div` 6 | display:flex; 7 | flex: 1; 8 | border: 1px solid #fff; 9 | background-image: linear-gradient(#fcfcfc, #eee); 10 | border-radius: 3px; 11 | padding:5px; 12 | max-width:120px; 13 | 14 | &:hover { 15 | background-image: linear-gradient(#fcfcfc, #ccc); 16 | } 17 | 18 | @media screen and (min-width: 600px) { 19 | margin-left:1em; 20 | } 21 | 22 | `; 23 | 24 | const GitLink = styled.a` 25 | display:flex; 26 | align-self:center; 27 | justify-content:center; 28 | color:#000; 29 | line-height:16px; 30 | 31 | &:hover { 32 | text-decoration:none; 33 | } 34 | `; 35 | 36 | 37 | const StarCount = styled.div` 38 | display:flex; 39 | align-self:center; 40 | line-height:16px; 41 | padding-left:5px; 42 | `; 43 | 44 | class Stars extends Component { 45 | state = { count: '' }; 46 | 47 | componentDidMount() { 48 | 49 | fetch('https://api.github.com/repos/timarney/react-faq') 50 | .then( r => r.json() ) 51 | .then( data => { 52 | const stars = data.stargazers_count; 53 | this.setState({count:stars}) 54 | }); 55 | } 56 | 57 | render() { 58 | const { count } = this.state; 59 | 60 | if(count == ''){ 61 | return null; 62 | } 63 | 64 | return ( 65 | 66 | 67 | 68 | 79 | Star {count} 80 | 81 | 82 | ); 83 | } 84 | } 85 | 86 | export default Stars; 87 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | 2 | .wrap{ 3 | margin:0 auto; 4 | } 5 | 6 | .notable{ 7 | background-color:rgba(97, 193, 146, 0.4); 8 | padding:10px; 9 | margin-bottom:2em; 10 | color:#2f6daa; 11 | font-size: 0.9em; 12 | } 13 | 14 | .notable a{ 15 | text-decoration: underline; 16 | font-size: 1em; 17 | } 18 | 19 | @media (max-width: 670px) { 20 | .header{ 21 | flex-direction:column; 22 | } 23 | } 24 | 25 | .header{ 26 | align-items: "flex-start"; 27 | } 28 | 29 | .menu-desktop{ 30 | display: none; 31 | } 32 | 33 | @media (min-width: 990px) { 34 | .menu-desktop{ 35 | display: block; 36 | } 37 | 38 | .header{ 39 | align-items: "center"; 40 | } 41 | 42 | .menu-mobile{ 43 | display: none; 44 | } 45 | } 46 | 47 | #icon{ 48 | margin-right:10px; 49 | } 50 | 51 | #search-box{ 52 | display: flex; 53 | align-items: center; 54 | justify-content: center; 55 | height:60px; 56 | margin-left:20px; 57 | margin-right:10px; 58 | } 59 | 60 | #search-box input{ 61 | border-radius: 5px; 62 | border:1px solid #666666; 63 | color:#666666; 64 | padding:5px; 65 | text-align: center; 66 | min-width: 200px; 67 | height:34px; 68 | line-height: 60px; 69 | } 70 | 71 | summary { 72 | display: block; 73 | } 74 | 75 | summary::-webkit-details-marker { 76 | display: none; 77 | } 78 | 79 | summary::before { 80 | content: '\25B6'; 81 | padding-right: 0.5em; 82 | color:#C64087; 83 | } 84 | 85 | details[open] > summary::before { 86 | content: '\25BC'; 87 | color:#666666; 88 | } 89 | -------------------------------------------------------------------------------- /src/css/markdown-styles.css: -------------------------------------------------------------------------------- 1 | .warning { 2 | color: #9F6000; 3 | background-color: #FEEFB3; 4 | padding: 18px; 5 | } 6 | .warning:before { 7 | content:'\26A0'; 8 | margin-right: 9px; 9 | } 10 | 11 | strong{ 12 | color:#C64087; 13 | } 14 | 15 | blockquote { 16 | padding: 0 1em; 17 | color: #777; 18 | border-left: 0.25em solid #ddd 19 | } 20 | 21 | pre{ 22 | background-color:#26292c; 23 | color:#f8f8f2; 24 | } 25 | 26 | 27 | 28 | a{ 29 | color:#2f6daa; 30 | text-decoration: none; 31 | } 32 | 33 | a:active, a:focus, a:hover{ 34 | text-decoration: underline; 35 | color: #1e476e; 36 | } 37 | 38 | h2{ 39 | color:#444; 40 | } 41 | 42 | li { 43 | margin-bottom: calc(1.65rem / 10); 44 | } 45 | 46 | ul ul{ 47 | margin-top:calc(1.65rem / 10); 48 | } 49 | 50 | 51 | /** 52 | * atom-dark theme for `prism.js` 53 | * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax 54 | * @author Joe Gibson (@gibsjose) 55 | */ 56 | 57 | code[class*="language-"], 58 | pre[class*="language-"] { 59 | color: #c5c8c6; 60 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 61 | font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; 62 | direction: ltr; 63 | text-align: left; 64 | white-space: pre; 65 | word-spacing: normal; 66 | word-break: normal; 67 | line-height: 1.5; 68 | 69 | -moz-tab-size: 4; 70 | -o-tab-size: 4; 71 | tab-size: 4; 72 | 73 | -webkit-hyphens: none; 74 | -moz-hyphens: none; 75 | -ms-hyphens: none; 76 | hyphens: none; 77 | } 78 | 79 | /* Code blocks */ 80 | pre[class*="language-"] { 81 | padding: 1em; 82 | margin: .5em 0; 83 | overflow: auto; 84 | border-radius: 0.3em; 85 | } 86 | 87 | :not(pre) > code[class*="language-"], 88 | pre[class*="language-"] { 89 | background: #1d1f21; 90 | } 91 | 92 | /* Inline code */ 93 | :not(pre) > code[class*="language-"] { 94 | padding: .1em; 95 | border-radius: .3em; 96 | } 97 | 98 | .token.comment, 99 | .token.prolog, 100 | .token.doctype, 101 | .token.cdata { 102 | color: #7C7C7C; 103 | } 104 | 105 | .token.punctuation { 106 | color: #c5c8c6; 107 | } 108 | 109 | .namespace { 110 | opacity: .7; 111 | } 112 | 113 | .token.property, 114 | .token.keyword, 115 | .token.tag { 116 | color: #96CBFE; 117 | } 118 | 119 | .token.class-name { 120 | color: #FFFFB6; 121 | text-decoration: underline; 122 | } 123 | 124 | .token.boolean, 125 | .token.constant { 126 | color: #99CC99; 127 | } 128 | 129 | .token.symbol, 130 | .token.deleted { 131 | color: #f92672; 132 | } 133 | 134 | .token.number { 135 | color: #FF73FD; 136 | } 137 | 138 | .token.selector, 139 | .token.attr-name, 140 | .token.string, 141 | .token.char, 142 | .token.builtin, 143 | .token.inserted { 144 | color: #A8FF60; 145 | } 146 | 147 | .token.variable { 148 | color: #C6C5FE; 149 | } 150 | 151 | .token.operator { 152 | color: #EDEDED; 153 | } 154 | 155 | .token.entity { 156 | color: #FFFFB6; 157 | /* text-decoration: underline; */ 158 | } 159 | 160 | .token.url { 161 | color: #96CBFE; 162 | } 163 | 164 | .language-css .token.string, 165 | .style .token.string { 166 | color: #87C38A; 167 | } 168 | 169 | .token.atrule, 170 | .token.attr-value { 171 | color: #F9EE98; 172 | } 173 | 174 | .token.function { 175 | color: #DAD085; 176 | } 177 | 178 | .token.regex { 179 | color: #E9C062; 180 | } 181 | 182 | .token.important { 183 | color: #fd971f; 184 | } 185 | 186 | .token.important, 187 | .token.bold { 188 | font-weight: bold; 189 | } 190 | .token.italic { 191 | font-style: italic; 192 | } 193 | 194 | .token.entity { 195 | cursor: help; 196 | } -------------------------------------------------------------------------------- /src/css/menu-desktop.css: -------------------------------------------------------------------------------- 1 | .menu-desktop nav ul{ 2 | display: flex; 3 | margin-left: 15px; 4 | list-style-type: none; 5 | } 6 | 7 | .menu-desktop nav ul li a{ 8 | padding: 4px 10px; 9 | margin-left: 5px; 10 | 11 | background-color: #C64087; 12 | color:#fff; 13 | text-decoration: none; 14 | 15 | border-radius: 2px; 16 | transition: background-color .3s ease-in; 17 | } 18 | 19 | .menu-desktop nav ul li a:hover, .menu-desktop nav ul li a.active{ 20 | background-color: #3C424D; 21 | } -------------------------------------------------------------------------------- /src/css/menu-mobile.css: -------------------------------------------------------------------------------- 1 | 2 | .menu-mobile .menu-section.on { 3 | z-index: 10; 4 | width: 100%; 5 | height: 100%; 6 | top: 0; 7 | left: 0; 8 | right: 0; 9 | bottom: 0; 10 | position:fixed; 11 | background-color: rgba(55, 61, 73, 0.9); 12 | overflow:scroll; 13 | } 14 | 15 | .menu-mobile .menu-toggle { 16 | width: 30px; 17 | height: 30px; 18 | position: absolute; 19 | top: 40px; 20 | right: 25px; 21 | cursor: pointer; 22 | z-index: 11; 23 | } 24 | 25 | .menu-toggle.on{ 26 | position:fixed; 27 | } 28 | 29 | .menu-mobile .menu-toggle.on .one { 30 | 31 | -moz-transform: rotate(45deg) translate(7px, 7px); 32 | -ms-transform: rotate(45deg) translate(7px, 7px); 33 | -webkit-transform: rotate(45deg) translate(7px, 7px); 34 | transform: rotate(45deg) translate(7px, 7px); 35 | } 36 | 37 | .menu-mobile .menu-toggle.on .two { 38 | opacity: 0; 39 | } 40 | 41 | .menu-mobile .menu-toggle.on .three { 42 | -moz-transform: rotate(-45deg) translate(7px, -8px); 43 | -ms-transform: rotate(-45deg) translate(7px, -8px); 44 | -webkit-transform: rotate(-45deg) translate(7px, -8px); 45 | transform: rotate(-45deg) translate(7px, -8px); 46 | } 47 | 48 | .menu-mobile .one, 49 | .menu-mobile .two, 50 | .menu-mobile .three { 51 | width: 100%; 52 | height: 4px; 53 | background: white; 54 | margin: 6px auto; 55 | backface-visibility: hidden; 56 | -moz-transition-duration: 0.3s; 57 | -o-transition-duration: 0.3s; 58 | -webkit-transition-duration: 0.3s; 59 | transition-duration: 0.3s; 60 | } 61 | 62 | .menu-mobile .menu-toggle:hover .one, 63 | .menu-mobile .menu-toggle:hover .two, 64 | .menu-mobile .menu-toggle:hover .three{ 65 | background: #C64087; 66 | } 67 | 68 | .menu-mobile nav ul { 69 | margin: 0; 70 | padding: 0; 71 | 72 | list-style: none; 73 | margin: 12em auto; 74 | text-align: center; 75 | } 76 | 77 | .menu-mobile nav ul.hidden { 78 | display: none; 79 | } 80 | 81 | .menu-mobile nav ul a { 82 | -moz-transition-duration: 0.5s; 83 | -o-transition-duration: 0.5s; 84 | -webkit-transition-duration: 0.5s; 85 | transition-duration: 0.5s; 86 | text-decoration: none !important; 87 | color: white; 88 | width: 100%; 89 | display: block; 90 | } 91 | 92 | @media (min-width: 670px) { 93 | .menu-mobile nav ul a { 94 | font-size: 1.5em; 95 | line-height: 1.5; 96 | } 97 | 98 | .menu-mobile nav ul { 99 | margin: 8em auto; 100 | } 101 | 102 | .menu-mobile .menu-toggle::before { 103 | content: "Explore"; 104 | position: absolute; 105 | left: -70px; 106 | top: 4px; 107 | color: #fff; 108 | } 109 | 110 | 111 | .menu-mobile .menu-toggle.on::before{ 112 | content: "Close"; 113 | left: -60px; 114 | } 115 | } 116 | 117 | @media (min-width: 960px) { 118 | .menu-mobile nav ul a { 119 | font-size: 2.0em; 120 | line-height: 1.5; 121 | } 122 | } 123 | 124 | .menu-mobile nav ul a:hover, .menu-mobile nav ul li a.active { 125 | background-color: #C64087; 126 | color:#fff; 127 | } -------------------------------------------------------------------------------- /src/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | .markdown pre { 9 | display: block; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | overflow-y: hidden; 13 | } 14 | 15 | .markdown pre code { 16 | background: none; 17 | border: none; 18 | border-radius: 3px; 19 | display: inline-block; 20 | overflow: inherit; 21 | padding: 1.58333rem; 22 | white-space: inherit; 23 | word-wrap: normal; 24 | } 25 | 26 | code { 27 | -moz-border-radius: 3px; 28 | -webkit-border-radius: 3px; 29 | border-radius: 3px; 30 | white-space: pre; 31 | white-space: pre-wrap; 32 | white-space: pre-line; 33 | white-space: -pre-wrap; 34 | white-space: -o-pre-wrap; 35 | white-space: -moz-pre-wrap; 36 | white-space: -hp-pre-wrap; 37 | word-wrap: break-word; 38 | background: #e5e5e5; 39 | border: 1px solid #cccccc; 40 | display: inline; 41 | font-family: Inconsolata, monospace, serif; 42 | max-width: 100%; 43 | overflow: auto; 44 | padding: 0 0.1625rem; 45 | } 46 | 47 | .hljs-keyword, 48 | .hljs-tag, 49 | .css .hljs-class, 50 | .css .hljs-id, 51 | .lisp .hljs-title, 52 | .nginx .hljs-title, 53 | .hljs-request, 54 | .hljs-status, 55 | .clojure .hljs-attribute { 56 | color: #E3CEAB; 57 | } 58 | 59 | .django .hljs-template_tag, 60 | .django .hljs-variable, 61 | .django .hljs-filter .hljs-argument { 62 | color: #DCDCDC; 63 | } 64 | 65 | .hljs-number, 66 | .hljs-date { 67 | color: #8CD0D3; 68 | } 69 | 70 | .dos .hljs-envvar, 71 | .dos .hljs-stream, 72 | .hljs-variable, 73 | .apache .hljs-sqbracket { 74 | color: #EFDCBC; 75 | } 76 | 77 | .dos .hljs-flow, 78 | .diff .hljs-change, 79 | .python .exception, 80 | .python .hljs-built_in, 81 | .hljs-literal, 82 | .tex .hljs-special { 83 | color: #EFEFAF; 84 | } 85 | 86 | .diff .hljs-chunk, 87 | .hljs-subst { 88 | color: #8F8F8F; 89 | } 90 | 91 | .dos .hljs-keyword, 92 | .python .hljs-decorator, 93 | .hljs-title, 94 | .haskell .hljs-type, 95 | .diff .hljs-header, 96 | .ruby .hljs-class .hljs-parent, 97 | .apache .hljs-tag, 98 | .nginx .hljs-built_in, 99 | .tex .hljs-command, 100 | .hljs-prompt { 101 | color: #efef8f; 102 | } 103 | 104 | .dos .hljs-winutils, 105 | .ruby .hljs-symbol, 106 | .ruby .hljs-symbol .hljs-string, 107 | .ruby .hljs-string { 108 | color: #DCA3A3; 109 | } 110 | 111 | .diff .hljs-deletion, 112 | .hljs-string, 113 | .hljs-tag .hljs-value, 114 | .hljs-preprocessor, 115 | .hljs-pragma, 116 | .hljs-built_in, 117 | .sql .hljs-aggregate, 118 | .hljs-javadoc, 119 | .smalltalk .hljs-class, 120 | .smalltalk .hljs-localvars, 121 | .smalltalk .hljs-array, 122 | .css .hljs-rules .hljs-value, 123 | .hljs-attr_selector, 124 | .hljs-pseudo, 125 | .apache .hljs-cbracket, 126 | .tex .hljs-formula, 127 | .coffeescript .hljs-attribute { 128 | color: #CC9393; 129 | } 130 | 131 | .hljs-shebang, 132 | .diff .hljs-addition, 133 | .hljs-comment, 134 | .java .hljs-annotation, 135 | .hljs-template_comment, 136 | .hljs-pi, 137 | .hljs-doctype { 138 | color: #7F9F7F; 139 | } 140 | 141 | .coffeescript .javascript, 142 | .javascript .xml, 143 | .tex .hljs-formula, 144 | .xml .javascript, 145 | .xml .vbscript, 146 | .xml .css, 147 | .xml .hljs-cdata { 148 | opacity: 0.5; 149 | } 150 | 151 | -------------------------------------------------------------------------------- /src/layouts/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "gatsby-link"; 3 | import MenuMobile from "../components/menu-mobile"; 4 | import MenuDesktop from "../components/menu-desktop"; 5 | import Headroom from "react-headroom"; 6 | import Stars from "../components/stars"; 7 | import Logo from "../components/logo"; 8 | import classNames from "classnames"; 9 | import styled from "styled-components"; 10 | import { rhythm, scale } from "../utils/typography"; 11 | import MenuItems from "../components/menu-items"; 12 | import "../css/menu-mobile.css"; 13 | import "../css/main.css"; 14 | 15 | console.log("version", React.version); 16 | 17 | const Header = styled.div` 18 | font-size: 1.5em; 19 | text-align: center; 20 | color: palevioletred; 21 | `; 22 | 23 | class Template extends React.Component { 24 | state = { on: false }; 25 | 26 | handleClick = e => { 27 | const { on } = this.state; 28 | this.setState({ on: !on }); 29 | }; 30 | 31 | renderUp(menuSectionClass, showNavClass) { 32 | return ( 33 |
34 |
35 | 39 |
40 |
41 | ); 42 | } 43 | 44 | componentDidMount() { 45 | try { 46 | window.docsearch({ 47 | apiKey: "5b868b4714802ced50cee159ba9fd2a3", 48 | indexName: "reactfaq", 49 | inputSelector: "#search", 50 | debug: true 51 | }); 52 | } catch (e) { 53 | console.log(e.message); 54 | } 55 | } 56 | 57 | render() { 58 | let { on } = this.state; 59 | let menuToggleClass = classNames({ on: on, "menu-toggle": true }); 60 | let menuSectionClass = classNames({ on: on, "menu-section": true }); 61 | let showNavClass = classNames({ hidden: !on }); 62 | const { location, children } = this.props; 63 | 64 | return ( 65 |
66 | {this.renderUp(menuSectionClass, showNavClass)} 67 | 68 | 82 |
92 | 93 | 100 | 106 | 107 | 108 |
109 | 110 | 111 |
118 | 119 |
120 | 121 |
129 | {children()} 130 |
131 |
132 | ); 133 | } 134 | } 135 | 136 | export default Template; 137 | -------------------------------------------------------------------------------- /src/pages/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: /404.html 3 | --- 4 | ## NOT FOUND 5 | 6 | You just hit a route that doesn't exist... the sadness. 7 | -------------------------------------------------------------------------------- /src/pages/_template.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Container } from "react-responsive-grid"; 3 | import { prefixLink } from "gatsby-helpers"; 4 | import Headroom from "react-headroom"; 5 | import "../css/markdown-styles"; 6 | import styled from "styled-components"; 7 | import { rhythm } from "../utils/typography"; 8 | import MenuMobile from "../components/menu-mobile"; 9 | import MenuDesktop from "../components/menu-desktop"; 10 | import Stars from "../components/stars"; 11 | import Logo from "../components/logo"; 12 | import "../css/main.css"; 13 | import classNames from "classnames"; 14 | 15 | import "../css/menu-mobile.css"; 16 | 17 | import MenuItems from "../components/menu-items"; 18 | 19 | const Header = styled.div` 20 | font-size: 1.5em; 21 | text-align: center; 22 | color: palevioletred; 23 | `; 24 | class Layout extends Component { 25 | state = { on: false }; 26 | 27 | handleClick = e => { 28 | const { on } = this.state; 29 | this.setState({ on: !on }); 30 | }; 31 | 32 | renderUp(menuSectionClass, showNavClass) { 33 | return ( 34 |
35 |
36 | 37 |
38 |
39 | ); 40 | } 41 | 42 | render() { 43 | let { on } = this.state; 44 | let menuToggleClass = classNames({ on: on, "menu-toggle": true }); 45 | let menuSectionClass = classNames({ on: on, "menu-section": true }); 46 | let showNavClass = classNames({ hidden: !on }); 47 | 48 | return ( 49 |
50 | 51 | {this.renderUp(menuSectionClass, showNavClass)} 52 | 53 | 66 | 76 | 77 | 84 | 85 | 86 | 92 | 93 | 94 | 95 | 102 | 103 | 104 | 105 | 106 | 113 | {this.props.children} 114 | 115 |
116 | ); 117 | } 118 | } 119 | 120 | module.exports = Layout; 121 | -------------------------------------------------------------------------------- /src/pages/a11y.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: A11Y 3 | path: "/a11y/" 4 | --- 5 | 6 | **What about accessibility?** 7 | * [How to design for accessibility](http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility ) *Note:* not specific to React but a solid primer on the topic 8 | 9 |
10 | 11 | **How do I handle A11y in React** 12 | * [Excerpt from React.js Conf 2015 - Hype!](https://www.youtube.com/watch?v=z5e7kWSHWTg#t=631) Ryan Florence 13 | * [Bringing the Web Back to the Blind by Ryan Florence ](https://www.youtube.com/watch?v=YuzS-g6Qvq8) *Note:* not specific to React 14 | * [Creating accessible React apps](http://simplyaccessible.com/article/react-a11y/) Scott Vinkle @svinkle 15 | -------------------------------------------------------------------------------- /src/pages/add-to-existing-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding React to an existing app 3 | path: "/add-to-existing-app/" 4 | --- 5 | 6 | **How do I start adding React to an existing app?** 7 | 8 | * [How to Sprinkle ReactJS into an Existing Web Application](https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application) Andrew Del Prete @andrewdelprete 9 | * [Don't Rewrite, React!](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) Ryan Florence 10 | * [Migrating Safely to React](https://www.youtube.com/watch?v=sXDZBxbRRag&list=PLNBNS7NRGKMG3uLrm5fgY02hJ87Wzb4IU&index=1) Jamis Charles 11 | * [Moving Airbnb Search to React](https://medium.com/airbnb-engineering/moving-airbnb-search-to-react-b85b815e166c#.d79q3kz2w) Horace Ko @warpdude 12 | * [Converting a large React Codebase from Coffeescript to ES6](https://blog.bugsnag.com/converting-a-large-react-codebase-from-coffeescript-to-es6) Christian Schlensker -------------------------------------------------------------------------------- /src/pages/additional-topics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Additional Topics 3 | path: "/additional-topics/" 4 | --- 5 | - [Maintainable /Reusable React components](/component-reuse-maintainable/) 6 | - [Why use React?](/why-use-react/) 7 | - [Adding React to an existing app](/add-to-existing-app/) 8 | - [React in production](/react-production) 9 | - [CSS and React](/css/) 10 | - [Context](/context/) 11 | - [Forms](/forms/) 12 | - [React Ajax](/react-ajax/) 13 | - [Testing / Debug](/testing/) 14 | - [Server-Side Rendering](/server-side-rendering/) 15 | - [Gotchas](/gotchas/) 16 | - [Internationalization](/internationalization/) 17 | - [A11Y](/a11y/) 18 | - [Third Party Libraries](/third-party-libraries/) 19 | - [Performance](/performance/) 20 | - [Animations](/animations/) 21 | - [SVG & React](/svg-react/) 22 | - [React Style Guides](/style-guides/) 23 | - [Redux and Mobx](/redux-mobx/) 24 | - [Deep Dive](/deep-dive/) 25 | - [React Fiber](/react-fiber/) 26 | - [Interview Questions](/interview-questions/) 27 | - [Tools](/tools/) 28 | - [History](/history/) 29 | - [PATENTS](/patents/) -------------------------------------------------------------------------------- /src/pages/animations.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Animations 3 | path: "/animations/" 4 | --- 5 | 6 | **How do I animate things in React?** 7 | * [Animating the Virtual DOM @ReactEurope 2017](https://www.youtube.com/watch?list=PLCC436JpVnK3KpieWtxYN6aC2-exR_IxH&v=W5AdUcJDHo0) Sarah Drasner @sarah_edo 8 | * [Animating In React](https://youtu.be/Fk--XUEorvc?t=2344) Sarah Drasner @sarah_edo 9 | * [UI Animations with React — The Right Way](https://medium.com/@joethedave/achieving-ui-animations-with-react-the-right-way-562fa8a91935#.g8qmlz5d6) Joe Davis 10 | * [Animations with ReactTransitionGroup](https://medium.com/@cheapsteak/animations-with-reacttransitiongroup-4972ad7da286#.qmrksnixv) Chang Wang @CheapSteak 11 | * [How to build animated microinteractions in React](https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8#.4jlqkqb0g) Christian Sepulveda @csepulv 12 | 13 | **Is there declarative api for animations?** 14 | 15 | * [React Motion](https://github.com/chenglou/react-motion) 16 | * [A gentle introduction to React Motion](https://medium.com/@nashvail/a-gentle-introduction-to-react-motion-dc50dd9f2459#.aio7blbsi) 17 | 18 | **How can I animate Page Transitions?** 19 | 20 | * [React Page Transition Animations](https://medium.com/front-end-hacking/react-page-transition-animations-9d18c90a9831#.lc9943ajq) Huan Ji 21 | 22 | **What are some good repos to checkout for animation in React?** 23 | * [react-web-animation](https://github.com/bringking/react-web-animation) 24 | * [react-animations](https://github.com/FormidableLabs/react-animations) 25 | * [react-anime](https://github.com/stelatech/react-anime) 26 | * [react-motion](https://github.com/chenglou/react-motion) 27 | * [velocity-react](https://github.com/twitter-fabric/velocity-react) 28 | * [state-transitions](https://github.com/jacobp100/state-transitions) 29 | * [react-tween](https://github.com/clari/react-tween) 30 | * [data-driven-motion](https://github.com/tkh44/data-driven-motion) 31 | * [animate-components](https://github.com/nitin42/animate-components) 32 | * [react-move](https://react-move.js.org) 33 | * [gsap](https://www.npmjs.com/package/gsap) not React specific but works great see [Using TweenMax with React](https://egghead.io/lessons/react-using-tweenmax-with-react) + talks from @sarah_edo mention 34 | * [react-transition-group-plus](https://www.npmjs.com/package/react-transition-group-plus) 35 | * [Popmotion x React](https://popmotion.io/api/react) 36 | -------------------------------------------------------------------------------- /src/pages/books.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Books 3 | path: "/books/" 4 | --- 5 | 6 | **Where can I find some good books about React?** 7 | 8 | * [React Enlightenment ](http://www.reactenlightenment.com) Cody Lindley @codylindley 9 | * [Build your first real world React.js application](http://academy.plot.ly/#react) Max Stoiber @mxstbr 10 | * [SurviveJS React](http://survivejs.com/react/introduction) 11 | * [Fullstack React](https://www.fullstackreact.com) 12 | -------------------------------------------------------------------------------- /src/pages/component-reuse-maintainable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Maintainable /Reusable React components 3 | path: "/component-reuse-maintainable/" 4 | --- 5 | 6 | **How can I build maintainable /reusable React components?** 7 | 8 | * [How to Achieve Reusability with React Components 9 | ](https://medium.com/walmartlabs/how-to-achieve-reusability-with-react-components-81edeb7fb0e0#.e9uz9o3e3) @walmartlabs 10 | * [Building React Components for Multiple Brands and Applications](https://medium.com/walmartlabs/building-react-components-for-multiple-brands-and-applications-7e9157a39db4#.wuirl4nj3) @walmartlabs 11 | * [4 tips to write maintainable React components](https://blog.callstack.io/4-tips-to-write-maintainable-react-components-7d18278643d0#.qgutp9i5f) @satya164 12 | 13 | * [React plus X: Best Practices for Reusable UI Components](https://www.youtube.com/watch?v=Yy7gFgETp0o) | [slides](https://speakerdeck.com/marsjosephine/forwardjs-react-plus-x-best-practices-for-reusable-ui-components) | Mars Jullian @marsjosephine 14 | 15 | [**Where can I leran from other peoples mistakes**](#mistakes) 16 | * [React Architecture Confessions](https://benmccormick.org/2018/02/07/react-confessions/) 17 | -------------------------------------------------------------------------------- /src/pages/components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Components 3 | path: "/components/" 4 | --- 5 | 6 | > Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. - [React Docs](https://facebook.github.io/react/docs/components-and-props.html) 7 | 8 | 9 | - [Lifecycle Methods](/components/lifecycle-methods/) 10 | - [Component Types](/components/component-types/) 11 | - [Finding Components](/components/finding-components/) 12 | - [Controlled Components](/components/controlled-components/) 13 | - [Props](/components/props/) 14 | - [State](/components/state/) 15 | - [Children API](/components/children-api/) 16 | - [Binding](/components/binding/) 17 | - [Events](/components/events/) 18 | - [Rendering](/components/rendering/) 19 | - [Keys](/components/keys/) 20 | - [Refs](/components/refs/) 21 | 22 | 23 | **When should I split my code out into a component?** 24 | 25 | Front End Center — Single Responsibility Components: Object-Oriented Design in React @glenmaddern @frontendcenter 26 | 27 | 28 | 29 | 30 | **What are some of your best practices when working with components?** 31 | 32 | * Keep it [F]ocused. 33 | * Keep it [I]ndependent. 34 | * Keep it [R]eusable. 35 | * Keep it [S]mall. 36 | * Keep it [T]estable. 37 | * or in short, `FIRST`. 38 | 39 | > — Addy Osmani https://addyosmani.com/first 40 | 41 | See : https://twitter.com/mxstbr/status/790084862954864640 Max Stoiber @mxstbr 42 | 43 | *Also some best practices here:* [Our Best Practices for Writing React Components](https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8?imm_mid=0ed2ce&cmp=em-web-na-na-newsltr_20170208#.emb0wf1tl) @ MuseFind 44 | 45 | **How do I output a list of items?** 46 | 47 | 48 | ```javascript 49 | function NumberList(props) { 50 | const numbers = props.numbers; 51 | const listItems = numbers.map(number => ( 52 |
  • 53 | {number} 54 |
    • 55 | )); 56 | return
      {listItems}
    ; 57 | } 58 | 59 | const numbers = [1, 2, 3, 4, 5]; 60 | 61 | ReactDOM.render( 62 | , 63 | document.getElementById("root") 64 | ); 65 | ``` 66 | 67 | Or embedded style 68 | ```javascript 69 | function NumberList(props) { 70 | const numbers = props.numbers; 71 | return ( 72 |
      73 | {numbers.map((number) => 74 | 76 | )} 77 |
    78 | ); 79 | } 80 | ``` 81 | 82 | See: [Lists and Keys](https://facebook.github.io/react/docs/lists-and-keys.html) 83 | 84 | **How can I map over an object?** 85 | 86 | ```javascript 87 | {Object.keys(yourObject).map(function(key) { 88 | return
    Key: {key}, Value: {yourObject[key]}
    ; 89 | })} 90 | ``` 91 | 92 | ## Loading Data 93 | 94 | **How can I load API data into my Component?** 95 | * [Loading data from APIs in React](http://javascriptplayground.com/blog/2017/01/http-requests-reactjs/) Jack Franklin @Jack_Franklin 96 | 97 | ## Async / Await support in create-react-app 98 | 99 | [Support async/await #327](https://github.com/facebookincubator/create-react-app/pull/327) 100 | 101 | ## Error Handling 102 | 103 | [Error Handling in React 16](https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html) Dan Abramov @dan_abramov 104 | 105 | 106 | 107 | 108 | ## Don't convert an arrow function just to add a console.log 109 | https://twitter.com/thekitze/status/1029369487685021696 110 | -------------------------------------------------------------------------------- /src/pages/components/binding.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Binding 3 | path: "/components/binding/" 4 | --- 5 | 6 | >The JavaScript bind method has several uses. Typically, it is used to preserve execution context for a function that executes in another context. 7 | 8 |
    9 | 10 | **How do I bind events (i.e. onClick) in React?** 11 | > There are several ways to bind things in React [this video](https://egghead.io/lessons/javascript-public-class-fields-with-react-components?pl=javascript-from-kent-ff87bbdb) via Kent C. Dodds + @eggheadio covers multiple ways to bind events showing the benefits and drawbacks for each. 12 | 13 | **⭐ React FAQ -> use public class fields** 14 | ```javascript 15 | 16 | //see demo: https://jsbin.com/suzubu/1/edit?html,js,output 17 | class App extends React.Component { 18 | state = {clicks: 6} 19 | 20 | handleClick = (e) => { 21 | console.log(e.target.dataset.id) 22 | this.setState(prevState => { 23 | return {clicks: prevState.clicks + 1} 24 | }) 25 | } 26 | 27 | render() { 28 | return ( 29 |
    30 |
    31 | Click Count: {this.state.clicks} 32 |
    33 | 38 |
    39 | ) 40 | } 41 | } 42 | 43 | ``` 44 | 45 | **What should you use for binding methods in React classes?** 46 | * [To bind or not to bind?](https://twitter.com/dan_abramov/status/790612782471319553) Dan Abramov @dan_abramov 47 | * [fat Arrow vS Autobind VS bind](https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l) Dan Abramov @dan_abramov 48 | 49 | **What is this bind thing?** 50 | 51 | * [Don't Use Bind When Passing Props](https://daveceddia.com/avoid-bind-when-passing-props) Dave Ceddia 52 | * [5 Approaches for Handling Binding](https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.4z71l0kmb) Cory House @housecor 53 | * [How to Deal with `this` Reference Inside the Promise?](https://www.toptal.com/react/tips-and-practices) Toptal Developers 54 | -------------------------------------------------------------------------------- /src/pages/components/children-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Children API 3 | path: "/components/children-api/" 4 | --- 5 | 6 | * [ReactCasts #3 - React's Children API](https://www.youtube.com/watch?v=DJ53-G8EbxE) Cassio Zen @cassiozen 7 | * [A deep dive into children in React](https://mxstbr.blog/2017/02/react-children-deepdive) Max Stoiber @mxstbr -------------------------------------------------------------------------------- /src/pages/components/component-types.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Component Types 3 | path: "/components/component-types/" 4 | --- 5 | 6 | > There are two main types of components **Functional** and **Class Components**. If you need don't need [lifecycle methods](lifecycle-methods.md) prefer Functional /Stateless Components. 7 | 8 | ```javascript 9 | 10 | // Functional Component 11 | function Welcome(props) { 12 | return

    Hello, {props.name}

    ; 13 | } 14 | 15 | // Class Component 16 | class Welcome extends React.Component { 17 | render() { 18 | return

    Hello, {this.props.name}

    ; 19 | } 20 | } 21 | 22 | 23 | // Some other patterns you might see: 24 | 25 | // Functional Component 26 | 27 | const Profile = props => { 28 | return ( 29 |
    30 |

    {props.name}

    31 |

    {props.bio}

    32 |
    33 | ); 34 | }; 35 | 36 | // Functional Component with destructuring of props 37 | 38 | const Profile = ({ name, bio }) => { 39 | return ( 40 |
    41 |

    {name}

    42 |

    {bio}

    43 |
    44 | ); 45 | }; 46 | 47 | ``` 48 | Components can be used (composed) in many ways see the following links for patterns and thoughts on creating Components. 49 | 50 | **How do I decide what type of Component to use?** 51 | 52 | >This comes down to a few factors... a primary one being you need to decide what a component should do. 53 | See: [Some Thoughts on Function Components in React](https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7#.2oazdyli1) from A. Sharif @sharifsbeat for some help deciding. 54 | 55 |
    56 | 57 | > In this video [React Component Patterns by Michael Chan](https://www.youtube.com/watch?v=YaZg8wg39QQ) @chantastic breaks down some of the component types in a less technical way (using circles). 58 | 59 | Also: 60 | * [7 Reasons to Outlaw React’s Functional Components](https://medium.com/@housecor/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c) Cory House @housecor 61 | * [React.Component vs React.createClass](https://reactjsnews.com/composing-components) Naman Goel & Zach Silveira 62 | * [React.createClass versus extends React.Component](https://toddmotto.com/react-create-class-versus-component) Todd Motto 63 | * [4 different kinds of React component styles](https://www.peterbe.com/plog/4-different-kinds-of-react-component-styles) Peter Bengtsson @peterbe 64 | * [Functions as Child Components and Higher Order Components](http://rea.tech/functions-as-child-components-and-higher-order-components) Ken Ding 65 | 66 | **Stateless Function** [``````](http://reactpatterns.com/#stateless-function) 67 | 68 | * [React Stateless Functional Components: Nine Wins You Might Have Overlooked](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.iydj782xq) Cory House @housecor 69 | * [Embracing Functions in React](https://medium.com/javascript-inside/embracing-functions-in-react-d7d558d8bd30#.igvxagy0e) A. Sharif @sharifsbeat 70 | * [45% Faster React Functional Components, Now](https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f) 71 | 72 | **Presentational and Container Components** [``````](http://reactpatterns.com/#container-component) 73 | 74 | * [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.xo2al5187) Dan Abramov @dan_abramov 75 | 76 | **Higher-Order Components** [``````](http://reactpatterns.com/#higher-order-component) 77 | 78 | * [ReactCasts #1 - Higher Order Components](https://www.youtube.com/watch?v=LTunyI2Oyzw) Cassio Zen @cassiozen 79 | * [React Higher Order Components in depth](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.mpb29ree6) @franleplant 80 | * [A gentle Introduction to Higher Order Components](https://www.robinwieruch.de/gentle-introduction-higher-order-components/) @rwieruch 81 | * [Higher Order Components: A React Application Design Pattern](https://www.sitepoint.com/react-higher-order-components) Jack Franklin @Jack_Franklin 82 | * [Mixins Are Dead. Long Live Composition](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.prpfdo79n) Dan Abramov @dan_abramov 83 | * [Higher Order Components: Theory and Practice](http://engineering.blogfoster.com/higher-order-components-theory-and-practice) 84 | * [Real World Examples of Higher-Order Components](http://rea.tech/reactjs-real-world-examples-of-higher-order-components/) Mehdi Mollaverdi @mehdimollaverdi 85 | * [Understanding Higher Order Components](https://medium.freecodecamp.com/understanding-higher-order-components-6ce359d761b) @tmeasday 86 | * [Why Higher Order Components Make Sense](https://medium.com/javascript-inside/why-higher-order-components-make-sense-fe4145b4e305) @sharifsbeat 87 | 88 | **Function as Child Components / Render callbacks** [``````](http://reactpatterns.com/#function-as-children) 89 | 90 | * [ReactCasts #2 - Function as Child Components](https://www.youtube.com/watch?v=WE3XAt9P8Ek) Cassio Zen @cassiozen 91 | * [Function as Child Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9#.10fbiyqc5) Merrick Christensen @iammerrick 92 | * [I've mentioned this before, but I'm a big fan of child functions in React](https://twitter.com/brian_d_vaughn/status/779362701596164097) Brian Vaughn @brian_d_vaughn 93 | * [Simplifying life with React render callbacks](https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55) @AdamRackis 94 | * [React Patterns - Render Callback](https://leoasis.github.io/posts/2017/03/27/react-patterns-render-callback) @leogcrespo 95 | * [Sharing stateful UI logic in React apps using Render Callback components](https://trevordmiller.com/blog/react-render-callback-components) @trevordmiller 96 | * [I’m Breaking up with Higher Order Components](https://medium.com/tandemly/im-breaking-up-with-higher-order-components-44b0df2db052) David Atchley 97 | 98 |
    99 | 100 | **Michael Jackson @mjackson - Never Write Another HoC** 101 | 102 | 103 | 104 | 105 | **What is a Pure Component?** 106 | 107 | Pure Components are any Component declared as a function that has no state and returns the same markup given the same props. 108 | 109 | ```javascript 110 | import React from ‘react’; 111 | 112 | const HelloWorld = ({name}) => ( 113 |
    {`Hi ${name}`}
    114 | ); 115 | 116 | export default HelloWorld; 117 | ``` 118 | 119 | * [Building User Interfaces with Pure Functions and Function Composition in React](https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js) @tylermcginnis33 120 | 121 | 122 | **What types of components are there?** 123 | 124 | * [React Component Jargon as of August 2016](https://blog.anthonycomito.com/react-component-jargon-as-of-august-2016-28451d8ceb1d#.a417p5u26) Anthony Comito @a_comito 125 | -------------------------------------------------------------------------------- /src/pages/components/controlled-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Controlled Components 3 | path: "/components/controlled-components/" 4 | --- 5 | 6 | **What is a controlled component?** 7 | 8 | Via Loren Stewart @lorenstewart111 [React.js Forms: Controlled Components](http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components) 9 | 10 | >A controlled component has two aspects: 11 | 12 | 1. Controlled components have functions to govern the data going into them on every onChange event, rather than grabbing the data only once, e.g. when a user clicks a submit button. This 'governed' data is then saved to state (in this case, the parent/container component's state). 13 | 14 | 2. Data displayed by a controlled component is received through props passed down from it's parent/container component. 15 | 16 | > This is a one-way loop – from (1) child component input (2) to parent component state and (3) back down to the child component via props – is what is meant by unidirectional data flow in React.js application architecture. -------------------------------------------------------------------------------- /src/pages/components/events.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Events 3 | path: "/components/events/" 4 | --- 5 | 6 | **How do I listen for events in React?** 7 | * [Handling Events in React 101](https://appendto.com/2017/01/react-events-101) 8 | * [Events Live Cheatsheet](https://reactarmory.com/resources/react-events-cheatsheet) @james_k_nelson 9 | 10 | **How does the event system work in React?** 11 | 12 | * [React events in depth](https://www.youtube.com/watch?v=dRo_egw7tBc) Kent C. Dodds, Ben Alpert, & Dan Abramov 13 | -------------------------------------------------------------------------------- /src/pages/components/finding-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Finding Components 3 | path: "/components/finding-components/" 4 | --- 5 | 6 | **Where are some good places to find components?** 7 | 8 | * [React Components Catalog](https://github.com/brillout/awesome-react-components) 9 | * [React Rocks](https://react.rocks) -------------------------------------------------------------------------------- /src/pages/components/keys.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Keys 3 | path: "/components/keys/" 4 | --- 5 | 6 | >React uses [keys](https://facebook.github.io/react/docs/reconciliation.html#keys) to help with Reconciliation (i.e. how it calculates the DOM diff for each render). 7 | 8 | ``` 9 |
      10 |
    • Duke
      • 11 |
    • Villanova
      • 12 |
    13 | ``` 14 | 15 | > As noted in 'What should I use for a key?' Be careful what you use for a key. Using an array index isn't a best practice... aim to use a unique id. 16 | 17 | **Why can't i put key in default props (or define the default somewhere else)?** 18 | 19 | * [Why can't i put key in default props](https://www.reddit.com/r/reactjs/comments/4mjdcf/why_cant_i_put_key_in_default_props_or_define_the/d3xwa6m) 20 | 21 | **What should I use for a key?** 22 | 23 | * [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.y4ru46ikc) Robin Pokorný @robinpokorny 24 | 25 | **What are some examples where I should manually change a key?** 26 | 27 | * [The key is using key](https://twitter.com/timarney/status/730785238654287873) Tim Arney @timarney 28 | 29 | 30 | **Do keys across an app all need to be unique?** 31 | 32 | No - Keys used only need to be unique among their siblings. 33 | 34 | More info: https://facebook.github.io/react/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings 35 | -------------------------------------------------------------------------------- /src/pages/components/lifecycle-methods.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lifecycle Methods 3 | path: "/components/lifecycle-methods/" 4 | --- 5 | 6 | >Components have several "lifecycle methods" that allow you to override / run code at particular times. 7 | 8 | 9 | [**Overview of how React works**](#overview) 10 | * https://github.com/reactjs/rfcs/issues/26#issuecomment-365744134 11 | 12 | **What are React Lifecycle Methods?** 13 | * [Mastering the React Lifecycle Methods](https://code.tutsplus.com/tutorials/mastering-the-react-lifecycle-methods--cms-29849) Gigi Sayfan 14 | * [componentDidMakeSense — React Lifecycle Explanation](https://medium.com/gitconnected/componentdidmakesense-react-lifecycle-explanation-393dcb19e459) Trey Huffine @TreyHuffine 15 | * [React components lifecycle diagram](http://codepen.io/eduardoboucas/full/jqWbdb) Eduardo Bouças @eduardoboucas 16 | * [React lifecycle cheatsheet](https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9) @brian_d_vaughn 17 | * [Going further with React lifecycle methods](https://medium.com/@notrab/going-further-with-react-lifecycle-methods-2ffdc5bdf52c#.bu0ufrosb) Jamie Barton 18 | * [Component Specs and Lifecycle](https://facebook.github.io/react/docs/component-specs.html) 19 | * [My #reactjs component lifecycle cheatsheet for quick reference](https://twitter.com/pbesh/status/738008776805060608) Peter Beshai @pbesh 20 | * [React component’s lifecycle](https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df#.w7v5cw6tk) Osmel Mora @osmel_mora 21 | 22 | **Where can I find information about React Lifecycle Methods without the jargon?** 23 | * [React Lifecycle](https://gist.github.com/jcreamer898/aeaf4b7a08b9871c3a48ad4bb7ccb35c) @jcreamer898 24 | 25 | **How do I use React Lifecycle Methods them?** 26 | 27 | * [React Lifecycle Methods- how and when to use them](https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1) Scott Domes @scottdomes 28 | -------------------------------------------------------------------------------- /src/pages/components/props.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Props 3 | path: "/components/props/" 4 | --- 5 | 6 | **What are props?** 7 | >props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. - react-guide 8 | 9 | See : [State vs Props & Application Data](https://youtu.be/qh3dYM6Keuw?t=290) also [props vs state](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) 10 | 11 | **How do I pass props?** 12 | 13 | ```javascript 14 | // manual transfer 15 | ReactDOM.render( 16 |
    17 | 18 |
    , 19 | document.querySelector("#container") 20 | ); 21 | 22 | ``` 23 | 24 | ```javascript 25 | // using JSX spread attributes 26 | 27 | ``` 28 | 29 | ```javascript 30 | // destructuring assignment with rest properties 31 | // ensures that you pass down all the props EXCEPT the ones you're consuming yourself 32 | function FancyCheckbox(props) { 33 | var { checked, ...other } = props; 34 | var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; 35 | // `other` contains { onClick: console.log } but not the checked property 36 | return ( 37 |
    38 | ); 39 | } 40 | ReactDOM.render( 41 | 42 | Hello world! 43 | , 44 | document.getElementById('example') 45 | ); 46 | ``` 47 | 48 | **How do I pass boolean values?** 49 | 50 | * [JSX `` and `` are equivalent](https://twitter.com/Jack_Franklin/status/768735664485568512) Jack Franklin @Jack_Franklin 51 | 52 | **Should I use import, props, or context in React?** 53 | 54 | * [Differences between require() and passing an object via prop or context](http://stackoverflow.com/questions/39111775/differences-between-require-and-passing-an-object-via-prop-or-context/39111942) Dan Abramov @dan_abramov 55 | 56 | ## PropTypes 57 | 58 | > **Note:** 📌 As of React v15.5.0 prop types are separate package https://github.com/reactjs/prop-types#installation + https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html 59 | 60 |
    61 | 62 | >PropTypes are essentially a dictionary where you define what props your component needs and what type(s) they should be. - Niels Gerritsen 63 | 64 | 65 | **What are PropTypes?** 66 | * [What are PropTypes?](https://themeteorchef.com/snippets/what-are-proptypes) Ryan Glover @themeteorchef 67 | 68 | **Why are React PropTypes important?** 69 | * [Why React PropTypes are important](http://wecodetheweb.com/2015/06/02/why-react-proptypes-are-important) Niels Gerritsen @NielsG89 70 | 71 | **How do I validate props?** 72 | * [Better Prop Validation in React](https://medium.com/@MoeSattler/better-prop-validation-in-react-cc83590d311f#.wdhbsrlgj) Moe Sattler @travelperk 73 | 74 | ## Destructuring Props and DefaultProps 75 | ``` 76 | function ExpandableForm({ onExpand, expanded = false, children }) { 77 | return ( 78 |
    79 | {children} 80 | 81 |
    82 | ) 83 | } 84 | ``` 85 | 86 | More info: [Our Best Practices for Writing React Components](https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8?imm_mid=0ed2ce&cmp=em-web-na-na-newsltr_20170208#.69iorc683) 87 | -------------------------------------------------------------------------------- /src/pages/components/refs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Refs 3 | path: "/components/refs/" 4 | --- 5 | 6 | >The ref attribute makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function. - reactenlightenment.com 7 | 8 | **What are refs and are string refs are bad?** 9 | 10 | * [Refs to Components](https://facebook.github.io/react/docs/more-about-refs.html) 11 | * [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html) 12 | * [Why do you use findDOMNode()?](https://twitter.com/dan_abramov/status/752936646602031104) Dan Abramov @dan_abramov 13 | * [String refs are bad in quite a few ways](https://news.ycombinator.com/edit?id=12093234) Dan Abramov @dan_abramov 14 | 15 | 16 | [**React 16.3 How does React.createRef work?**](#createref) 17 | * [React.createRef Demo](https://codesandbox.io/s/0yr3r313q0) 18 | 19 | ```javascript 20 | // use ref to easily add autofocus 21 | 22 | class Input extends Component { 23 | focus() { 24 | this.el.focus(); 25 | } 26 | 27 | render() { 28 | return ( 29 | { this.el = el; }} 31 | /> 32 | ); 33 | } 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /src/pages/components/rendering.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rendering 3 | path: "/components/rendering/" 4 | --- 5 | 6 | **What should go in the render function?** 7 | 8 | * [Return as soon as you know the answer](https://medium.com/@SimonRadionov/return-as-soon-as-you-know-the-answer-dec6369b9b67#.82kxymyki) @SimonRadionov 9 | 10 | **How does React decide to re-render a component?** 11 | * [How does React decide to re-render a component?](http://lucybain.com/blog/2017/react-js-when-to-rerender) 12 | 13 | **What are some common patterns for conditional rendering in React?** 14 | * [All the Conditional Renderings in React](https://www.robinwieruch.de/conditional-rendering-react/) @rwieruch Robin Wieruch 15 | 16 | ```javascript 17 | // clean up things using an 'almost-component' 18 | // for more see https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.2patc0o9c 19 | 20 | const SearchSuggestions = (props) => { 21 | const renderSearchSuggestion = listItem => ( 22 |
  • {listItem.name} {listItem.id}
    • 23 | ); 24 | 25 | return ( 26 |
      27 | {props.listItems.map(renderSearchSuggestion)} 28 |
    29 | ); 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /src/pages/components/state.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: State 3 | path: "/components/state/" 4 | --- 5 | 6 | > In one sense, “state” means the current visual representation of the app on screen... In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state. - Dave Ceddia 7 | 8 | **What is state in React?** 9 | 10 | * [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react) Dave Ceddia @dceddia 11 | 12 | ```javascript 13 | class App extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | 17 | // Must initialize state first 18 | this.state = { count: 0 }; 19 | } 20 | 21 | handleClick() { 22 | // Increment the count when the button is clicked 23 | this.setState({ 24 | count: this.state.count + 1 25 | }, function() { 26 | // setState is asynchronous! This function gets called 27 | // when it's finished. 28 | console.log("Job's done"); 29 | }); 30 | } 31 | 32 | render() { 33 | return ( 34 |
    35 |
    36 | Button presses: {this.state.count} 37 |
    38 | 41 |
    42 | ); 43 | } 44 | } 45 | 46 | ReactDOM.render( 47 | , 48 | document.getElementById('container') 49 | ); 50 | ``` 51 | 52 | ## Lifting State Up 53 | 54 | **What is lifting up state?** 55 | * [Lifting State Up](https://facebook.github.io/react/docs/lifting-state-up.html) 56 | 57 | 58 | ## Asynchronous Updates & setState() 59 | 60 | * [setState is asynchronous](https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0) Michael Chan @chantastic 61 | 62 | **I heard you can pass a function to setState when should do that?** 63 | 64 | > Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. — Rect Docs 65 | 66 | > If you know you’re going to use setState to update your component and you know you’re going to need the current state or the current props of your component to calculate the next state, passing in a function as the first parameter of this.setState instead of an object is the recommended solution. — Sophia Shoemaker 67 | 68 | 69 | ```javascript 70 | // state updates may be asynchronous 71 | 72 | // Wrong 73 | this.setState({ 74 | counter: this.state.counter + this.props.increment, 75 | }); 76 | 77 | // Correct 78 | this.setState((prevState, props) => ({ 79 | counter: prevState.counter + props.increment 80 | })); 81 | 82 | ``` 83 | 84 | * 💯 [Functional setState is the future of React](https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b#.didjv52tx) 85 | 86 | ```javascript 87 | // see post :: Using a function in `setState` instead of an object 88 | 89 | // outside your component class 90 | function increaseScore (state, props) { 91 | return {score : state.score + 1} 92 | } 93 | class User{ 94 | ... 95 | // inside your component class 96 | handleIncreaseScore () { 97 | this.setState( increaseScore) 98 | } 99 | ... 100 | } 101 | 102 | ``` 103 | 104 | 105 | * [Using a function in `setState` instead of an object](https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1#.h3fokbh9a) Sophia Shoemaker 106 | 107 | ## Handling State 108 | 109 | **How do I handle state?** 110 | 111 | * [The 5 Types Of React Application State](http://jamesknelson.com/5-types-react-application-state) James K Nelson @james_k_nelson 112 | * [State of React #1: A Stateless React App?](http://jamesknelson.com/state-react-1-stateless-react-app) James K Nelson @james_k_nelson 113 | * [A Case for setState](https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73#.w89epdtmo) Zack Argyle 114 | * [Where to Hold React Component Data: state, store, static, and this](https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00#.8k7tc37cs) Sam Corcos 115 | * [How to handle state in React. The missing FAQ](https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c#.dwz84fx9s) Osmel Mora @osmel_mora 116 | * [Should I keep something in React component state? I made a small cheatsheet.](https://twitter.com/dan_abramov/status/749710501916139520) Dan Abramov @dan_abramov 117 | * [Best Practices for Component State in React.js](http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html) Gabe Scholz @gabescholz 118 | * [Exploring React’s State Propagation](https://www.sitepoint.com/exploring-reacts-state-propagation) Eric Greene @ericwgreene 119 | 120 | **How can I decouple state and UI?** 121 | 122 | * [How to decouple state and UI](https://medium.com/@mweststrate/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37#.7l8ji1wer) Michel Weststrate @mweststrate 123 | 124 | 125 | **Coming from jQuery... how do I adjust my mental modal to work with React / State?** 126 | * [Thinking Statefully](https://daveceddia.com/thinking-statefully) Dave Ceddia @dceddia 127 | 128 | 129 | > **Tip:** 🤔 Use derived state when possible see code sample below: 130 | 131 | ```javascript 132 | class NameWithInitials extends React.Component { 133 | constructor(props) { 134 | super(props); 135 | this.state = { 136 | firstName: "", 137 | lastName: "", 138 | // Avoid creating state that can be derived from other state. 139 | // Example: The user's initials can be derived from the two items above. 140 | initials: "" 141 | }; 142 | } 143 | 144 | render() { 145 | const { firstName, lastName } = this.state; 146 | // Instead generate the user's initials on the fly like this. 147 | // Or do so in a seperate function above 148 | return ( 149 |
    150 | Initials: {firstName.charAt(0)} + {" "} + {lastName.charAt(0)} 151 |
    152 | ); 153 | } 154 | } 155 | ``` 156 | 157 | via @housecor - [twitter link](https://twitter.com/housecor/status/839125277842231298). 158 | 159 | 160 | ## Handling Initial State 161 | 162 | **How do I handle Intial state?** 163 | 164 | Use the constructor method also see tip below. 165 | 166 | ```javascript 167 | class MyComponent1 extends React.Component{ 168 | constructor(props){ 169 | super(props); 170 | this.state = {myVal: 'val'} 171 | } 172 | } 173 | ``` 174 | 175 | > **Tip:** 🤔 You don't need to declare a constructor in your React component to initialize state via @housecor: 176 | 177 | ```javascript 178 | 179 | // via @housecor https://twitter.com/housecor/status/866651617998897152 180 | // Traditional way 181 | class MyComponent1 extends React.Component{ 182 | constructor(props){ 183 | super(props); 184 | this.state = {myVal: 'val'} 185 | } 186 | } 187 | 188 | //Using public class field 189 | class MyComponent2 extends React.Component{ 190 | state = { 191 | myVal: 'val' 192 | } 193 | } 194 | 195 | ``` 196 | 197 | **Do I need to use the constructor?** 198 | 199 | * [The constructor is dead, long live the constructor!](https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599) Donavon West @donavon 200 | 201 | https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599 202 | 203 | **How do I handle making state immutable in React?** 204 | * [Handling State in React: Four Immutable Approaches to Consider](https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5) @housecor 205 | 206 | 207 | **Can I add state to function components in React?** 208 | * [Attaching state to stateless function components in React](https://medium.com/@dai_shi/attaching-state-to-stateless-function-components-in-react-db317a9e83ad) @dai_shi 209 | 210 | **[Can I set state can use setState in componentDidMount and componentDidUpdate?](#setstate)** 211 | * Yes [Understanding setState in componentDidMount to Measure Elements Without Transient UI State](https://codedaily.io/screencasts/67/Understanding-setState-in-componentDidMount-to-Measure-Elements-Without-Transient-UI-State 212 | ) 213 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /src/pages/context.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Context 3 | path: "/context/" 4 | --- 5 | 6 | 7 | ## Version 16.3 + 8 | [React’s ⚛️ new Context API](https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b) Kent C. Dodds 9 | 10 | 11 | ## Archive 12 | ⚠️ Context is an **advanced** feature. It is an experimental API and could break in future releases of React. See: [Why Not To Use Context](https://facebook.github.io/react/docs/context.html#why-not-to-use-context) 13 | 14 | * [ReactCasts #4 - Context (Part 1)](https://www.youtube.com/watch?v=lxq938kqIss&t=1s) Cassio Zen @cassiozen 15 | * [ReactCasts #5 - Context (Part 2)](https://www.youtube.com/watch?v=mwYHDXS6uSc&feature=youtu.be) Cassio Zen @cassiozen 16 | * [How to handle React context in a reliable way](https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc#.rtwgxxy0d) Osmel Mora @osmel_mora 17 | * [How to safely use React context](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076#.m6v9tsgub) Michel Weststrate @mweststrate 18 | * [Context in ReactJS Applications](http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications) Jack Franklin @Jack_Franklin 19 | * [Context all the things with React](https://www.youtube.com/watch?v=k9AhBMwj1w4) Stephen Rivas Jr. (@sprjrx) 20 | -------------------------------------------------------------------------------- /src/pages/creating-a-react-project.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Creating a React Project 3 | path: "/creating-a-react-project/" 4 | --- 5 | 6 | **How do I create a new React project?** 7 | 8 | > That depends on what your looking for out of the box. No config, config, server-rendered etc... here are a few to consider. Of course you can setup from scratch as well (not covered here). 9 | 10 | * [create-react-app](https://github.com/facebookincubator/create-react-app) No configuration or complicated folder structures, just the files you need to build your app. 11 | 12 | ```bash 13 | #install create-react-app if you don't have it 14 | npm install -g create-react-app 15 | 16 | #create a new app 17 | create-react-app my-app 18 | cd my-app/ 19 | 20 | #start the app - have fun! 21 | npm start 22 | ``` 23 | 24 | * [nwb](https://github.com/insin/nwb) Create React apps with no configuration (until you need it) 25 | * [next.js](https://github.com/zeit/next.js) A minimalistic framework for universal server-rendered React applications 26 | * [react-server](https://github.com/redfin/react-server) Batteries-included Server-rendered React applications. Note: also see [React 30 -> 002 - Streaming React](https://www.youtube.com/watch?v=XW_c60NCkI4) 27 | * [react-boilerplate](https://github.com/mxstbr/react-boilerplate) A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices 28 | * [create-react-pwa](https://github.com/jeffposnick/create-react-pwa) + Progressive Web App goodness 29 | * [Gatsby](https://github.com/gatsbyjs/gatsby) Transform plain text into dynamic blogs and websites using React.js (used for this website!) 30 | * [The Minimal React Webpack Babel Setup](https://www.robinwieruch.de/minimal-react-webpack-babel-setup) @rwieruch 31 | 32 | Also see these [projects](https://github.com/facebookincubator/create-react-app#alternatives) 33 | 34 | 35 | **The 4 Easiest Ways To Start A React Project** 36 | 37 | 38 | 39 | 40 | **Where can I find videos for using React Create App?** 41 | 42 | * [React Create App + Express](https://www.youtube.com/watch?v=gbVhmaW04bc&feature=youtu.be) @sprjrx @ladyleet 43 | 44 | 45 | **Can I play around with React Online?** 46 | 47 | * [extends React.Component style](http://codepen.io/Arney/pen/OXYqWb) 48 | * [React.createClass style](http://codepen.io/Arney/pen/QERoaQ) 49 | * [React JSBin](http://react.jsbin.com/?html,css,js,output) 50 | * [WebpackBin](http://www.webpackbin.com/EkscblgMM) 51 | -------------------------------------------------------------------------------- /src/pages/css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS and React 3 | path: "/css/" 4 | --- 5 | 6 | * Watch this 🔥 💯 [Styling React.JS applications](https://www.youtube.com/watch?v=19gqsBc_Cx0) Max Stoiber @mxstbr 7 | 8 | **What about styling things in React?** 9 | 10 | You can use plain CSS or any preprocessor (Sass, Less etc...) with React. React outputs standard markup so technically you can keep doing what you've been doing. 11 | 12 | > Using CSS to style our React content is actually as straightforward as you can imagine it to be. Because React ends up spitting out regular HTML tags, all of the various CSS tricks you've learned over the years to style HTML still apply. - kirupa 13 | 14 | 15 | * [What to use for React styling? ](http://andrewhfarmer.com/how-to-style-react) Andrew H Farmer 16 | * [Styling React](http://survivejs.com/react/advanced-techniques/styling-react) survivejs.com 17 | * [Styling in React](https://www.kirupa.com/react/styling_in_react.htm) kirupa 18 | * [Styling React Components in JavaScript](https://www.youtube.com/watch?v=0aBv8dsZs84) Michael Chan 19 | 20 | 21 | **What about using Bootstrap with React?** 22 | * [React-Bootstrap](https://react-bootstrap.github.io) - Bootstrap 3 components built with React 23 | * [bootstrap-loader](https://github.com/shakacode/bootstrap-loader) -Load Bootstrap styles and scripts in your Webpack bundle 24 | 25 | ### Component Level Styling 26 | 27 | > There are various approaches for React that allow us to push styling to the component level. - survivejs.com 28 | 29 | 30 | **What repos should I checkout for styling at the component level?** 31 | 32 | * [styled-components](https://github.com/styled-components/styled-components) + [Styling React Applications](https://youtu.be/1Urj4TZ5BLI) @mxstbr 33 | * [glamor](https://github.com/threepointone/glamor) @threepointone 34 | * [aphrodite](https://github.com/Khan/aphrodite)- Khan Academy 35 | 36 | Note: Also see - [Styled components or Glamor?](https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor) 37 | 38 | 39 | **What's the difference between what’s called "inline styles" and what's called “CSS-in-JS”?** 40 | * [Writing your styles in JS ≠ writing inline styles](http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js) Max Stoiber @mxstbr 41 | 42 | 43 | **I just need some simple inline styles ... What's the most basic way to use inline styles with React?** 44 | 45 | * [React Docs Inline styles](https://facebook.github.io/react/docs/dom-elements.html#style) 46 | * [classnames](https://github.com/JedWatson/classnames) - A simple javascript utility for conditionally joining classNames together. @JedWatson 47 | 48 | **What resources are available discussing the pros and cons of inline styles and CSS in JS?** 49 | * [PANEL ON 'INLINE STYLES'](http://shoptalkshow.com/episodes/180-panel-on-inline-styles) @ShopTalkShow 50 | * [CSS in JS may not be the solution to all your problems](https://blog.grommet.io/post/2016/08/10/css-in-js-may-not-be-the-solution-to-all-your-problems) Alan Souza 51 | * [CSS in JS + CSS Modules](http://www.dadsindev.com/12)@dadsindev 52 | * [CSS in JS tech chat](https://www.youtube.com/watch?v=BXOF_8jDdf8) Kent C. Dodds & Sarah Drasner 53 | 54 | **What about using CSS Modules for styling?** 55 | * [css-modules](https://github.com/css-modules/css-modules) @markdalgleish 56 | * [CSS Modules by Example](http://andrewhfarmer.com/css-modules-by-example) Andrew H Farmer 57 | 58 | **There's too many CSS in JS options how can I compare them?** 59 | * [React: CSS in JS techniques comparison](https://github.com/MicheleBertoli/css-in-js) Michele Bertoli @MicheleBertoli 60 | * [Comparison of CSS in JS Libraries for React](https://github.com/FormidableLabs/radium/tree/master/docs/comparison - radium) 61 | 62 | **How can I style/build a component that's very reusable customizable?** 63 | * [Reusable React Component with Overridable Inline CSS Styles](http://staxmanade.com/2016/06/reusable-react-component-with-overridable-inline-css-styles/) 64 | -------------------------------------------------------------------------------- /src/pages/deep-dive.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deep Dive 3 | path: "/deep-dive/" 4 | --- 5 | 6 | * [Implementation Notes - How React Really Works](https://facebook.github.io/react/contributing/implementation-notes.html) Dan Abramov @dan_abramov 7 | * [Building React From Scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) Paul O'Shannessy @zpao 8 | * [React Architecture – OSCON](http://blog.vjeux.com/2014/javascript/react-architecture-oscon.html) Christopher Chedeau @vjeux 9 | * [ReactJS: Under The Hood](https://www.youtube.com/watch?v=xsKYAa1ZXpQ) Boris Dinkevich @BorisDinkevich 10 | * [REACT INTERNALS](https://zackargyle.github.io/react-internals-slides/#/?_k=7f19z9) Zack Argyle @ZackArgyle 11 | * [Under the hood: ReactJS](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS) @bliashenko 12 | 13 | ## Contributing to React JS 14 | 15 | **Where can I learn about Contributing to React JS?** 16 | 17 | * [Contributing to React JS](https://www.youtube.com/watch?v=wUpPsEcGsg8) Kent C. Dodds 18 | 19 | ## Core Notes 20 | 21 | **Where can I find out what's going on with React / Upcoming versions?** 22 | * [core-notes](https://github.com/reactjs/core-notes/) 23 | * [React 15.5 and React 16 roadmap](https://github.com/facebook/react/issues/8854) 24 | -------------------------------------------------------------------------------- /src/pages/forms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Forms 3 | path: "/forms/" 4 | --- 5 | 6 | **How can I build forms with React?** 7 | 8 | * [Forms In React](http://presentations.survivejs.com/forms-in-react) Juho Vepsäläinen @bebraw 9 | * [Learn Raw React: Ridiculously Simple Forms](http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms) James K Nelson @james_k_nelson 10 | 11 | **How can I validate form input?** 12 | * [Elegant Form Validation Using React](https://spin.atomicobject.com/2016/10/05/form-validation-react) Jordan Schaenzle 13 | * [Building validated forms with great UX in React](https://youtu.be/1Urj4TZ5BLI?t=2437) Marcela Hrdá 14 | * [react-validation](https://github.com/vacuumlabs/react-validation) 15 | -------------------------------------------------------------------------------- /src/pages/fun.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fun 3 | path: "/fun/" 4 | --- 5 | 6 | **What are some fun React projects to check out?** 7 | * [terminal-in-react](https://github.com/nitin42/terminal-in-react) @NTulswani 8 | -------------------------------------------------------------------------------- /src/pages/gotchas.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gotchas 3 | path: "/gotchas/" 4 | --- 5 | 6 | **What are some React Gotchas?** 7 | 8 | * [React Gotchas](https://daveceddia.com/react-gotchas) Dave Ceddia @dceddia 9 | * [How to Render Components Outside the Main ReactJS App](https://blog.komand.com/how-to-render-components-outside-the-main-react-app) 10 | * [Watch Out for Undefined State](https://daveceddia.com/watch-out-for-undefined-state) Dave Ceddia @dceddia 11 | 12 | **How do you add comments in JSX?** 13 | 14 | ```javascript 15 | render() { 16 | return ( 17 |
    18 | 19 |
    20 | ) 21 | } 22 | 23 | render() { 24 | return ( 25 |
    26 | {/* Works! */} 27 |
    28 | ) 29 | } 30 | 31 | ``` 32 | More info and Sublime Text snippet here: http://wesbos.com/react-jsx-comments @wesbos 33 | 34 | 35 | **Does React have SyntheticEvent equivalents for all DOM events?** 36 | 37 | No - Not all DOM events have SyntheticEvent equivalents example there’s no synthetic event for listening for when the browser window is resized 38 | 39 | ```javascript 40 | import React, { Component } from 'react'; 41 | import '../App.css'; 42 | 43 | class ResizeWindow extends Component { 44 | 45 | constructor(props) { 46 | super(props); 47 | this.state = { 48 | width: window.innerWidth, 49 | height: window.innerHeight 50 | }; 51 | } 52 | 53 | handleResizedScreen() { 54 | this.setState({ 55 | width: window.innerWidth, 56 | height: window.innerHeight 57 | }); 58 | } 59 | 60 | componentDidMount() { 61 | window.addEventListener("resize", this.handleResizedScreen.bind(this)); 62 | } 63 | 64 | componentWillUnmount() { 65 | window.removeEventListener("resize", this.handleResizedScreen.bind(this)); 66 | } 67 | 68 | render() { 69 | return ( 70 |
    71 |

    { this.state.width } x { this.state.height }

    72 |
    73 | ); 74 | } 75 | 76 | } 77 | 78 | export default ResizeWindow; 79 | ``` 80 | 81 | More info : [Handling Events in React 101](https://appendto.com/2017/01/react-events-101) 82 | -------------------------------------------------------------------------------- /src/pages/history.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: History 3 | path: "/history/" 4 | --- 5 | 6 | * [JSConfUS 2013 - Tom Occhino and Jordan Walke: JS Apps at Facebook](https://www.youtube.com/watch?v=GW0rj4sNH2w&index=10&list=PL37ZVnwpeshF7AHpbZt33aW0brYJyNftx) The one where React became #OSS 7 | * [Our First 50,000 Stars](https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html) Vjeux @vjeux -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "gatsby-link"; 3 | import "../css/markdown-styles.css"; 4 | import Helmet from "react-helmet"; 5 | import { rhythm } from "../utils/typography"; 6 | 7 | class BlogIndex extends React.Component { 8 | render() { 9 | const siteTitle = this.props.data.site.siteMetadata.title; 10 | const posts = this.props.data.allMarkdownRemark.edges; 11 | 12 | return ( 13 |
    14 | 15 | {posts ? posts.map(post => { 16 | if ( 17 | post.node.path !== "/404/" && 18 | post.node.frontmatter.path === "/intro/" 19 | ) { 20 | const title = post.node.frontmatter.title || post.node.path; 21 | 22 | console.log(post.node.frontmatter.path); 23 | return ( 24 |
    25 |
    26 |
    27 | ); 28 | } 29 | }) :
    :(
    } 30 |
    31 | ); 32 | } 33 | } 34 | 35 | export default BlogIndex; 36 | 37 | export const pageQuery = graphql` 38 | query IndexQuery { 39 | site { 40 | siteMetadata { 41 | title 42 | } 43 | } 44 | allMarkdownRemark(sort: { fields: [frontmatter___title], order: DESC }) { 45 | edges { 46 | node { 47 | excerpt 48 | html 49 | frontmatter { 50 | path 51 | } 52 | frontmatter { 53 | title 54 | } 55 | } 56 | } 57 | } 58 | } 59 | `; 60 | -------------------------------------------------------------------------------- /src/pages/internationalization.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Internationalization 3 | path: "/internationalization/" 4 | --- 5 | 6 | **How should I handle internationalization?** 7 | 8 | * [Internationalization in React](https://medium.freecodecamp.com/internationalization-in-react-7264738274a0#.bcfxgycwv) Preethi Kasireddy 9 | 10 | **What repos should I checkout for internationalization?** 11 | * [react-intl](https://github.com/yahoo/react-intl) 12 | * [react-localize](https://github.com/sprjr/react-localize) @sprjrx -------------------------------------------------------------------------------- /src/pages/interview-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Interview Questions 3 | path: "/interview-questions/" 4 | --- 5 | 6 | **Where can I go to find good React interview questions?** 7 | * [React Interview Questions](https://github.com/Pau1fitz/react-interview) 8 | * [12 Essential React.js Interview Questions](https://www.toptal.com/react/interview-questions) 9 | * [React Interview Questions](https://github.com/eltonjuan/react-interview-questions/blob/master/ReactInterviewQuestions.md) 10 | * [quiz.md](https://gist.github.com/gaearon/8fa9fdd2c4197ee0b52894877bf587a4) Dan Abramov @dan_abramov 11 | * [5 Essential React.js Interview Questions](https://www.codementor.io/reactjs/tutorial/5-essential-reactjs-interview-questions) 12 | * [The Vital Guide to React.js Interviewing](https://chandanpandey.com/2016/10/27/the-vital-guide-to-react-js-interviewing) 13 | * [React Interview Questions](https://tylermcginnis.com/react-interview-questions) Tyler McGinnis @tylermcginnis33 14 | -------------------------------------------------------------------------------- /src/pages/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Start 3 | path: "/intro/" 4 | --- 5 | ## Notable 6 |
    7 |

    ⚡ Want to find out what's new on React FAQ sign up for the Newsletter

    8 |

    🔥 New - React 16 resources

    9 | 10 |

    11 | 12 | 13 | ## Start 14 | This guide aims to pull together quality content about React core concepts into a central location for quick reference. 15 | 16 | > **Tip:** 🤔 Learn React before you try using things like Redux, MobX. See: [8 things to learn in React before using Redux](https://www.robinwieruch.de/learn-react-before-using-redux/) @rwieruch 17 | 18 | Remember we're all learning. Read, Try, Mess Up (it's okay). If you find this guide helpful let me know [@timarney](https://twitter.com/timarney). 19 | 20 | 21 | ```javascript 22 | ReactDOM.render( 23 |

    Learn React

    , 24 | document.getElementById('root') 25 | ); 26 | ``` 27 | 28 | >There's lots to learn but if you break it down there are some key concepts to focus on. JSX, React Elements, Components, Lifecycle Methods, Props and State. 29 | 30 | 31 | > **Tip:** 🤔 If you're stuck checkout out [Reactiflux](https://www.reactiflux.com) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs) 32 | 33 | ## These articles will start you down the path to learning React. 34 | 35 | **I don't know React what should I watch / read before I start?** 36 | * [How to React ⚛️](https://blog.kentcdodds.com/how-to-react--9e87f48414d2) 37 | * [The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) 38 | * [Thinking in React - Pete Hunt](https://facebook.github.io/react/docs/thinking-in-react.html) 39 | * 🔥 [Teaching React Without Using React](https://medium.com/@ericclemmons/teaching-react-without-using-react-a4b87cfd4e87#.q8cyvryw1) Eric Clemmons @ericclemmons 40 | * 🔥 [13 things you need to know about React](http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react) @kjendrzyca 41 | * [The 5 Things You Need To Know To Understand React](https://medium.com/@sachagreif/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3#.uii8of7um) Sacha Greif 42 | * [Official React Docs](https://facebook.github.io/react/docs/hello-world.html) 43 | * [Yes, React is taking over front-end development. The question is why](https://medium.freecodecamp.com/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76) Samer Buna @samerbuna 44 | * [React Out of the Box - React for Newbies](https://www.youtube.com/watch?v=100pKUE3OPI) Rob Merrill @robgmerrill 45 | * [How Pure CSS Images Helped Me Understand React Components](https://medium.com/coding-artist/how-pure-css-images-helped-me-understand-react-components-3ad7b05051b0) Michael Mangialardi @michaelmangial1 46 | * [React Express](http://www.react.express) @devinaabbott 47 | 48 |
    49 | Additional information to start with 50 | 51 | * [I wish I knew these before diving into React](https://engineering.opsgenie.com/i-wish-i-knew-these-before-diving-into-react-301e0ee2e488) Canberk Morelli 52 | * [Pete Hunt: React: Rethinking best practices JSConf EU 2013](https://www.youtube.com/watch?v=x7cQ3mrcKaY) 53 | * [React in 7 Minutes](https://egghead.io/lessons/react-react-in-7-minutes) this is a slightly dated but still really good starter 54 | * [Complete Intro to React - React, Webpack, Babel, Redux, React Router, SSR](https://btholt.github.io/complete-intro-to-react/) Brian Holt(@holtbt) for Frontend Masters worshop 55 | * [React "Aha" Moments](https://tylermcginnis.com/react-aha-moments) Tyler McGinnis @tylermcginnis33 56 | * [All the terrible things I did the first time I wrote a complex React App ](https://youtu.be/Fk--XUEorvc?t=20666) Raquel @raquelxmoss 57 | * [Introduction to React](https://mva.microsoft.com/en-US/training-courses/introduction-to-react-16635?l=4wrKgdJrC_206218965) Eric W. Greene / Microsoft Virtual Academy 58 | * [A few things every new React developer should know part 1](https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-1-93940e11800a) @pieceoflena 59 |
    60 | 61 | > **Tip:** 🤔 Check out this interactive screencast React Tic Tac Toe Tutorial https://scrimba.com/c/cbqm3SM Per Harald Borgen @perborgen 62 | -------------------------------------------------------------------------------- /src/pages/jsx.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSX 3 | path: "/jsx/" 4 | --- 5 | 6 | 7 | **What's JSX?** 8 | 9 | >JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. - http://buildwithreact.com/tutorial/jsx 10 | 11 | > **Tip:** 🤔 You can play around with JSX [here](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&targets=&browsers=&builtIns=false&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%20className%3D%22myclass%22%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D). 12 | 13 | ```javascript 14 | // This is JSX 15 | function hello() { 16 | return
    Hello world!
    ; 17 | } 18 | 19 | // When compiled it gets turned into a function 20 | "use strict"; 21 | 22 | function hello() { 23 | return React.createElement( 24 | "div", 25 | { className: "myclass" }, 26 | "Hello world!" 27 | ); 28 | } 29 | 30 | ``` 31 | 32 | 33 | 34 | * [Tutorial: JSX](http://buildwithreact.com/tutorial/jsx) 35 | * [JSX in Depth](https://facebook.github.io/react/docs/jsx-in-depth.html) 36 | * [React’s JSX: The Other Side of the Coin](https://medium.com/@housecor/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98#.i5rmd9h07) Cory House @housecor 37 | * [What does JSX stand for?](https://twitter.com/tomocchino/status/769931611303321601) Tom Occhino @tomocchino 38 | 39 | **What does JSX really do for me?** 40 | 41 | [This is the sort of stuff JSX saves you from having to manage](https://gist.github.com/insin/8e72bed793772d82ca8d) Jonny Buchanan @jbscript 42 | 43 | **Can I use JSX for conditionals?** 44 | > Yes there's a babel plugin for that [jsx-control-statements](https://www.npmjs.com/package/jsx-control-statements) 45 | 46 | * [A cleaner solution for conditionals and loops in JSX using Babel 6](https://tomat.blog/a-cleaner-solution-for-conditionals-and-loops-in-jsx-using-babel-6-a67dcaee9b06#.tlsxvz52a) 47 | -------------------------------------------------------------------------------- /src/pages/more-resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: More Resources 3 | path: "/more-resources/" 4 | --- 5 | - [Video Courses](/videos-courses/) 6 | - [Talks](/talks/) 7 | - [Training](/training/) 8 | - [Books](/books/) 9 | - [Newsletters](/newsletters/) 10 | - [React Armory](https://reactarmory.com) @james_k_nelson 11 | - [React Express](http://www.react.express) @devinaabbott 12 | 13 | 14 | ## Podcast 15 | https://5minreact.audio 16 | 17 | ## Fun 18 | - [Fun React Projects](/fun/) 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/pages/newsletters.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Newsletters 3 | path: "/newsletters/" 4 | --- 5 | 6 | **Where can I find React specific newsletters?** 7 | 8 | * [React.js Newsletter](http://reactjsnewsletter.com) 9 | * [React Status](http://react.statuscode.com) 10 | * [Fullstack React](http://newsletter.fullstackreact.com) 11 | * [This Week In React](https://thisweekinreact.com) 12 | * [React Digest](http://reactdigest.net) 13 | * [Kent C. Dodds Mail](https://tinyletter.com/kentcdodds) 14 | * [Mark's Dev Links](https://tinyletter.com/acemarke) 15 | -------------------------------------------------------------------------------- /src/pages/patents.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PATENTS 3 | path: "/patents/" 4 | --- 5 | 6 | **React - MIT license** 7 | 8 | 9 | 10 | 11 | * [Relicensing React, Jest, Flow, and Immutable.js](https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js) 12 | 13 | **What's all this stuff I hear about Facebook PATENTS clause?** 14 | 15 | * [Some links to point people to when they misinterpret PATENTS clause or spread false claims](https://gist.github.com/gaearon/df0c4025e67399af72786d7ac7c819cc) Dan Abramov @dan_abramov 16 | * [React’s license: necessary and open?](http://lu.is/blog/2016/10/31/reacts-license-necessary-and-open) Luis Villa @luis_in_140 17 | * [React, Facebook, and the Revokable Patent License. Why It’s a Paper 🐯.](https://medium.com/@dwalsh.sdlr/react-facebook-and-the-revokable-patent-license-why-its-a-paper-25c40c50b562) @lawjolla 18 | * [Open Source Community Over-REACTs to X Rated Code](https://heathermeeker.com/2017/08/19/open-source-community-over-reacts-to-x-rated-code/amp) 19 | * [Explaining React's license](https://code.facebook.com/posts/112130496157735/explaining-react-s-license) 20 | * [3 Points to Consider before Migrating Away from React Because of Facebook’s ‘BSD+ Patent’ License](https://medium.com/@ArielR_IP/3-points-to-consider-before-migrating-away-from-react-because-of-facebooks-bsd-patent-license-b4a32562d268) @ArielR_IP 21 | * [The React license for founders and CTOs](https://medium.com/@ji/the-react-license-for-founders-and-ctos-b38d2538f3e5) James Ide @JI 22 | 23 | > "After studying the patent grant that covers React.js, I see it is not a problem after all. That program is ok to list". **Dr Richard Stallman** - [ No problem with react.js](https://lists.gnu.org/archive/html/directory-discuss/2017-01/msg00025.html) 24 | 25 | * [Automattic Will Continue to Use React.js in Calypso Despite Patent Clause](https://wptavern.com/automattic-will-continue-to-use-react-js-in-calypso-despite-patent-clause) 26 | 27 | > According to Sieminski, “The companies with the greatest concern are those that have large patent portfolios and engage in offensive patent litigation, especially against Facebook.” 28 | 29 | 30 | * [Don’t Over-REACT to the Facebook Patents License](https://blog.fossa.io/dont-over-react-to-the-facebook-patents-license-629f708f2221) 31 | 32 | > Meanwhile, in private business, there is little controversy about using code under the BSD+patent terms. Most companies have examined the marginal legal risk of this license compared to others (like Apache 2.0) and considered it underwhelming. Unless a company decides to sue Facebook (or accuse its products), the termination trigger has no actual effect. 33 | 34 | **Where can I find answers to common questions about the additional patent grant?** 35 | * [Facebook - Open Source License FAQ](https://code.facebook.com/pages/850928938376556) 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/pages/patterns.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Patterns 3 | path: "/patterns/" 4 | --- 5 | 6 | > **Tip:** 🤔 Check out these free lectures via @ReactJSTraining https://reacttraining.com/patterns 7 | 8 | [**Where can I find common patterns used in React?**](#common) 9 | * [Evolving Patterns in React](https://medium.freecodecamp.org/evolving-patterns-in-react-116140e5fe8f) Alex Moldovan 10 | * [Simple React Patterns - Dealing With Side-Effects In React](http://lucasmreis.github.io/blog/simple-react-patterns) Lucas Reis 11 | * [React Component Patterns](https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82) Gustavo Matheus 12 | * [React Patterns](http://reactpatterns.com) @chantastic 13 | * [React.js in patterns](http://krasimirtsonev.com/blog/article/react-js-in-design-patterns) Krasimir Tsonev 14 | * [Patterns For Style Composition In React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react) Brent Jackson @jxnblk 15 | * [Make Your React Components Pretty](https://medium.com/walmartlabs/make-your-react-components-pretty-a1ae4ec0f56e#.ctwfvx379) Mark Brouch @markbrouch 16 | * [react-pattern-match](https://twitter.com/tkh44/status/827605381337735168/photo/1) @tkh44 17 | * [10 React mini-patterns](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.nz1zzh6qf) @D__Gilbertson 18 | * [Use Property Initializers for Cleaner React Components](https://www.fullstackreact.com/articles/use-property-initializers-for-cleaner-react-components) Anthony Accomazzo 19 | * [React Patterns and Practices](http://elijahmanor.com/talks/react-patterns-practices) @elijahmanor 20 | * [Techniques for decomposing React components](https://medium.com/@Dvtng/techniques-for-decomposing-react-components-e8a1081ef5da) David Tang @Dvtng 21 | 22 | 23 | 24 | 25 | 26 | 27 | **What are some good patterns for handling binding?** 28 | * [React Binding Patterns: 5 Approaches for Handling `this`](https://medium.freecodecamp.com/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56) @housecor 29 | 30 | 31 | **How can I avoid passing data down through many levels of components?** 32 | 33 | * [Avoiding deeply nested component trees](https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991) Ruben Oostinga @RubenOostinga 34 | 35 | 36 | 37 | 38 | **Patterns for working with PropTypes** 39 | * [React Pattern: Centralized PropTypes](https://medium.freecodecamp.org/react-pattern-centralized-proptypes-f981ff672f3b) Cory House @housecor 40 | 41 | 42 | **How can I extract logic out of my components?** 43 | * [Extracting Logic from React Components](https://javascriptplayground.com/blog/2017/07/react-extracting-logic) @Jack_Franklin 44 | 45 | 46 | **How can I move rendering logic out of my components?** 47 | 48 | Ryan Florence - Compound Components 49 | 50 | 51 | 52 | [**What are some common patterns in React Router?**](#programmatically-navigate) 53 | * [react-router-programmatically-navigate](https://tylermcginnis.com/react-router-programmatically-navigate) 54 | 55 | [**How can I debounce events in React?**](#debounce) 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/pages/performance.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Performance 3 | path: "/performance/" 4 | --- 5 | 6 | **Performance myths vs facts** 7 | * [React, Inline Functions, and Performance](https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578) Ryan Florence @ryanflorence 8 | 9 | **How can I make my app faster?** 10 | * [Performance-tuning a React application](https://codeburst.io/performance-tuning-a-react-application-f480f46dc1a2) Joshua Comeau 11 | * [Twitter Lite and High Performance React Progressive Web Apps at Scale](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3) Paul Armstrong @paularmstrong 12 | * [Component Rendering Performance in React](https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc#.gvyat7vkb) Grgur Grisogono 13 | * [Don‘t use PureComponent everywhere. Measure](https://twitter.com/dan_abramov/status/759383530120110080) Dan Abramov @dan_abramov 14 | * [React.js pure render performance anti-pattern](https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.hewsz120q) 15 | * [Should I use shouldComponentUpdate?](http://jamesknelson.com/should-i-use-shouldcomponentupdate) James K Nelson @james_k_nelson 16 | * [Reconciliation](https://facebook.github.io/react/docs/reconciliation.html) 17 | * [Quick slides on #reactjs performance](http://presentations.survivejs.com/react-performance/#/?_k=ivqhoe) Juho Vepsäläinen @bebraw 18 | -------------------------------------------------------------------------------- /src/pages/react-ajax.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Ajax 3 | path: "/react-ajax/" 4 | --- 5 | 6 | **What is the best practice for getting server data into React components?** 7 | >It depends! See: [React AJAX Best Practices](http://andrewhfarmer.com/react-ajax-best-practices) Andrew H Farmer @ahfarmer 8 | 9 | * [Loading and Using External Data in React](http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react) Chris Coyier @chriscoyier 10 | 11 | **⭐ Example using arrow syntax:** 12 | ```javascript 13 | class Component extends React.Component { 14 | componentDidMount() { 15 | axios.get('http://…').then(data => { 16 | this.setState( { name: data.blah } ); 17 | }); 18 | } 19 | } 20 | ``` 21 | -------------------------------------------------------------------------------- /src/pages/react-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React elements 3 | path: "/react-elements/" 4 | --- 5 | 6 | > Elements are the smallest building blocks of React apps. 7 | > Elements are what components are "made of ..." 8 | — [React Docs](https://facebook.github.io/react/docs/rendering-elements.html) 9 | - An element is a plain object describing a component instance or DOM node and its desired properties 10 | - An element is not an actual instance. Rather, it is a way to tell React what you want to see on the screen 11 | 12 | * [What makes an 'Element' an 'Element' vs a component?](https://twitter.com/timarney/status/790540834466701312) Tim Arney @timarney 13 | 14 | 15 | ```javascript 16 | // element is what you return from a component 17 | 18 | const DeleteAccount = () => ( 19 |
    20 |

    Are you sure?

    21 | Yep 22 | 23 |
    24 | ); 25 | ``` 26 | 27 | 28 | * [Understanding the Difference Between React Elements and Components](https://quickleft.com/blog/understanding-the-difference-between-react-elements-and-components) Alex Johnson 29 | * [React Elements vs React Components](https://tylermcginnis.com/react-elements-vs-react-components) Tyler McGinnis -------------------------------------------------------------------------------- /src/pages/react-fiber.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Fiber 3 | path: "/react-fiber/" 4 | --- 5 | 6 | **Why, What, and How?** 7 | * [Why, What, and How of React Fiber with Dan Abramov and Andrew Clark](https://youtu.be/crM1iRVGpGQ?list=PLV5CVI1eNcJi8sor_aQ2AzOeQ3On3suOr) 8 | 9 | **What is React Fiber?** 10 | * 💯 [Lin Clark - A Cartoon Intro to Fiber - React Conf 2017](https://www.youtube.com/watch?v=ZCuYPiUIONs&index=5&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0) 11 | * [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture) Andrew Clark @acdlite 12 | * [What's Next for React](https://www.youtube.com/watch?v=aV1271hd9ew) Andrew Clark @acdlite 13 | 14 | **Is Fiber ready yet?** 15 | * http://isfiberreadyyet.com 16 | 17 | **How can I contribute to Fiber?** 18 | * [Fiber Principles: Contributing To Fiber](https://github.com/facebook/react/issues/7942) 19 | 20 | **Where can I find out more about React Fiber?** 21 | * [react-fiber-resources](https://github.com/koba04/react-fiber-resources) @koba04 22 | -------------------------------------------------------------------------------- /src/pages/react-production.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React in production 3 | path: "/react-production/" 4 | --- 5 | 6 | > Turn Off Development mode [Development and Production Versions](https://facebook.github.io/react/docs/installation.html#development-and-production-versions) 7 | 8 | 9 | **How can I code split at the component level?** 10 | * [Introducing React Loadable](https://medium.com/@thejameskyle/react-loadable-2674c59de178) James Kyle @thejameskyle 11 | * [Impress Your Friends With Code Splitting in React](https://hackernoon.com/impress-your-friends-with-code-splitting-in-react-9f9a3ca2ae6e) Burke H✪lland @burkeholland 12 | 13 | **How can I code split using React Router?** 14 | 15 | * Code Splitting with React and React Router 16 | 17 | **Where can I find good info on using React in production?** 18 | 19 | * [Improving first time load of a Production React App (Part 1 of 2)](https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0#.2yvoqi46t) Kanav Arora 20 | 21 | * [How OkCupid organizes its multi-page React app](https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app) Morley Zhi 22 | 23 | 24 | **How can I setup my app to work in multiple environments?** 25 | 26 | [Using React in Multiple Environments](https://daveceddia.com/multiple-environments-with-react) @dceddia 27 | -------------------------------------------------------------------------------- /src/pages/react16.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 16 3 | path: "/react16/" 4 | --- 5 | 6 | **Release** 7 | * 🎉 [React v16.0](https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html) 8 | 9 | **Details** 10 | * [React 16: A look inside an API-compatible rewrite of our frontend UI library](https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library) Sophie Alpert @sophiebits 11 | 12 |
    13 | 14 | > This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous rendering yet. We will introduce an opt-in to the async mode later during React 16.x. We don’t expect React 16.0 to make your apps significantly faster or slower, but we’d love to know if you see improvements or regressions. @bvaughn 15 | 16 | 17 | [**Lastest News**](#news) 18 | * [What’s new in React 16.3(.0-alpha)](https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b) 19 | 20 | 21 | **React 16 RC Notes** 22 | * [React 16 RC #10294](https://github.com/facebook/react/issues/10294) 23 | 24 | **Where can I find some good information for React 16?** 25 | 26 | *Error Handling* 27 | * [Error Handling in React 16](https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html) Dan Abramov @dan_abramov 28 | * [Error Handling using Error Boundaries in React 16](https://egghead.io/lessons/react-error-handling-using-error-boundaries-in-react-16) Nik Graf @nikgraf 29 | * [2 Minutes to Learn React 16's componentDidCatch Lifecycle Method](https://medium.com/@sgroff04/2-minutes-to-learn-react-16s-componentdidcatch-lifecycle-method-d1a69a1f753) Sean Groff @_SeanGroff 30 | * [Catching exceptions using Higher Order Components in React 16](https://codeburst.io/catching-exceptions-using-higher-order-components-in-react-16-b8a401853a10) Giorgi Bagdavadze @notgiorgi 31 | 32 | *DOM Attributes* 33 | * [DOM Attributes in React 16](https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html) Dan Abramov @dan_abramov 34 | 35 | *Portals* 36 | 37 | * [Using a React 16 Portal to do something cool](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202) David Gilbertson @D__Gilbertson 38 | 39 | 40 | * DEMO rendering Portals using ReactDOM.createPortal -> https://codesandbox.io/s/3r7zxqzx55 41 | 42 | 43 | 44 | 45 | *Async Mode* 46 | 47 | 48 | 49 | 50 | 51 | **Lin Clark - A Cartoon Intro to Fiber - React Conf 2017** 52 | 53 | 54 | Additional Fiber info here https://reactfaq.site/react-fiber 55 | 56 | 57 | *Fragments* 58 | 59 | **How does returning arrays from render work?** 60 | 61 | * [Returning multiple elements the right way in React 16 - Tutorial](https://www.youtube.com/watch?v=cvS5o86wRfE) 62 | 63 | ```javascript 64 | const names = ["Dan", "Kent", "Ryan"]; 65 | 66 | /* No wrapping element! */ 67 | class List extends React.Component { 68 | render() { 69 | return names.map(name =>
  • {name}
    • ); 70 | } 71 | } 72 | ``` 73 | 74 | see: https://codesandbox.io/s/y0rroo6olz 75 | 76 | **Note:** You can also return a String https://codesandbox.io/s/oxjo7woo4y 77 | 78 |
    79 | 80 | 81 | **Roadmap for React (Fiber and Beyond)** 82 | 83 | 84 | >Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render. 85 | -------------------------------------------------------------------------------- /src/pages/redux-mobx.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Redux and MobX 3 | path: "/redux-mobx/" 4 | --- 5 | 6 | **What's (Redux/MobX)?** 7 | 8 | * [Confused! Redux or MobX?](https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx) 9 | 10 | **Do I need to use (Redux/MobX)?** 11 | 12 | * [You don’t need Redux if your data never changes. The whole point of it is managing changes.](https://twitter.com/dan_abramov/status/737036433215610880) Dan Abramov @dan_abramov 13 | * [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.kgnqdp8p6) Dan Abramov @dan_abramov 14 | * [Redux or MobX: An attempt to dissolve the Confusion](http://www.robinwieruch.de/redux-mobx-confusion/) Robin Wieruch @rwieruch 15 | 16 | **How to scale React-Redux apps?** 17 | 18 | * [About folder structure, styling, data fetching, etc.](https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/) Max Stoiber @mxstbr 19 | * [How to choose between Redux's store and React's state?](https://github.com/reactjs/redux/issues/1287) -------------------------------------------------------------------------------- /src/pages/server-side-rendering.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Server-Side Rendering 3 | path: "/server-side-rendering/" 4 | --- 5 | 6 | **Do I need to Server-Side Render?** 7 | * [Should I use React Server-Side Rendering?](http://andrewhfarmer.com/server-side-render/) 8 | * [React on the Server for Beginners](https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app) Luciano Mammino @loige 9 | 10 | **What tools/ techniques are available?** 11 | * [Introducing Rapscallion](http://formidable.com/blog/2017/introducing-rapscallion) Dale Bustad @divmain 12 | * [An Almost Static Stack](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319#.5rxxv08jm) 13 | * [Universal JavaScript Apps with React Router 4](https://ebaytech.berlin/universal-web-apps-with-react-router-4-15002bb30ccb#.2nipnade6) 14 | 15 | **What If You Don’t Have Node.JS backend?** 16 | * Proxy Rendering might work see [React.js Efficient Server Rending](https://medium.com/@tigranbs/react-js-efficient-server-rending-5dcb2a0ae14a#.v6cmaof4e) Tigran Bayburtsyan @tigranbs 17 | 18 | 19 | **Are there frameworks that will help me with Server-Side rendering?** 20 | 21 | Yes see After.js it's a Next.js-like framework for server-rendered React apps built with React Router 4 22 | -------------------------------------------------------------------------------- /src/pages/style-guides.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Style Guides 3 | path: "/style-guides/" 4 | --- 5 | 6 | **Where can I find some good React style guides?** 7 | 8 | * [Eventbrite React & JSX Coding Style Guide](https://github.com/eventbrite/javascript/tree/master/react) 9 | * [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react) -------------------------------------------------------------------------------- /src/pages/svg-react.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SVG & React 3 | path: "/svg-react/" 4 | --- 5 | 6 | **How do I work with SVG's in React?** 7 | 8 | * [Icons as React Components](https://medium.com/@david.gilbertson/icons-as-react-components-de3e33cb8792#.lmbz3v9ic) 9 | * [Creating an SVG Icon System with React](https://css-tricks.com/creating-svg-icon-system-react) @sarah_edo -------------------------------------------------------------------------------- /src/pages/talks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Talks 3 | path: "/talks/" 4 | --- 5 | 6 | * [React to the Future - Slide Deck](http://elijahmanor.com/talks/react-to-the-future/dist) Elijah Manor @elijahmanor 7 | * [React Things - PDF Slides](https://react.rocks/blog/images/React_Intro_sept_2016.pdf) Jeff Winkler @winkler1 8 | -------------------------------------------------------------------------------- /src/pages/testing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing 3 | path: "/testing/" 4 | --- 5 | 6 | 7 | * [Testing React Applications with Max Stoiber](https://www.youtube.com/watch?v=59Ndb3YkLKA) Max Stoiber @mxstbr 8 | * [Testing React Applications w/Jack Franklin](https://www.youtube.com/watch?v=eWN8F_WOBAQ) Jack Franklin 9 | * [People seem to laugh at this but I think it’s actually pretty reasonable](https://twitter.com/dan_abramov/status/762257231471579136) Dan Abramov @dan_abramov 10 | * [Testing React Components Best Practices](https://medium.com/selleo/testing-react-components-best-practices-2f77ac302d12#.nfupyyugz) Tomasz Bak @tomaszbak 11 | * [Worthwhile Testing: What to test in a React app (and why)](https://daveceddia.com/what-to-test-in-react-app) Dave Ceddia @dceddia 12 | * [Getting Started with TDD in React](https://daveceddia.com/getting-started-with-tdd-in-react) Dave Ceddia @dceddia 13 | * [Set up a testing environment with React + enzyme + Mocha](http://blog.ricardofilipe.com/post/react-enzyme-tdd-tutorial) – Ricardo Magalhães 14 | * [The Right Way to Test React Components](https://medium.freecodecamp.com/the-right-way-to-test-react-components-548a4736ab22#.zb6v0mtfk) Stephen Scott @suchipi 15 | 16 | 17 | 18 | 19 | ## Debugging 20 | * [Live edit and debug your React apps directly from VS Code — without leaving the editor](https://medium.com/front-end-hacking/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f#.a2j1t98ev) 21 | * [Debugging React Like a Champ with VSCode](https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037) James Jeffery @JamesJefferyUK 22 | -------------------------------------------------------------------------------- /src/pages/the-virtual-dom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: The Virtual DOM 3 | path: "/the-virtual-dom/" 4 | --- 5 | 6 | >The Virtual DOM provides a lightweight implementation of the DOM and events system. Instead of dealing with the browser, you manipulate an in-memory version of the DOM. 7 | 8 | **What is the Virtual DOM?** 9 | * 💯 [The Inner Workings Of Virtual DOM](https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf#.q3jxayda5) @rajaraodv 10 | * [React's diff algorithm](http://calendar.perfplanet.com/2013/diff/) Christopher Chedeau @vjeux 11 | * [The one thing that no one properly explains about React — Why Virtual DOM](https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq) Sai Kishore Komanduri @saiki 12 | * [Pete Hunt: The Secrets of React's Virtual DOM (FutureJS 2014)](https://www.youtube.com/watch?v=-DX3vJiqxm4) 13 | 14 | **Is the Virtual DOM all about speed?** 15 | * *No* See : https://twitter.com/dan_abramov/status/790326092582252544 & https://twitter.com/acdlite/status/779693791607336960 16 | 17 | > I wonder if we can reclaim the VDOM term to mean "Value DOM", as in Value Type, instead of "Virtual DOM"...? More accurate. **@sebmarkbage** 18 |
    19 | 20 | > It doesn't improve perf over hand written DOM code but it's hard to write on scale. React scales well. **@dan_abramov** 21 |
    22 | 23 | > React ultimately has to call browser APIs at some point, it can't possibly be faster than writing the same exact calls by hand **@dan_abramov** 24 |
    25 | 26 | >React will not do anything that you cannot. By definition everything it does can be reproduced (and some people have with other libraries/frameworks that follow similar conventions). The point is not that React does something that you can't, but rather that by introducing React to your application you are relieved of having to worry about manually handling your DOM, manually determining how to update it efficiently, minimizing traversals, etc. - [Sean Grogg](https://www.quora.com/Is-ReactJS-faster-than-direct-DOM-manipulation-with-JavaScript-or-jQuery) 27 | 28 | *Key Takeaway:* 29 | 30 | > React keeps your product reasonably fast without you having to think about it all the time, or to jump through the hoops **@dan_abramov** -------------------------------------------------------------------------------- /src/pages/third-party-libraries.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Third Party Libraries 3 | path: "/third-party-libraries/" 4 | --- 5 | 6 | **How do I use third party libraries?** 7 | 8 | * [Integration with Third Party Libraries](https://www.youtube.com/watch?v=GWVjMHDKSfU&feature=youtu.be&a) Rally Coding -------------------------------------------------------------------------------- /src/pages/tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tools 3 | path: "/tools/" 4 | --- 5 | 6 | **What Developer Tools are available for React?** 7 | 8 | * [StoryBook](https://getstorybook.io/) (A visual way to develop your UI components. Show them in different states and develop them interactively). `See` [Example StoryBook](http://airbnb.io/react-dates/) + [React Storybooks meets Create React App](https://voice.kadira.io/react-storybooks-meets-create-react-app-ac8a3f32cc79#.fcah86vcb) 9 | * [React Developer Tools](https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html) 10 | * [why-did-you-update](https://github.com/garbles/why-did-you-update) - Puts your console on blast when React is making unnecessary updates. 11 | * [Performance Tools](https://facebook.github.io/react/docs/perf.html) 12 | -------------------------------------------------------------------------------- /src/pages/training.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Training 3 | path: "/training/" 4 | --- 5 | 6 | **Where can I get React training?** 7 |
    8 | 9 | *Micheal Jackson* @mjackson & *Ryan Florence* @ryanflorence 10 | 11 | * https://reactjs-training.com 12 | 13 |
    14 | *Brian Holt* @holtbt 15 | 16 | * https://btholt.github.io/es6-react-pres 17 | * https://btholt.github.io/complete-intro-to-react 18 | * https://github.com/btholt/react-redux-workshop 19 | -------------------------------------------------------------------------------- /src/pages/videos-courses.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Videos & Courses 3 | path: "/videos-courses/" 4 | --- 5 | 6 | **What are some good video resources / courses to learn React?** 7 | * FREE ⭐[The beginners guide to React](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) @kentcdodds 8 | * [Advanced Component Patterns (egghead.io)](https://egghead.io/courses/advanced-react-component-patterns) @kentcdodds 9 | * [Advanced Component Patterns (Fronted Masters)](https://frontendmasters.com/courses/advanced-react-patterns/) @kentcdodds 10 | * [React For Beginners](https://reactforbeginners.com) @wesbos (Updated for React 16.3, ES6, Async + Await, React Router 4 ) 11 | * FREE ⭐(+ paid for others) [Start Learning React](https://egghead.io/courses/react-fundamentals) @egghead 12 | * [React: The Big Picture](https://www.pluralsight.com/courses/react-big-picture) @housecor 13 | * [Building Apps with React and Redux in ES6](https://www.pluralsight.com/courses/react-redux-react-router-es6) @housecor 14 | * [Creating Reusable React Components](https://www.pluralsight.com/courses/react-creating-reusable-components) @housecor 15 | * [React Intro](https://frontendmasters.com/courses/react-intro) Frontend Masters (they have a bunch) 16 | * [Learn Redux](https://LearnRedux.com) @wesbos 17 | * [Learn React](https://learnreact.com) FREE (for now) 18 | * [PLURALSIGHT - react path](https://www.pluralsight.com/paths/react) 19 | * [Udemy React - Redux](https://www.udemy.com/react-redux) 20 | 21 | ## Notable 22 |
    23 |

    ⚡ Checkout https://www.awesomereact.com for a great React collection of videos

    24 |
    25 | 26 | 27 | -------------------------------------------------------------------------------- /src/pages/why-use-react.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Why use React? 3 | path: "/why-use-react/" 4 | --- 5 | 6 | > 7 | * Composable components 8 | * Easy to use with existing projects 9 | * Declarative 10 | * Functional / Immutable friendly 11 | 12 | 13 | **Is it fast?** 14 | * [Is React.js fast? Faster than {framework}? … or are there more relevant questions to be asking?](https://medium.com/react-weekly/is-react-js-fast-faster-than-framework-or-are-there-more-relevant-questions-to-be-asking-bcf40211f89b#.ll2aubhbi) Jeff Barczewski @jeffbski 15 | 16 | **What so good about React?** 17 | 18 | * [7 Strengths of React Every Programmer Should Know About](https://vacuumlabs.com/blog/7-strengths-of-react-every-programmer-should-know-about) Samuel Hapák @samuha 19 | * [Design Principles](https://facebook.github.io/react/contributing/design-principles.html) -------------------------------------------------------------------------------- /src/svg/Icon.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const ReactIcon = () => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | module.exports = { ReactIcon } -------------------------------------------------------------------------------- /src/templates/blog-post.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Helmet from "react-helmet"; 3 | import "../css/markdown-styles.css"; 4 | import Link from "gatsby-link"; 5 | import { rhythm, scale } from "../utils/typography"; 6 | 7 | class BlogPostTemplate extends React.Component { 8 | render() { 9 | const post = this.props.data.markdownRemark; 10 | let siteTitle = this.props.data.site.siteMetadata.title; 11 | let title = post.frontmatter.title; 12 | if (typeof siteTitle !== "undefined") { 13 | title += ` | ${siteTitle}`; 14 | } 15 | 16 | return ( 17 |
    18 | 19 |

    {post.frontmatter.title}

    20 |
    21 |
    22 | ); 23 | } 24 | } 25 | 26 | export default BlogPostTemplate; 27 | 28 | export const pageQuery = graphql` 29 | query BlogPostByPath($path: String!) { 30 | site { 31 | siteMetadata { 32 | title 33 | author 34 | } 35 | } 36 | markdownRemark(frontmatter: { path: { eq: $path } }) { 37 | id 38 | html 39 | frontmatter { 40 | title 41 | } 42 | } 43 | } 44 | `; 45 | -------------------------------------------------------------------------------- /src/utils/typography.js: -------------------------------------------------------------------------------- 1 | import Typography from 'typography' 2 | import { GoogleFont } from 'react-typography' 3 | import CodePlugin from 'typography-plugin-code' 4 | 5 | const options = { 6 | googleFonts: [ 7 | { 8 | name: 'Roboto', 9 | styles: [ 10 | '700', 11 | ], 12 | }, 13 | { 14 | name: 'Source Sans Pro', 15 | styles: [ 16 | '400', 17 | '400i', 18 | '700', 19 | ], 20 | }, 21 | ], 22 | headerFontFamily: ['Roboto', 'sans-serif'], 23 | bodyFontFamily: ['Source Sans Pro', 'sans-serif'], 24 | baseFontSize: '18px', 25 | baseLineHeight: 1.65, 26 | scaleRatio: 2.25, 27 | plugins: [ 28 | new CodePlugin(), 29 | ], 30 | } 31 | 32 | const typography = new Typography(options) 33 | 34 | 35 | // Hot reload typography in development. 36 | if (process.env.NODE_ENV !== 'production') { 37 | typography.injectStyles() 38 | } 39 | 40 | export default typography 41 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/timarney/react-faq/fd9c9731738046d6d45a391cf8323627609be4da/static/favicon.ico -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | --------------------------------------------------------------------------------