diff --git a/.gitignore b/.gitignore index 35ceed5..8fc70fd 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,5 @@ node_modules # others /.vscode package-lock.json +storybook-static +build \ No newline at end of file diff --git a/.storybook/addons.js b/.storybook/addons.js deleted file mode 100644 index 6aed412..0000000 --- a/.storybook/addons.js +++ /dev/null @@ -1,2 +0,0 @@ -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; diff --git a/.storybook/config.js b/.storybook/config.js deleted file mode 100644 index b1ba23f..0000000 --- a/.storybook/config.js +++ /dev/null @@ -1,21 +0,0 @@ -import { configure, addParameters } from '@storybook/react' -// import '../src/index.css' - -// import { addParameters } from '@storybook/react' -import { themes } from '@storybook/theming' -import yourTheme from './yourTheme' - -// Option defaults. -addParameters({ - options: { - theme: yourTheme - } -}) -// automatically import all files ending in *.stories.js -const req = require.context('../src', true, /\.stories\.js$/) - -function loadStories() { - req.keys().forEach(filename => req(filename)) -} - -configure(loadStories, module) diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..41145f8 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,9 @@ +module.exports = { + stories: ['../src/**/*.stories.(js|mdx)'], + addons: [ + '@storybook/preset-create-react-app', + '@storybook/addon-actions', + '@storybook/addon-links', + '@storybook/addon-docs' + ], +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..7dcc34e --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,80 @@ +import { addParameters } from '@storybook/react'; + +// Credits to John Albin Wilkins +// Taken from https://gist.github.com/JohnAlbin/83ef5282d07c6aa447ff39719429843e +const storySort = options => (a, b) => { + + // If the two stories have the same story kind, then use the default + // ordering, which is the order they are defined in the story file. + if (a[1].kind === b[1].kind) { + return 0; + } + + const storyKindA = a[1].kind.split('/'); + const storyKindB = b[1].kind.split('/'); + let depth = 0; + let nameA, nameB, indexA, indexB, index; + let ordering = options.order || []; + + while (true) { + nameA = storyKindA[depth] ? storyKindA[depth] : ''; + nameB = storyKindB[depth] ? storyKindB[depth] : ''; + + if (nameA === nameB) { + // If a nested array is provided for a name, use it for ordering. + index = ordering.indexOf(nameA); + if (index !== -1 && Array.isArray(ordering[index + 1])) { + ordering = ordering[index + 1]; + } + + // We'll need to look at the next part of the name. + depth++; + continue; + } else { + // Look for the names in the given `ordering` array. + indexA = ordering.indexOf(nameA); + indexB = ordering.indexOf(nameB); + + // If at least one of the names is found, sort by the `ordering` array. + if (indexA !== -1 || indexB !== -1) { + // If one of the names is not found in `ordering`, list it last. + if (indexA === -1) { + indexA = ordering.length; + } + if (indexB === -1) { + indexB = ordering.length; + } + + return indexA - indexB; + } + } + + // Otherwise, use alphabetical order. + return nameA.localeCompare(nameB); + } +}; + +/** + * Sorts each depth level according to the provided array order. + **/ +addParameters({ + options: { + showRoots: true, + storySort: storySort({ + order: [ + 'Workshop', + ['Welcome'], + 'Definition', + ['About Audience', + ['Required Tools','Quantity Of People', 'Required Technical Skills']], + 'Contents', + [ + 'React Introduction', + ['What is ReactJS', 'Functional and Class Components','State and Props', 'Conditional rendering and events handling'], + 'In Depth', + [] + ], + ] + }) + } +}); diff --git a/.storybook/yourTheme.js b/.storybook/yourTheme.js deleted file mode 100644 index 04b46b4..0000000 --- a/.storybook/yourTheme.js +++ /dev/null @@ -1,37 +0,0 @@ -import { create } from '@storybook/theming' - -export default create({ - base: 'dark', - - colorPrimary: 'hotpink', - colorSecondary: '#0052cc', - - // UI - appBg: 'white', - appContentBg: '#f2f2f2', - appBorderColor: '#003d99', - appBorderRadius: 10, - - // Typography - fontBase: '"Open Sans", sans-serif', - fontCode: 'monospace', - - // Text colors - textColor: 'black', - textInverseColor: 'rgba(255,255,255,0.9)', - - // Toolbar default and active colors - barTextColor: 'white', - barSelectedColor: 'white', - barBg: '#0047b3', - - // Form colors - inputBg: 'white', - inputBorder: 'black', - inputTextColor: 'black', - inputBorderRadius: 10, - - brandTitle: 'My custom storybook', - brandUrl: 'https://example.com', - brandImage: 'https://placehold.it/350x150' -}) diff --git a/package.json b/package.json index 3378b35..9673f93 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,49 @@ { - "name": "react", - "version": "1.0.0", - "description": "", - "main": "index.js", + "name": "reactjs-workshop", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^7.1.2", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-scripts": "3.3.0", + "styled-components": "^4.4.1" + }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "storybook": "start-storybook -p 9009 -s public", + "build-storybook": "build-storybook -s public" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] }, - "author": "", - "license": "ISC", - "dependencies": {}, "devDependencies": { - "@babel/core": "^7.5.5", - "@storybook/addon-actions": "^5.1.11", - "@storybook/addon-links": "^5.1.11", - "@storybook/addons": "^5.1.11", - "@storybook/react": "^5.1.11", - "babel-loader": "^8.0.6" + "@storybook/addon-actions": "^5.3.3", + "@storybook/addon-docs": "^5.3.3", + "@storybook/addon-links": "^5.3.3", + "@storybook/addon-storysource": "^5.3.3", + "@storybook/addons": "^5.3.3", + "@storybook/preset-create-react-app": "^1.5.0", + "@storybook/react": "^5.3.3", + "babel-loader": "^8.0.6", + "react-is": "^16.12.0", + "react-live": "^2.2.2" } } diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..01b0f9a --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..74b5e05 --- /dev/null +++ b/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..ce9cbd2 --- /dev/null +++ b/src/App.js @@ -0,0 +1,26 @@ +import React from 'react'; +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..4db7ebc --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/components/audience/audience.stories.js b/src/components/audience/audience.stories.js deleted file mode 100644 index a5d4760..0000000 --- a/src/components/audience/audience.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import QuantityOfPeople from './quantityOfPeople' -import RequiredTechnicalSkills from './requiredTechnicalSkills' - -storiesOf('DEFINITION|About Audience', module) - .add('Quantity of People', () => ) - .add('Required Technical Skills', () => ) diff --git a/src/components/audience/quantityOfPeople.js b/src/components/audience/quantityOfPeople.js deleted file mode 100644 index 1a541ab..0000000 --- a/src/components/audience/quantityOfPeople.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -function QuantityOfPeople() { - return ( -
-

Quantity Of People

-

- The workshop is designed to work in groups of 15-20 people per session. -

-
- ) -} - -export default QuantityOfPeople diff --git a/src/components/audience/requiredTechnicalSkills.js b/src/components/audience/requiredTechnicalSkills.js deleted file mode 100644 index 17481d1..0000000 --- a/src/components/audience/requiredTechnicalSkills.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' - -function RequiredTechnicalSkills() { - return ( -
-

About Required Technical Skills

-

- To guarantee the correct progress, is necessary to have knowledge is - some technical skills. Please check the next list of the required - technology skills. -

-

Required Technical Skills

-
    -
  • Solid JavaScript
    • -
  • ES6 basics
    • -
  • HTML 5
    • -
  • CSS3
    • -
