├── src ├── favicon.png ├── images │ ├── top.png │ ├── props.jpg │ ├── react.png │ ├── state.jpg │ ├── diagrama.png │ └── gatsby-icon.png ├── components │ ├── Main.js │ ├── Footer.js │ ├── Showhide.js │ ├── Image.js │ ├── ElasticScroll.js │ ├── Layout.js │ ├── Header.js │ ├── SEO.js │ ├── NavButtons.js │ ├── Framework.js │ └── Nav.js ├── css │ ├── index.js │ ├── prism.js │ └── base.js ├── monkey-patch.js ├── utils.js ├── pages │ ├── 404.js │ ├── index.mdx │ ├── props-y-state.mdx │ ├── intro.mdx │ ├── paso-03.mdx │ ├── paso-02.mdx │ └── paso-01.mdx └── prism-extensions.js ├── .prettierrc ├── gatsby-node.js ├── gatsby-ssr.js ├── LICENSE ├── README.md ├── .gitignore ├── gatsby-browser.js ├── gatsby-config.js ├── traduccion ├── Componentes.md └── JSX.md ├── package.json └── templates ├── template.js └── template.css /src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/favicon.png -------------------------------------------------------------------------------- /src/images/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/images/top.png -------------------------------------------------------------------------------- /src/images/props.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/images/props.jpg -------------------------------------------------------------------------------- /src/images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/images/react.png -------------------------------------------------------------------------------- /src/images/state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/images/state.jpg -------------------------------------------------------------------------------- /src/images/diagrama.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/images/diagrama.png -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/agustinmulet/reactworkshop/HEAD/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "proseWrap": "always" 6 | } 7 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/node-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { MEDIA } from './Framework' 3 | 4 | const Main = styled.main` 5 | ${MEDIA.lg} { 6 | margin-left: 250px; 7 | } 8 | ` 9 | 10 | export default Main 11 | -------------------------------------------------------------------------------- /src/css/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import BaseCSS from '../css/base' 3 | import PrismCSS from '../css/prism' 4 | 5 | function CSS() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default CSS 15 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Footer = styled.footer` 4 | text-align: center; 5 | padding: 25px 0; 6 | border-top: 1px solid rgba(0, 16, 64, 0.08); 7 | margin-top: 50px; 8 | color: #9dacb6; 9 | font-size: 85%; 10 | background: white; 11 | ` 12 | 13 | export default Footer 14 | -------------------------------------------------------------------------------- /src/monkey-patch.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | const prismExtensions = fs.readFileSync('src/prism-extensions.js', 'utf8') 4 | const prism = fs.readFileSync('node_modules/prismjs/prism.js') 5 | const hasBeenMonkeyPatched = prism.includes('__gatsby-monkey-patched__') 6 | 7 | if (!hasBeenMonkeyPatched) { 8 | fs.appendFileSync('node_modules/prismjs/prism.js', prismExtensions) 9 | } 10 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export function toKebabCase(str) { 2 | return ( 3 | str && 4 | str 5 | .match( 6 | /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g, 7 | ) 8 | .map((x) => x.toLowerCase()) 9 | .join('-') 10 | ) 11 | } 12 | 13 | export function sortPagesByIndex(edges) { 14 | return [...edges].sort( 15 | (a, b) => a.node.frontmatter.index - b.node.frontmatter.index, 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Showhide.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class Showhide extends React.Component { 4 | state = { 5 | show: false, 6 | } 7 | 8 | handleClick = () => { 9 | const show = this.state.show 10 | this.setState({ show: !show }) 11 | } 12 | 13 | render() { 14 | return ( 15 | <> 16 | 17 | {this.state.show && this.props.children} 18 | 19 | ) 20 | } 21 | } 22 | 23 | export default Showhide 24 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/Layout' 3 | import SEO from '../components/SEO' 4 | 5 | function NotFoundPage({ pageContext }) { 6 | const context = { ...pageContext, frontmatter: { title: '404: Not Found' } } 7 | return ( 8 | 9 | 10 |

11 | La página que estás buscando no existe{' '} 12 | 13 | 😅 14 | 15 |

16 | 17 | ) 18 | } 19 | 20 | export default NotFoundPage 21 | -------------------------------------------------------------------------------- /src/components/Image.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StaticImage } from "gatsby-plugin-image" 3 | 4 | const Diagrama = () => { 5 | return 10 | } 11 | 12 | const Props = () => { 13 | return 18 | } 19 | 20 | const State = () => { 21 | return 26 | } 27 | 28 | const Top = () => { 29 | return 34 | } 35 | 36 | export { 37 | Diagrama, 38 | Props, 39 | State, 40 | Top 41 | } 42 | -------------------------------------------------------------------------------- /src/components/ElasticScroll.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Children, cloneElement, createRef } from 'react' 2 | import elasticScroll from 'elastic-scroll-polyfill' 3 | 4 | class ElasticScroll extends Component { 5 | scroller = createRef() 6 | 7 | componentDidMount() { 8 | this.instance = elasticScroll({ 9 | targets: this.scroller, 10 | ...this.props, 11 | }) 12 | } 13 | 14 | componentWillUnmount() { 15 | this.instance.disable() 16 | this.instance = null 17 | } 18 | 19 | render() { 20 | return Children.map(this.props.children, (child) => 21 | cloneElement(child, { 22 | children:
{child.props.children}
, 23 | ref: (node) => { 24 | this.scroller = node 25 | const { ref } = child 26 | if (ref) { 27 | if (typeof ref === 'function') { 28 | ref(node) 29 | } else if (ref.hasOwnProperty('current')) { 30 | ref.current = node 31 | } 32 | } 33 | }, 34 | }), 35 | ) 36 | } 37 | } 38 | 39 | export default ElasticScroll 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 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 | # Workshop de React 2 | 3 | En este workshop, vamos a aprender y entender las bases de React haciendo una app que nos muestre el clima en alguna ciudad. 😀 4 | 5 | [**Vamos al Workshop nomás ⇨**](https://agustinmulet.github.io/reactworkshop/) 6 | 7 | --- 8 | 9 | ## Mejoras a hacer 10 | 11 | - [x] Diseño responsive 12 | - [ ] Crear sandbox para explicar de forma más gráfica Props y State 13 | - [ ] Controlled y Uncontrolled Inputs 14 | - [ ] Explicar Forms 15 | - [ ] Hooks 16 | 17 | --- 18 | 19 | ## Créditos 20 | 21 | Fuentes usadas para hacer este workshop: 22 | 23 | - [Tutorial de React de Flavio Copes](https://flaviocopes.com/react/) 24 | - [Documentación de React](https://reactjs.org/docs/getting-started.html) 25 | - [MDN web docs](https://developer.mozilla.org/es/docs/Web) 26 | - [Stateful vs. Stateless Functional Components in React (envatotuts+)](https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541) 27 | - [Create-React-App (Repo)](https://github.com/facebook/create-react-app) 28 | - [Documentación de Tippy.js usada como plantilla de Gatsby+MDX](https://github.com/atomiks/tippyjs/tree/master/website) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Container } from './Framework' 3 | import Nav from './Nav' 4 | import NavButtons from './NavButtons' 5 | import Header from './Header' 6 | import Main from './Main' 7 | import Footer from './Footer' 8 | import SEO from './SEO' 9 | import CSS from '../css' 10 | 11 | class Layout extends Component { 12 | state = { 13 | isNavOpen: false, 14 | } 15 | 16 | openNav = () => { 17 | this.setState({ isNavOpen: true }) 18 | } 19 | 20 | closeNav = () => { 21 | this.setState({ isNavOpen: false }) 22 | } 23 | 24 | render() { 25 | const { isNavOpen } = this.state 26 | const { children, pageContext } = this.props 27 | return ( 28 | <> 29 | 30 | 31 |