-
- ) -} - -export default RequiredTechnicalSkills diff --git a/src/components/audience/requiredTools.js b/src/components/audience/requiredTools.js deleted file mode 100644 index 8922516..0000000 --- a/src/components/audience/requiredTools.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -function RequiredTools() { - return ( -
-

About Required Tools

-

- Here is a list of tools that is necessary to have installed in order to - develop the course. (Is the responsibility of the participants to have - installed all these tools, please feel free to contact any Workshop Team - in slack, if you have doubts with the installation). -

-

Required Tools

-
    -
  • Visual Studio Code
    • -
  • Npm
    • -
-
- ) -} - -export default RequiredTools diff --git a/src/components/content/InDepth/conditionalRendering.js b/src/components/content/InDepth/conditionalRendering.js deleted file mode 100644 index 415612f..0000000 --- a/src/components/content/InDepth/conditionalRendering.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function ConditionalRendering() { - return ( -
-

Conditional Rendering

-

In Depth

-
- ) -} - -export default ConditionalRendering diff --git a/src/components/content/InDepth/handleEvents.js b/src/components/content/InDepth/handleEvents.js deleted file mode 100644 index f3c74fb..0000000 --- a/src/components/content/InDepth/handleEvents.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function HandleEvents() { - return ( -
-

Handle Events

-

In Depth

-
- ) -} - -export default HandleEvents diff --git a/src/components/content/InDepth/inDepth.stories.js b/src/components/content/InDepth/inDepth.stories.js deleted file mode 100644 index 0fb2a5f..0000000 --- a/src/components/content/InDepth/inDepth.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import RenderingElements from './renderingElements' -import HandleEvents from './handleEvents' -import ConditionalRendering from './conditionalRendering' -import ListsAndKeys from './listsAndKeys' - -storiesOf('CONTENTS|In Depth', module) - .add('Rendering Elements', () => ) - .add('Handle Events', () => ) - .add('Conditional Rendering', () => ) - .add('Lists And Keys', () => ) diff --git a/src/components/content/InDepth/listsAndKeys.js b/src/components/content/InDepth/listsAndKeys.js deleted file mode 100644 index 5bb24b5..0000000 --- a/src/components/content/InDepth/listsAndKeys.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function ListsAndKeys() { - return ( -
-

Lists and Keys

-

In Depth

-
- ) -} - -export default ListsAndKeys diff --git a/src/components/content/InDepth/renderingElements.js b/src/components/content/InDepth/renderingElements.js deleted file mode 100644 index 0db6acd..0000000 --- a/src/components/content/InDepth/renderingElements.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function RenderingElements() { - return ( -
-

Rendering Elements

-

In Depth

-
- ) -} - -export default RenderingElements diff --git a/src/components/content/hooks/customHooks.js b/src/components/content/hooks/customHooks.js deleted file mode 100644 index ea7b278..0000000 --- a/src/components/content/hooks/customHooks.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function CustomHooks() { - return ( -
-

Custom Hooks

-

Hooks

-
- ) -} - -export default CustomHooks diff --git a/src/components/content/hooks/effectHooks.js b/src/components/content/hooks/effectHooks.js deleted file mode 100644 index 567a85b..0000000 --- a/src/components/content/hooks/effectHooks.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function EffectHooks() { - return ( -
-

Effect Hook

-

Hooks

-
- ) -} - -export default EffectHooks diff --git a/src/components/content/hooks/hooks.stories.js b/src/components/content/hooks/hooks.stories.js deleted file mode 100644 index 5a9ac25..0000000 --- a/src/components/content/hooks/hooks.stories.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import StateHooks from './stateHooks' -import EffectHooks from './effectHooks' -import RulesOfHooks from './rulesOfHooks' -import CustomHooks from './customHooks' - -storiesOf('CONTENTS|Hooks', module) - .add('State hooks', () => ) - .add('Effect hooks', () => ) - .add('Rule of hooks', () => ) - .add('Custom hooks', () => ) diff --git a/src/components/content/hooks/rulesOfHooks.js b/src/components/content/hooks/rulesOfHooks.js deleted file mode 100644 index 7ea6038..0000000 --- a/src/components/content/hooks/rulesOfHooks.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function RulesOfHooks() { - return ( -
-

Rule Of Hook

-

Hooks

-
- ) -} - -export default RulesOfHooks diff --git a/src/components/content/hooks/stateHooks.js b/src/components/content/hooks/stateHooks.js deleted file mode 100644 index 030b600..0000000 --- a/src/components/content/hooks/stateHooks.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function StateHooks() { - return ( -
-

State Hook

-

Hooks

-
- ) -} - -export default StateHooks diff --git a/src/components/content/introductionES6/arrowFunctions.js b/src/components/content/introductionES6/arrowFunctions.js deleted file mode 100644 index 2ebfac9..0000000 --- a/src/components/content/introductionES6/arrowFunctions.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function ArrowFunctions() { - return ( -
-

Arrow Functions

-

es6

-
- ) -} - -export default ArrowFunctions diff --git a/src/components/content/introductionES6/destructuring.js b/src/components/content/introductionES6/destructuring.js deleted file mode 100644 index 4deaf44..0000000 --- a/src/components/content/introductionES6/destructuring.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function Destructuring() { - return ( -
-

Destructuring

-

es6

-
- ) -} - -export default Destructuring diff --git a/src/components/content/introductionES6/introductionES6.stories.js b/src/components/content/introductionES6/introductionES6.stories.js deleted file mode 100644 index 741b8ac..0000000 --- a/src/components/content/introductionES6/introductionES6.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import LetConst from './letConst' -import ArrowFunctions from './arrowFunctions' -import TemplateString from './templateString' -import Destructuring from './destructuring' -import SpreadRestOperator from './spreadRestOperator' -import PromisesAndAsyncAwait from './promisesAndAsyncAwait' - -storiesOf('CONTENTS|Introduction to ES6', module) - .add('Let / Const', () => ) - .add('Arrow Functions', () => ) - .add('Template String', () => ) - .add('Destructuring', () => ) - .add('Spread / Rest Operator', () => ) - .add('Promises And Async/Await', () => ) diff --git a/src/components/content/introductionES6/letConst.js b/src/components/content/introductionES6/letConst.js deleted file mode 100644 index aaee272..0000000 --- a/src/components/content/introductionES6/letConst.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function letConst() { - return ( -
-

Let / Const

-

es6 - hello world

-
- ) -} - -export default letConst diff --git a/src/components/content/introductionES6/promisesAndAsyncAwait.js b/src/components/content/introductionES6/promisesAndAsyncAwait.js deleted file mode 100644 index 1d3ef5a..0000000 --- a/src/components/content/introductionES6/promisesAndAsyncAwait.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function PromisesAndAsyncAwait() { - return ( -
-

Promises And Async/Await

-

es6

-
- ) -} - -export default PromisesAndAsyncAwait diff --git a/src/components/content/introductionES6/spreadRestOperator.js b/src/components/content/introductionES6/spreadRestOperator.js deleted file mode 100644 index acd8108..0000000 --- a/src/components/content/introductionES6/spreadRestOperator.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function SpreadRestOperator() { - return ( -
-

Spread | Rest Operator

-

es6

-
- ) -} - -export default SpreadRestOperator diff --git a/src/components/content/introductionES6/templateString.js b/src/components/content/introductionES6/templateString.js deleted file mode 100644 index 2a79857..0000000 --- a/src/components/content/introductionES6/templateString.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function TemplateString() { - return ( -
-

Template String

-

es6

-
- ) -} - -export default TemplateString diff --git a/src/components/content/reactIntroduction/classComponent.js b/src/components/content/reactIntroduction/classComponent.js deleted file mode 100644 index 59d887a..0000000 --- a/src/components/content/reactIntroduction/classComponent.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function ClassComponent() { - return ( -
-

Class Component

-

React Introduction

-
- ) -} - -export default ClassComponent diff --git a/src/components/content/reactIntroduction/functionalComponent.js b/src/components/content/reactIntroduction/functionalComponent.js deleted file mode 100644 index 292b80f..0000000 --- a/src/components/content/reactIntroduction/functionalComponent.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function FunctionalComponents() { - return ( -
-

Functional Component

-

React Introduction

-
- ) -} - -export default FunctionalComponents diff --git a/src/components/content/reactIntroduction/jsx.js b/src/components/content/reactIntroduction/jsx.js deleted file mode 100644 index d434ed6..0000000 --- a/src/components/content/reactIntroduction/jsx.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function Jsx() { - return ( -
-

Jsx

-

React Introduction

-
- ) -} - -export default Jsx diff --git a/src/components/content/reactIntroduction/reactIntroduction.stories.js b/src/components/content/reactIntroduction/reactIntroduction.stories.js deleted file mode 100644 index c66cf98..0000000 --- a/src/components/content/reactIntroduction/reactIntroduction.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import WhatIs from './whatIs' -import Jsx from './jsx' -import VirtualDom from './virtualDOM' -import StateAndProps from './stateAndProps' -import FunctionalComponent from './functionalComponent' -import ClassComponent from './classComponent' - -storiesOf('CONTENTS|React Introduction', module) - .add('What is React?', () => ) - .add('Jsx', () => ) - .add('Virtual Dom', () => ) - .add('State And Props', () => ) - .add('Functional Component', () => ) - .add('Class Component', () => ) diff --git a/src/components/content/reactIntroduction/stateAndProps.js b/src/components/content/reactIntroduction/stateAndProps.js deleted file mode 100644 index 0f388f8..0000000 --- a/src/components/content/reactIntroduction/stateAndProps.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function StateAndProps() { - return ( -
-

State and Props

-

React Introduction

-
- ) -} - -export default StateAndProps diff --git a/src/components/content/reactIntroduction/virtualDOM.js b/src/components/content/reactIntroduction/virtualDOM.js deleted file mode 100644 index c701fee..0000000 --- a/src/components/content/reactIntroduction/virtualDOM.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function VirtualDOM() { - return ( -
-

Virtual DOM

-

React Introduction

-
- ) -} - -export default VirtualDOM diff --git a/src/components/content/reactIntroduction/whatIs.js b/src/components/content/reactIntroduction/whatIs.js deleted file mode 100644 index db66616..0000000 --- a/src/components/content/reactIntroduction/whatIs.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function WhatIs() { - return ( -
-

What Is React?

-

React Introduction

-
- ) -} - -export default WhatIs diff --git a/src/components/content/router/reactRouter.js b/src/components/content/router/reactRouter.js deleted file mode 100644 index 6c60c4b..0000000 --- a/src/components/content/router/reactRouter.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function ReactRouter() { - return ( -
-

React Router

-

Router

-
- ) -} - -export default ReactRouter diff --git a/src/components/content/router/router.stories.js b/src/components/content/router/router.stories.js deleted file mode 100644 index 6ebb4a5..0000000 --- a/src/components/content/router/router.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import ReactRouter from './reactRouter' - -storiesOf('CONTENTS|Router', module).add('React router', () => ) diff --git a/src/components/content/settingEnvironment/codeSandbox.js b/src/components/content/settingEnvironment/codeSandbox.js deleted file mode 100644 index e42cc48..0000000 --- a/src/components/content/settingEnvironment/codeSandbox.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function CodeSandbox() { - return ( -
-

Code Sandbox

-

setting config

-
- ) -} - -export default CodeSandbox diff --git a/src/components/content/settingEnvironment/settingEnvironment.stories.js b/src/components/content/settingEnvironment/settingEnvironment.stories.js deleted file mode 100644 index 0364a98..0000000 --- a/src/components/content/settingEnvironment/settingEnvironment.stories.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import VscodeConfig from './vscodeConfig' -import CodeSandbox from './codeSandbox' - -storiesOf('CONTENTS|Setting Environment', module) - .add('vscode Config', () => ) - .add('Code Sandbox', () => ) diff --git a/src/components/content/settingEnvironment/vscodeConfig.js b/src/components/content/settingEnvironment/vscodeConfig.js deleted file mode 100644 index 0b7944d..0000000 --- a/src/components/content/settingEnvironment/vscodeConfig.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function VscodeConfig() { - return ( -
-

VSCode Config

-

setting config

-
- ) -} - -export default VscodeConfig diff --git a/src/components/content/statePropsManagement/easyPeasy.js b/src/components/content/statePropsManagement/easyPeasy.js deleted file mode 100644 index 0b6e30b..0000000 --- a/src/components/content/statePropsManagement/easyPeasy.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function EasyPeasy() { - return ( -
-

easy peasy

-

State/Store management

-
- ) -} - -export default EasyPeasy diff --git a/src/components/content/statePropsManagement/mobX.js b/src/components/content/statePropsManagement/mobX.js deleted file mode 100644 index c661ac8..0000000 --- a/src/components/content/statePropsManagement/mobX.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function MobX() { - return ( -
-

mobX

-

State/Store management

-
- ) -} - -export default MobX diff --git a/src/components/content/statePropsManagement/redux.js b/src/components/content/statePropsManagement/redux.js deleted file mode 100644 index 23c6ac3..0000000 --- a/src/components/content/statePropsManagement/redux.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function Redux() { - return ( -
-

Redux

-

State/Store management

-
- ) -} - -export default Redux diff --git a/src/components/content/statePropsManagement/statePropsManagement.stories.js b/src/components/content/statePropsManagement/statePropsManagement.stories.js deleted file mode 100644 index e78576c..0000000 --- a/src/components/content/statePropsManagement/statePropsManagement.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import Redux from './redux' -import MobX from './mobX' -import EasyPeasy from './easyPeasy' - -storiesOf('CONTENTS|State-Store Management', module) - .add('Redux', () => ) - .add('MobX', () => ) - .add('Easy Peasy', () => ) diff --git a/src/components/content/styles/cssInJs.js b/src/components/content/styles/cssInJs.js deleted file mode 100644 index 72c356d..0000000 --- a/src/components/content/styles/cssInJs.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function CssInJs() { - return ( -
-

Css in Js

-

Styles

-
- ) -} - -export default CssInJs diff --git a/src/components/content/styles/materialUI.js b/src/components/content/styles/materialUI.js deleted file mode 100644 index 1359603..0000000 --- a/src/components/content/styles/materialUI.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function MaterialUI() { - return ( -
-

Material UI

-

Styles

-
- ) -} - -export default MaterialUI diff --git a/src/components/content/styles/styleComponents.js b/src/components/content/styles/styleComponents.js deleted file mode 100644 index 40beb65..0000000 --- a/src/components/content/styles/styleComponents.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function StyleComponents() { - return ( -
-

Style Components

-

Styles

-
- ) -} - -export default StyleComponents diff --git a/src/components/content/styles/styles.stories.js b/src/components/content/styles/styles.stories.js deleted file mode 100644 index 0f6abc6..0000000 --- a/src/components/content/styles/styles.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import MaterialUI from './materialUI' -import CssInJs from './cssInJs' -import StyleComponents from './styleComponents' - -storiesOf('CONTENTS|Styles', module) - .add('Material UI', () => ) - .add('Css in Js', () => ) - .add('Style Components', () => ) diff --git a/src/components/content/testing/jest.js b/src/components/content/testing/jest.js deleted file mode 100644 index d47d559..0000000 --- a/src/components/content/testing/jest.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function Jest() { - return ( -
-

jest

-

Testing

-
- ) -} - -export default Jest diff --git a/src/components/content/testing/testing.stories.js b/src/components/content/testing/testing.stories.js deleted file mode 100644 index c5c085a..0000000 --- a/src/components/content/testing/testing.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import Jest from './jest' -import TestingComponents from './testingComponents' -import TestingServices from './testingServices' - -storiesOf('CONTENTS|Testing', module) - .add('Jest', () => ) - .add('Testing Components', () => ) - .add('Testing Services', () => ) diff --git a/src/components/content/testing/testingComponents.js b/src/components/content/testing/testingComponents.js deleted file mode 100644 index 244e8b4..0000000 --- a/src/components/content/testing/testingComponents.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function TestingComponents() { - return ( -
-

testing components

-

Testing

-
- ) -} - -export default TestingComponents diff --git a/src/components/content/testing/testingServices.js b/src/components/content/testing/testingServices.js deleted file mode 100644 index 1481508..0000000 --- a/src/components/content/testing/testingServices.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -function TestingServices() { - return ( -
-

testing services

-

Testing

-
- ) -} - -export default TestingServices diff --git a/src/components/generalInformation/externalMaterial.js b/src/components/generalInformation/externalMaterial.js deleted file mode 100644 index 35ff0ef..0000000 --- a/src/components/generalInformation/externalMaterial.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' - -function ExternalMaterial() { - return ( -
-

External Material

- - - - - - - - - - - - - - - - - -
DescriptionURL
Trello boardhttps://trello.com/b/uAGiX1dj/reactjs-workshop-gl
React Workshop Notes - https://docs.google.com/document/d/1CoXy14P3tc3qadeU-OkhZe-4brTJDQph8UcpszCIZqc/edit?usp=sharing -
React Bootcamp - https://docs.google.com/document/d/17CWgXpjjdivExfvGIk8A4RJh9mUB0CaHN-PRuplSWTw/edit?usp=sharing -
-
- ) -} - -export default ExternalMaterial diff --git a/src/components/generalInformation/generalInformation.stories.js b/src/components/generalInformation/generalInformation.stories.js deleted file mode 100644 index 4c69cbe..0000000 --- a/src/components/generalInformation/generalInformation.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import Managers from './managers' -import WorkshopTeam from './workshopTeam' -import ExternalMaterial from './externalMaterial' - -storiesOf('DEFINITION|Workshop Information', module) - .add('Managers', () => ) - .add('Workshop Team', () => ) - .add('External Material', () => ) diff --git a/src/components/generalInformation/managers.js b/src/components/generalInformation/managers.js deleted file mode 100644 index c4203df..0000000 --- a/src/components/generalInformation/managers.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react' - -const styles = { - table: { - //backgroundColor: 'red', - border: '1px solid #ddd', - padding: '8px', - '& td': { - 'padding-top': '12px', - 'padding-bottom': '12px', - 'text-align': 'left', - 'background-color': '#4CAF50', - color: 'white' - }, - '& tr:hover': { - 'background-color': '#ddd' - } - } -} - -function Managers() { - return ( -
-

Managers

- - - - - - - - - - - - - - - - -
NameRoleGitHub User
Arturo CamposSenior Web Developer
Mariano AlvarezWeb Practice Lead & Sr. Web Developer
-
- ) -} - -export default Managers diff --git a/src/components/generalInformation/workshopTeam.js b/src/components/generalInformation/workshopTeam.js deleted file mode 100644 index 88787e3..0000000 --- a/src/components/generalInformation/workshopTeam.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' - -function WorkshopTeam() { - return ( -
-

Managers

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameRoleGitHub User
Alexey BrenesSr. Web Developer
Daniel ReyesWeb Practice Lead
Michael Rojas PSenior Web Developer
Raul MadrigalTechnical Lead
Roiner Camacho EsquivelConsultant Web Developer
-
- ) -} - -export default WorkshopTeam diff --git a/src/components/inDepth/UsersListComponent.jsx b/src/components/inDepth/UsersListComponent.jsx new file mode 100644 index 0000000..20dfb20 --- /dev/null +++ b/src/components/inDepth/UsersListComponent.jsx @@ -0,0 +1,84 @@ +import React, { Component, Fragment } from 'react'; +import styled from 'styled-components'; + +import { BASE_URL } from '../../configuration/apiConfig'; + +const List = styled.ul` + background-color: #666; + border-radius: 2px; + padding: 5px 18px; +`; + +const Error = styled.p` + background-color: #e2e2e2; + border-radius: 2px; + padding: 1em; + color: #e44545; +`; + +const Item = styled.li` + color: #e4e4e4; + list-style: none; + padding: 0.5em; + margin: 1em 0; + border-bottom: 0.2px solid #cac6c6; +`; + +class UsersListComponent extends Component { + constructor(props) { + super(props); + this.state = { + users: null, + isLoading: false + }; + } + + loadUsers = async () => { + this.setState({ isLoading: true }); + try { + const response = await fetch(`${BASE_URL}/peoples`); + if (response.status === 404) { + this.setState({ + isLoading: false, + hasErrors: true + }); + } else { + const users = await response.json(); + this.setState({ users, isLoading: false, hasErrors: false }); + } + } catch (error) { + console.error(error) + } + }; + + render() { + let content; + + if (this.state.users) { + content = ( + + {this.state.users.map(user => ( + {`${user.name} ${user.lastName}`} + ))} + + ); + } else { + content = ( + +

No users to be displayed! Please click the button to refresh!

+ + + ); + } + + return ( +
+

Users List

+ {this.state.isLoading ? Loading data! : content} + {this.state.hasErrors && (Upps, something went wrong while loading the data!)} +
+ ); + } +} + +export default UsersListComponent; diff --git a/src/components/index.stories.js b/src/components/index.stories.js deleted file mode 100644 index 75de70c..0000000 --- a/src/components/index.stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' -import { linkTo } from '@storybook/addon-links' - -import { Button, Welcome } from '@storybook/react/demo' - -// storiesOf('Welcome', module).add('to Storybook', () => ( -// -// )) - -// storiesOf('Button', module) -// .add('with text', () => ) -// .add('with some emoji', () => ( -// -// )); diff --git a/src/components/reactIntroduction/AvatarComponent.jsx b/src/components/reactIntroduction/AvatarComponent.jsx new file mode 100644 index 0000000..a008ba0 --- /dev/null +++ b/src/components/reactIntroduction/AvatarComponent.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import styled from 'styled-components'; + +const AvatarWrapper = styled.div` + border: 2px solid #aaa; + border-radius: 5px; + color: #666; + padding: 0.5em; + display: flex; + flex-direction: column; + align-items: center; + height: 192px; + width: 192px; +`; + +const Image = styled.img` + height: 160px; + width: 160px; +`; + +const HorizontalRule = styled.hr` + width: 100%; + margin: 0.2em 0; +`; + +function AvatarComponent(props) { + return ( + + {props.fullName} + + {props.fullName} + + ); +} + +export default AvatarComponent; \ No newline at end of file diff --git a/src/components/reactIntroduction/ClassComponent.jsx b/src/components/reactIntroduction/ClassComponent.jsx new file mode 100644 index 0000000..adfa1ba --- /dev/null +++ b/src/components/reactIntroduction/ClassComponent.jsx @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + border: 1px solid #333; + background-color: #666; + padding: 2em; +`; + +const Title = styled.h1` + color: #1EA7FD; + font-weight: bold; +`; + +export default class ClassComponent extends Component { + render() { + return ( + + I'm a Class Component + + ); + } +} diff --git a/src/components/reactIntroduction/NestedComponent.jsx b/src/components/reactIntroduction/NestedComponent.jsx new file mode 100644 index 0000000..93c8232 --- /dev/null +++ b/src/components/reactIntroduction/NestedComponent.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + border: 1px solid #333; + border-radius: 5px; + background-color: #249; + color: white; + padding: 2em; +`; + +const ChildrenWrapper = styled.div` + border: 1px solid white; + border-radius: 5px; + background-color: white; + color: black; + padding: 1em; +`; + +function NestedComponent(props) { + return ( + +

I'm the parent component!

+ {props.children} + + ); +} + +export default NestedComponent; diff --git a/src/components/reactIntroduction/SimpleComponent.jsx b/src/components/reactIntroduction/SimpleComponent.jsx new file mode 100644 index 0000000..e6560c0 --- /dev/null +++ b/src/components/reactIntroduction/SimpleComponent.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +function SimpleComponent(props) { + return ( +
+

Hello there!

+

I'm a simple ReactJS Component that renders a title with a paragraph.

+
+ ); +} + +export default SimpleComponent; \ No newline at end of file diff --git a/src/components/reactIntroduction/SimpleFormWithState.jsx b/src/components/reactIntroduction/SimpleFormWithState.jsx new file mode 100644 index 0000000..9846881 --- /dev/null +++ b/src/components/reactIntroduction/SimpleFormWithState.jsx @@ -0,0 +1,93 @@ +import React, { Component } from 'react'; +import styled, { css } from 'styled-components'; +import { BASE_URL } from '../../configuration/apiConfig'; + +const Form = styled.form` + display: flex; + flex-direction: column; + align-items: flex-end; + width: 300px; +`; + +const fontStyles = css` + font-size: 16px; + font-family: Helvetica, sans-serif; +`; + +const Label = styled.label` + ${fontStyles} + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + color: #1EA7FD; + margin: 0.5em 0; +`; + +const Input = styled.input` + ${fontStyles} + margin-left: 10px; + color: #333; + padding: 0.2em; + border-radius: 2px; + border: 0.5px solid #999; + box-shadow: 2px 2px 4px #93989a; +`; + +const Button = styled.button` + ${fontStyles} + background-color: #333; + color: white; + padding: 0.5em; + border-radius: 5px; +`; + +export default class SimpleFormWithState extends Component { + + constructor(props) { + super(props); + this.state = { + name: '', + lastName: '', + age: '' + }; + } + + handleChange = ({ target }) => { + this.setState({[target.name]: target.value}); + } + + submitForm = async (event) => { + event.preventDefault(); + console.log('Current State: ',this.state) + const response = await fetch(`${BASE_URL}/people`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(this.state) + }); + + const result = await response.json(); + console.log('API Response: ', result); + }; + + render() { + return ( +
+ + + + +
+ ); + } +} diff --git a/src/components/welcome/description.js b/src/components/welcome/description.js deleted file mode 100644 index defecd3..0000000 --- a/src/components/welcome/description.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -function Description() { - return ( -
-

Welcome

-

- This workshop is for Gorilla employees with interest to learn and - practice with ReactJS. The main idea is to improve technical skills and - has the opportunity to implement this new knowledge in a real project. -

-
- ) -} - -export default Description diff --git a/src/components/welcome/welcome.stories.js b/src/components/welcome/welcome.stories.js deleted file mode 100644 index 95bd877..0000000 --- a/src/components/welcome/welcome.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import Description from './description' - -storiesOf('WORKSHOP|Welcome', module).add('Description', () => ) diff --git a/src/components/workshopDevelopment/sessionContent.js b/src/components/workshopDevelopment/sessionContent.js deleted file mode 100644 index d0c0dc2..0000000 --- a/src/components/workshopDevelopment/sessionContent.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' - -function SessionContent() { - return ( -
-

Session Content

-

- Each session is going to have a specific content according to the - defined Topics for the workshop, so the idea of the team is to cover - that, in order to progress according to the schedule. -

-
- ) -} - -export default SessionContent diff --git a/src/components/workshopDevelopment/sessionTime.js b/src/components/workshopDevelopment/sessionTime.js deleted file mode 100644 index 8fb131f..0000000 --- a/src/components/workshopDevelopment/sessionTime.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -function SessionTime() { - return ( -
-

Session Time

-

- The workshop is going to be distributed in ## sessions of 2 (two) hours. -

-
- ) -} - -export default SessionTime diff --git a/src/components/workshopDevelopment/teamDistribution.js b/src/components/workshopDevelopment/teamDistribution.js deleted file mode 100644 index 6d8000f..0000000 --- a/src/components/workshopDevelopment/teamDistribution.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' - -function TeamDistribution() { - return ( -
-

Workshop Team Distribution In Sessions

-

- The “Workshop Team” will define one speaker and two assistants in place - for each of these sessions. -

- - - - - - - - - - - - - -
RoleQuantity per session
Speaker1
Assistants2 in place
-
- ) -} - -export default TeamDistribution diff --git a/src/components/workshopDevelopment/workshopDevelopment.stories.js b/src/components/workshopDevelopment/workshopDevelopment.stories.js deleted file mode 100644 index e8c3a73..0000000 --- a/src/components/workshopDevelopment/workshopDevelopment.stories.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' - -import SessionContent from './sessionContent' -import SessionTime from './sessionTime' -import TeamDistribution from './teamDistribution' - -storiesOf('DEFINITION|Workshop Development', module) - .add('Session Content', () => ) - .add('Session Time', () => ) - .add('Team Distribution', () => ) diff --git a/src/configuration/apiConfig.js b/src/configuration/apiConfig.js new file mode 100644 index 0000000..b1fd0b8 --- /dev/null +++ b/src/configuration/apiConfig.js @@ -0,0 +1,2 @@ + +export const BASE_URL = 'https://5e1de73ef846e500144d61b1.mockapi.io/api/v1'; diff --git a/src/index.css b/src/index.css index dbb0860..ec2585e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,1224 +1,13 @@ -/* Reset.less - * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). - * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ -@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,800'); - -html, -body { - margin: 0; - padding: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -cite, -code, -del, -dfn, -em, -img, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -dd, -dl, -dt, -li, -ol, -ul, -fieldset, -form, -label, -legend, -button, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td { - margin: 0; - padding: 0; - border: 0; - font-weight: normal; - font-style: normal; - font-size: 100%; - line-height: 1; - font-family: inherit; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -ol, -ul { - list-style: none; -} - -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} - -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -a:focus { - outline: thin dotted; -} - -a:hover, -a:active { - outline: 0; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section { - display: block; -} - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -audio:not([controls]) { - display: none; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -img { - border: 0; - -ms-interpolation-mode: bicubic; -} - -button, -input, -select, -textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; -} - -button, -input { - line-height: normal; - *overflow: visible; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; -} - -input[type="search"] { - -webkit-appearance: textfield; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} - -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -textarea { - overflow: auto; - vertical-align: top; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); - } -} - -@keyframes glow { - - 0%, - 100% { - opacity: 1; - } - - 50% { - opacity: 0.5; - } -} - -.force-wrap { - word-wrap: break-word; - word-break: break-all; - -ms-word-break: break-all; - word-break: break-word; - hyphens: auto; -} - -.type-light { - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; -} - -.type-bold { - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 800; -} - -.type-italic { - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - font-style: italic; -} - -* { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: transparent; -} - -html, -button, -input, -textarea, -select { - outline: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - body { - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-style: 400; - color: #333; - font-size: 16px; - background-color: #e4e4e4; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-style: 400; margin: 0; - padding: 0; -} - -h1 { - font-size: 40px; - line-height: 48px; -} - -h2 { - font-size: 28px; - line-height: 32px; -} - -h3 { - font-size: 24px; - line-height: 28px; -} - -h4 { - font-size: 20px; - line-height: 24px; -} - -h5 { - font-size: 14px; - line-height: 20px; - color: #ccc; - text-transform: uppercase; -} - -h6 { - color: #aaa; -} - -p { - font-size: 16px; - line-height: 24px; -} - -sub, -sup { - font-size: 0.8em; -} - -sub { - bottom: -0.2em; -} - -sup { - top: -0.2em; -} - -b { - font-weight: bold; -} - -em { - font-style: italic; -} - -input[type="text"], -input[type="email"], -input[type="password"], -textarea { - font-size: 14px; - line-height: 20px; - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-style: 400; - padding: .75rem 0; - line-height: 1.5rem !important; - border: none; - border-radius: 0; - box-sizing: border-box; - color: #333; - outline: none; -} - -input[type="text"] ::placeholder, -input[type="email"] ::placeholder, -input[type="password"] ::placeholder, -textarea ::placeholder { - color: #778b91; -} - -input[type="text"][disabled], -input[type="email"][disabled], -input[type="password"][disabled], -textarea[disabled] { - opacity: .5; -} - -input:-webkit-autofill { - -webkit-box-shadow: 0 0 0 1000px white inset; -} - -.checkbox { - display: inline-block; - height: 3rem; - position: relative; - vertical-align: middle; - width: 44px; -} - -.checkbox input[type="checkbox"] { - font-size: 1em; - visibility: hidden; -} - -.checkbox input[type="checkbox"]+span:before { - position: absolute; - top: 50%; - right: auto; - bottom: auto; - left: 50%; - width: 0.85em; - height: 0.85em; - transform: translate3d(-50%, -50%, 0); - background: transparent; - box-shadow: #2cc5d2 0 0 0 1px inset; - content: ''; - display: block; -} - -.checkbox input[type="checkbox"]:checked+span:before { - font-size: 16px; - line-height: 24px; - box-shadow: none; - color: #2cc5d2; - margin-top: -1px; - font-family: 'percolate'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - content: "\e65e"; -} - -.input-symbol { - display: inline-block; - position: relative; -} - -.input-symbol.error [class^="icon-"], -.input-symbol.error [class*=" icon-"] { - color: #ff4400; } -.input-symbol [class^="icon-"], -.input-symbol [class*=" icon-"] { - left: 1em; +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; } - -.input-symbol input { - padding-left: 3em; -} - -.input-symbol input { - width: 100%; -} - -.input-symbol input:focus+[class^="icon-"], -.input-symbol input:focus+[class*=" icon-"] { - color: #2cc5d2; -} - -.input-symbol [class^="icon-"], -.input-symbol [class*=" icon-"] { - transition: all 300ms ease-in; - transform: translate3d(0, -50%, 0); - background: transparent; - color: #aaa; - font-size: 1em; - height: 1em; - position: absolute; - top: 50%; - width: 1em; -} - -@font-face { - font-family: "percolate"; - src: url("/icon/percolate.eot?-5w3um4"); - src: url("/icon/percolate.eot?#iefix5w3um4") format("embedded-opentype"), url("/icon/percolate.woff?5w3um4") format("woff"), url("/icon/percolate.ttf?5w3um4") format("truetype"), url("/icon/percolate.svg?5w3um4") format("svg"); - font-weight: normal; - font-style: normal; -} - -[class^="icon-"], -[class*=" icon-"] { - font-family: "percolate"; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-graphql:before { - content: "\e90a"; -} - -.icon-redux:before { - content: "\e908"; -} - -.icon-grid:before { - content: "\e909"; -} - -.icon-redirect:before { - content: "\e907"; -} - -.icon-grow:before { - content: "\e903"; -} - -.icon-lightning:before { - content: "\e904"; -} - -.icon-request-change:before { - content: "\e905"; -} - -.icon-transfer:before { - content: "\e906"; -} - -.icon-calendar:before { - content: "\e902"; -} - -.icon-sidebar:before { - content: "\e900"; -} - -.icon-tablet:before { - content: "\e901"; -} - -.icon-atmosphere:before { - content: "\e671"; -} - -.icon-browser:before { - content: "\e672"; -} - -.icon-database:before { - content: "\e673"; -} - -.icon-expand-alt:before { - content: "\e674"; -} - -.icon-mobile:before { - content: "\e675"; -} - -.icon-watch:before { - content: "\e676"; -} - -.icon-home:before { - content: "\e600"; -} - -.icon-user-alt:before { - content: "\e601"; -} - -.icon-user:before { - content: "\e602"; -} - -.icon-user-add:before { - content: "\e603"; -} - -.icon-users:before { - content: "\e604"; -} - -.icon-profile:before { - content: "\e605"; -} - -.icon-bookmark:before { - content: "\e606"; -} - -.icon-bookmark-hollow:before { - content: "\e607"; -} - -.icon-star:before { - content: "\e608"; -} - -.icon-star-hollow:before { - content: "\e609"; -} - -.icon-circle:before { - content: "\e60a"; -} - -.icon-circle-hollow:before { - content: "\e60b"; -} - -.icon-heart:before { - content: "\e60c"; -} - -.icon-heart-hollow:before { - content: "\e60d"; -} - -.icon-face-happy:before { - content: "\e60e"; -} - -.icon-face-sad:before { - content: "\e60f"; -} - -.icon-face-neutral:before { - content: "\e610"; -} - -.icon-lock:before { - content: "\e611"; -} - -.icon-unlock:before { - content: "\e612"; -} - -.icon-key:before { - content: "\e613"; -} - -.icon-arrow-left-alt:before { - content: "\e614"; -} - -.icon-arrow-right-alt:before { - content: "\e615"; -} - -.icon-sync:before { - content: "\e616"; -} - -.icon-reply:before { - content: "\e617"; -} - -.icon-expand:before { - content: "\e618"; -} - -.icon-arrow-left:before { - content: "\e619"; -} - -.icon-arrow-up:before { - content: "\e61a"; -} - -.icon-arrow-down:before { - content: "\e61b"; -} - -.icon-arrow-right:before { - content: "\e61c"; -} - -.icon-chevron-down:before { - content: "\e61d"; -} - -.icon-back:before { - content: "\e61e"; -} - -.icon-download:before { - content: "\e61f"; -} - -.icon-upload:before { - content: "\e620"; -} - -.icon-proceed:before { - content: "\e621"; -} - -.icon-info:before { - content: "\e622"; -} - -.icon-question:before { - content: "\e623"; -} - -.icon-alert:before { - content: "\e624"; -} - -.icon-edit:before { - content: "\e625"; -} - -.icon-paintbrush:before { - content: "\e626"; -} - -.icon-close:before { - content: "\e627"; -} - -.icon-trash:before { - content: "\e628"; -} - -.icon-cross:before { - content: "\e629"; -} - -.icon-delete:before { - content: "\e62a"; -} - -.icon-power:before { - content: "\e62b"; -} - -.icon-add:before { - content: "\e62c"; -} - -.icon-plus:before { - content: "\e62d"; -} - -.icon-document:before { - content: "\e62e"; -} - -.icon-graph-line:before { - content: "\e62f"; -} - -.icon-doc-chart:before { - content: "\e630"; -} - -.icon-doc-list:before { - content: "\e631"; -} - -.icon-category:before { - content: "\e632"; -} - -.icon-copy:before { - content: "\e633"; -} - -.icon-book:before { - content: "\e634"; -} - -.icon-certificate:before { - content: "\e636"; -} - -.icon-print:before { - content: "\e637"; -} - -.icon-list-unordered:before { - content: "\e638"; -} - -.icon-graph-bar:before { - content: "\e639"; -} - -.icon-menu:before { - content: "\e63a"; -} - -.icon-filter:before { - content: "\e63b"; -} - -.icon-ellipsis:before { - content: "\e63c"; -} - -.icon-cog:before { - content: "\e63d"; -} - -.icon-wrench:before { - content: "\e63e"; -} - -.icon-nut:before { - content: "\e63f"; -} - -.icon-camera:before { - content: "\e640"; -} - -.icon-eye:before { - content: "\e641"; -} - -.icon-photo:before { - content: "\e642"; -} - -.icon-video:before { - content: "\e643"; -} - -.icon-speaker:before { - content: "\e644"; -} - -.icon-phone:before { - content: "\e645"; -} - -.icon-flag:before { - content: "\e646"; -} - -.icon-pin:before { - content: "\e647"; -} - -.icon-compass:before { - content: "\e648"; -} - -.icon-globe:before { - content: "\e649"; -} - -.icon-location:before { - content: "\e64a"; -} - -.icon-search:before { - content: "\e64b"; -} - -.icon-timer:before { - content: "\e64c"; -} - -.icon-time:before { - content: "\e64d"; -} - -.icon-dashboard:before { - content: "\e64e"; -} - -.icon-hourglass:before { - content: "\e64f"; -} - -.icon-play:before { - content: "\e650"; -} - -.icon-stop:before { - content: "\e651"; -} - -.icon-email:before { - content: "\e652"; -} - -.icon-comment:before { - content: "\e653"; -} - -.icon-link:before { - content: "\e654"; -} - -.icon-paperclip:before { - content: "\e655"; -} - -.icon-box:before { - content: "\e656"; -} - -.icon-structure:before { - content: "\e657"; -} - -.icon-commit:before { - content: "\e658"; -} - -.icon-cpu:before { - content: "\e659"; -} - -.icon-memory:before { - content: "\e65a"; -} - -.icon-outbox:before { - content: "\e65b"; -} - -.icon-share:before { - content: "\e65c"; -} - -.icon-button:before { - content: "\e65d"; -} - -.icon-check:before { - content: "\e65e"; -} - -.icon-form:before { - content: "\e65f"; -} - -.icon-admin:before { - content: "\e660"; -} - -.icon-paragraph:before { - content: "\e661"; -} - -.icon-bell:before { - content: "\e662"; -} - -.icon-rss:before { - content: "\e663"; -} - -.icon-basket:before { - content: "\e664"; -} - -.icon-credit:before { - content: "\e665"; -} - -.icon-support:before { - content: "\e666"; -} - -.icon-shield:before { - content: "\e667"; -} - -.icon-beaker:before { - content: "\e668"; -} - -.icon-google:before { - content: "\e669"; -} - -.icon-gdrive:before { - content: "\e66a"; -} - -.icon-youtube:before { - content: "\e66b"; -} - -.icon-facebook:before { - content: "\e66c"; -} - -.icon-thumbs-up:before { - content: "\e66d"; -} - -.icon-twitter:before { - content: "\e66e"; -} - -.icon-github:before { - content: "\e66f"; -} - -.icon-meteor:before { - content: "\e670"; -} - -a { - transition: all 200ms ease-in; - color: #5db9ff; - cursor: pointer; - text-decoration: none; -} - -a:hover { - color: #239da8; -} - -a:active { - color: #555; -} - -a:focus { - outline: none; -} - -.list-heading { - letter-spacing: .3em; - text-indent: .3em; - text-transform: uppercase; - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 800; - font-size: 11px; - padding-left: 15px; - line-height: 40px; - background: #f8f8f8; - color: #aaa; -} - -.list-heading .icon-sync { - opacity: 1; - animation: spin 2s infinite linear; - display: inline-block; - margin-right: 4px; -} - -.list-item { - font-size: 14px; - line-height: 20px; - display: flex; - flex-wrap: wrap; - height: 3rem; - width: 100%; - background: white; - transition: all ease-out 150ms; -} - -.list-item .title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} - -.list-item input[type="text"] { - background: transparent; - width: 100%; -} - -.list-item input[type="text"]:focus { - cursor: text; -} - -.list-item .actions { - transition: all 200ms ease-in; - padding-right: 20px; -} - -.list-item .actions a { - display: inline-block; - vertical-align: top; - text-align: center; - color: #eee; -} - -.list-item .actions a:hover { - color: #2cc5d2; -} - -.list-item .actions a:active { - color: #555; -} - -.list-item .actions [class^="icon-"] { - font-size: 16px; - line-height: 24px; - line-height: 3rem; - text-align: center; -} - -.list-item.TASK_PINNED .icon-star { - color: #2cc5d2; -} - -.list-item.TASK_ARCHIVED input[type="text"] { - color: #aaa; -} - -.list-item:hover { - background-image: linear-gradient(to bottom, #e5f9f7 0%, #f0fffd 100%); -} - -.list-item:hover .checkbox { - cursor: pointer; -} - -.list-item+.list-item { - border-top: 1px solid #f0f9fb; -} - -.list-item.checked input[type="text"] { - color: #ccc; - text-decoration: line-through; -} - -.list-item.checked .delete-item { - display: inline-block; -} - -.loading-item { - height: 3rem; - width: 100%; - background: white; - display: flex; - align-items: center; - line-height: 1rem; - padding-left: 16px; -} - -.loading-item .glow-checkbox, -.loading-item .glow-text span { - animation: glow 1.5s ease-in-out infinite; - background: #eee; - color: transparent; - cursor: progress; - display: inline-block; -} - -.loading-item .glow-checkbox { - margin-right: 16px; - width: 12px; - height: 12px; -} - -.loading-item+.loading-item { - border-top: 1px solid #f0f9fb; -} - -.list-items { - position: relative; - background: white; - min-height: 288px; -} - -.list-items .select-placeholder { - border: none; - width: 48px; -} - -.wrapper-message { - position: absolute; - top: 45%; - right: 0; - bottom: auto; - left: 0; - width: auto; - height: auto; - transform: translate3d(0, -50%, 0); - text-align: center; -} - -.wrapper-message [class^="icon-"], -.wrapper-message [class*=" icon-"] { - font-size: 48px; - line-height: 56px; - color: #2cc5d2; - display: block; -} - -.wrapper-message .title-message { - font-size: 16px; - line-height: 24px; - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 800; - color: #555; -} - -.wrapper-message .subtitle-message { - font-size: 14px; - line-height: 20px; - color: #666; -} - -.page.lists-show { - min-height: 100vh; - background: white; -} - -.page.lists-show nav { - background: #d3edf4; - padding: 1.5rem 1.25rem; - text-align: center; -} - -@media screen and (min-width: 40em) { - .page.lists-show nav { - text-align: left; - } -} - -.page.lists-show nav .title-page { - font-size: 20px; - line-height: 24px; - line-height: 2rem; - cursor: pointer; - white-space: nowrap; -} - -.page.lists-show nav .title-page .title-wrapper { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-family: 'Nunito Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 800; - color: #1c3f53; - display: inline-block; - vertical-align: top; - max-width: 100%; -} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..395b749 --- /dev/null +++ b/src/index.js @@ -0,0 +1,6 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..74b1a27 --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; diff --git a/src/stories/audience/quantityOfPeople.stories.mdx b/src/stories/audience/quantityOfPeople.stories.mdx new file mode 100644 index 0000000..5798b66 --- /dev/null +++ b/src/stories/audience/quantityOfPeople.stories.mdx @@ -0,0 +1,8 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + + + + +## Quantity Of People + +The workshop is designed to work in groups of 15-20 people per session. diff --git a/src/stories/audience/technicalSkills.stories.mdx b/src/stories/audience/technicalSkills.stories.mdx new file mode 100644 index 0000000..73b1989 --- /dev/null +++ b/src/stories/audience/technicalSkills.stories.mdx @@ -0,0 +1,13 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + + + +## About Required Technical Skills +To guarantee the correct progress, is necessary to have knowledge is some technical skills. +Please check the next list of the required technology skills. + +### Required Technical Skills +- Solid JavaScript +- ES6 basics +- HTML 5 +- CSS3 diff --git a/src/stories/audience/tools.stories.mdx b/src/stories/audience/tools.stories.mdx new file mode 100644 index 0000000..b959e2d --- /dev/null +++ b/src/stories/audience/tools.stories.mdx @@ -0,0 +1,13 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + + + + +## About Required Tools + + Here is a list of tools that is necessary to have installed in order to develop the course. (Is the responsibility of the participants to have installed all these tools, + please feel free to contact any Workshop Team in slack, if you have doubts with the installation). + +### Required Tools +- Visual Studio Code +- Npm diff --git a/src/stories/content/InDepth/conditionalRenderingAndEventHandling.stories.mdx b/src/stories/content/InDepth/conditionalRenderingAndEventHandling.stories.mdx new file mode 100644 index 0000000..9c70bde --- /dev/null +++ b/src/stories/content/InDepth/conditionalRenderingAndEventHandling.stories.mdx @@ -0,0 +1,86 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + +import UsersListComponent from '../../../components/inDepth/UsersListComponent'; + + + +# Conditional rendering and events handling + +Knowing how we can access pops and state can help us to easily re-use components and persist some information at a component level, but just with that +we can't do much if we need to react to external changes or trigger actions based on user interaction. + +In this section we will learn how we can display different content based on props/state and how we can trigger events based on actions like clicking a button. + +## Conditional Render + + +Let's define a user list component with a local state: + +```jsx +class UsersListComponent extends Component { + constructor(props) { + super(props); + this.state = { + users: null, + isLoading: false + }; + } +... + +} + +``` +Nothing new so far, right? + +--- + +Now let's say we want this component to display a default message when the list of users from the local state is empty, and +iterate throught the actual list when there is data available so we can display all the users, **how do we do that?** + +Since JSX lets us use markup with plain JavaScript, we can make use of the conditional structures we already now from JS (if/else, ternary operators, loops, etc... ). + +Let's see how this looks like: + +``` jsx + ... + render() { + let content; + + if (this.state.users) { + content = ( + + {this.state.users.map(user => ( + {`${user.name} ${user.lastName}`} + ))} + + ); + } else { + content = ( + +

No users to be displayed! Please click the button to refresh!

+ + + ); + } + + return ( +
+

Users List

+ {this.state.isLoading ? Loading data! : content} + {this.state.hasErrors && (Upps, something went wrong while loading the data!)} +
+ ); + } +} +... + +``` + + +## Event handling + + + + + + diff --git a/src/stories/content/InDepth/lifecycleMethods.stories.mdx b/src/stories/content/InDepth/lifecycleMethods.stories.mdx new file mode 100644 index 0000000..0887225 --- /dev/null +++ b/src/stories/content/InDepth/lifecycleMethods.stories.mdx @@ -0,0 +1,41 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + +import SimpleComponent from '../../../components/reactIntroduction/SimpleComponent'; +import ClassComponent from '../../../components/reactIntroduction/ClassComponent'; + + + +# Lifecycle Methods + +There are two main ways of defining components in Reac, using a function or defining a class that extends from React.Component. + +## Function Component + +As the name suggests, a function component is a `JavaScript` function, this function receives as parameter a `props` object that +contains `{key:value}` pairs with information passed from outside the component. + +The function also returns a root React Element that can contain `n` children React Elements. These elements are a description of how the Component UI should look like. + +The main difference with a Class Component is that we have easy access to a `local state` managed by the component and to the lifecycle methods. We'll dig deeper into these subjects later. + +```jsx +import React from 'react'; + +function SimpleComponent(props) { + return ( +
+

Hello there!

+

I'm a simple ReactJS Component that renders a title with a paragraph.

+
+ ); +} + +export default SimpleComponent; +``` + + + + + + + diff --git a/src/stories/content/reactIntroduction/functionAndClassComponents.stories.mdx b/src/stories/content/reactIntroduction/functionAndClassComponents.stories.mdx new file mode 100644 index 0000000..593ca54 --- /dev/null +++ b/src/stories/content/reactIntroduction/functionAndClassComponents.stories.mdx @@ -0,0 +1,82 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + +import SimpleComponent from '../../../components/reactIntroduction/SimpleComponent'; +import ClassComponent from '../../../components/reactIntroduction/ClassComponent'; + + + +# Function and Class Components + +There are two main ways of defining components in Reac, using a function or defining a class that extends from React.Component. + +## Function Component + +As the name suggests, a function component is a `JavaScript` function, this function receives as parameter a `props` object that +contains `{key:value}` pairs with information passed from outside the component. + +The function also returns a root React Element that can contain `n` children React Elements. These elements are a description of how the Component UI should look like. + +The main difference with a Class Component is that we have easy access to a `local state` managed by the component and to the lifecycle methods. We'll dig deeper into these subjects later. + +```jsx +import React from 'react'; + +function SimpleComponent(props) { + return ( +
+

Hello there!

+

I'm a simple ReactJS Component that renders a title with a paragraph.

+
+ ); +} + +export default SimpleComponent; +``` + + + + + + + + + +## Class Components + +A class component is a little more complex than a function component in the sense that it requires a bit more of code in order to be defined. + +In this case we will have an ES6+ Class that will extend from the `React.Component` object. Additional to that, there will be a `render()` class function, +this function unlike the one from `Funtion Components` doesn't receive any parameters, but it does return a React Element. + + +```jsx +import React, { Component } from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + border: 1px solid #333; + background-color: #666; + padding: 2em; +`; + +const Title = styled.h1` + color: #1EA7FD; + font-weight: bold; +`; + +export default class ClassComponent extends Component { + render() { + return ( + + I'm a Class Component + + ); + } +} +``` + + + + + + diff --git a/src/stories/content/reactIntroduction/stateAndProps.stories.mdx b/src/stories/content/reactIntroduction/stateAndProps.stories.mdx new file mode 100644 index 0000000..bdb1db3 --- /dev/null +++ b/src/stories/content/reactIntroduction/stateAndProps.stories.mdx @@ -0,0 +1,154 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + +import SimpleComponent from '../../../components/reactIntroduction/SimpleComponent'; +import AvatarComponent from '../../../components/reactIntroduction/AvatarComponent'; +import SimpleFormWithState from '../../../components/reactIntroduction/SimpleFormWithState'; +import * as Logo from '../../../../public/logo192.png'; + + + +# State and Props + +We know how to define a simple component that renders hardcoded content, but what's next??? + +Rendering static content is not so useful for create interactive and reusable components, remember the `props` and `state` we previously mentioned? +Now is time to put them some use. + +## Props + +Props are values passed from outside of the component, they allow the component to render in the UI elements based on these `parameters` and re-use the component over and over again, the same way we do when we create a normal JavaScript function. + +One important thing to keep in mind + +
+ Click to expand/collapse the componet's source code + +

+ +```jsx +import React from 'react'; +import styled from 'styled-components'; + +const AvatarWrapper = styled.div` + ... +`; + +const Image = styled.img` + ... +`; + +const HorizontalRule = styled.hr` + ... +`; + +function AvatarComponent(props) { + return ( + + {props.fullName} + + {props.fullName} + + ); +} + +export default AvatarComponent; +``` +

+ +
+ + + + + + + +## State + +
+ Click to expand/collapse the componet's source code + +

+ +```jsx + +... + +const Form = styled.form` +... +`; + + +const Label = styled.label` +... +`; + +const Input = styled.input` +... +`; + +const Button = styled.button` +... +`; + +export default class SimpleFormWithState extends Component { + + constructor(props) { + super(props); + this.state = { + name: '', + lastName: '', + age: '' + }; + } + + handleChange = ({ target }) => { + this.setState({[target.name]: target.value}); + } + + submitForm = async (event) => { + event.preventDefault(); + console.log('Current State: ',this.state) + const response = await fetch(`${BASE_URL}/people`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(this.state) + }); + + const result = await response.json(); + console.log('API Response: ', result); + }; + + render() { + return ( +

+ + + + +
+ ); + } +} + +``` +

+ +
+ + + + + + + diff --git a/src/stories/content/reactIntroduction/whatIsReact.stories.mdx b/src/stories/content/reactIntroduction/whatIsReact.stories.mdx new file mode 100644 index 0000000..87e449e --- /dev/null +++ b/src/stories/content/reactIntroduction/whatIsReact.stories.mdx @@ -0,0 +1,78 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + +import SimpleComponent from '../../../components/reactIntroduction/SimpleComponent'; +import NestedComponent from '../../../components/reactIntroduction/NestedComponent'; + + + +# What is ReactJS + +ReactJS is a declarative JavaScript library for building User Interfaces based in components. + +We can think of a component as a function that receives parameters (props) and returns a set of elements that describe how the component should look like. + +## Simple ReactJS component + +The code bellow shows how a simple ReactJS component looks like: + +```jsx +import React from 'react'; + +function SimpleComponent(props) { + return ( +
+

Hello there!

+

I'm a simple ReactJS Component that renders a title with a paragraph.

+
+ ); +} + +export default SimpleComponent; +``` + + + + + + + + +## Nested Component + +```jsx +... +const Container = styled.div` + border: 1px solid #333; + border-radius: 5px; + background-color: #249; + color: white; + padding: 2em; +`; + +const ChildrenWrapper = styled.div` + border: 1px solid white; + border-radius: 5px; + background-color: white; + color: black; + padding: 1em; +`; + +function NestedComponent(props) { + return ( + +

I'm the parent component!

+ {props.children} + + ); +} + +... +``` + + + + + + + + diff --git a/src/stories/welcome/welcome.stories.mdx b/src/stories/welcome/welcome.stories.mdx new file mode 100644 index 0000000..84056ed --- /dev/null +++ b/src/stories/welcome/welcome.stories.mdx @@ -0,0 +1,9 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; + + + + +## Welcome + +This workshop is for Gorilla employees with interest to learn and practice with ReactJS. +The main idea is to improve technical skills and has the opportunity to implement this new knowledge in a real project. \ No newline at end of file