/react-hooks_app

React Hooks

Primary LanguageJavaScript

Hooks

Hooks

React Router

Tests

Installs

With package.json and dependencies

docker-compose run app yarn

without dependencies

docker-compose run app yarn add react-router-dom
docker-compose run app yarn add enzyme enzyme-adapter-react-16 --dev
docker-compose run app yarn add enzyme-to-json --dev
docker-compose run app yarn add @testing-library/react-hooks --dev

Project Structure

run tree -I "node_modules|public|screenshots"

.
├── Dockerfile
├── README.md
├── docker-compose.yml
├── package.json
├── src
│   ├── HookApp.js
│   ├── components
│   │   ├── 01-useState
│   │   │   ├── CounterApp.js
│   │   │   ├── CounterWithCustomHook.js
│   │   │   └── counter-app.css
│   │   ├── 02-useEffect
│   │   │   ├── FormWithCustomHook.js
│   │   │   ├── Message.js
│   │   │   ├── SimpleForm.js
│   │   │   └── effects.css
│   │   ├── 03-examples
│   │   │   ├── MultipleCustomHooks.js
│   │   │   └── hooks.css
│   │   ├── 04-useRef
│   │   │   ├── FocusScreen.js
│   │   │   ├── RealExampleRef.js
│   │   │   └── focus.css
│   │   ├── 05-useLayoutEffect
│   │   │   ├── Layout.js
│   │   │   └── layout.css
│   │   ├── 06-memos
│   │   │   ├── CallbackHook.js
│   │   │   ├── MemoHook.js
│   │   │   ├── Memorize.js
│   │   │   ├── ShowIncrement.js
│   │   │   ├── Small.js
│   │   │   └── memo.css
│   │   ├── 07-tarea-memo
│   │   │   ├── Hijo.js
│   │   │   ├── Padre.js
│   │   │   └── styles.css
│   │   ├── 08-useReducer
│   │   │   ├── TodoAdd.js
│   │   │   ├── TodoApp.js
│   │   │   ├── TodoList.js
│   │   │   ├── TodoListItem.js
│   │   │   ├── intro-reducer.js
│   │   │   ├── styles.css
│   │   │   └── todoReducer.js
│   │   └── 09-useContex
│   │       ├── AboutScreen.js
│   │       ├── AppRouter.js
│   │       ├── HomeScreen.js
│   │       ├── LoginScreen.js
│   │       ├── MainApp.js
│   │       ├── NavBar.js
│   │       ├── PageNotFound.js
│   │       ├── UserContext.js
│   │       └── styles.css
│   ├── helpers
│   │   └── heavyProcess.js
│   ├── hooks
│   │   ├── useCounter.js
│   │   ├── useFetch.js
│   │   └── useForm.js
│   ├── index.js
│   ├── setupTests.js
│   └── tests
│       ├── HookApp.test.js
│       ├── __snapshots__
│       │   └── HookApp.test.js.snap
│       ├── components
│       │   ├── 03-examples
│       │   │   ├── MultipleCustomHooks.test.js
│       │   │   └── __snapshots__
│       │   │       └── MultipleCustomHooks.test.js.snap
│       │   ├── 04-useRef
│       │   │   ├── RealExampleRef.test.js
│       │   │   └── __snapshots__
│       │   │       └── RealExampleRef.test.js.snap
│       │   ├── 08-useReducer
│       │   │   ├── TodoAdd.test.js
│       │   │   ├── TodoApp.test.js
│       │   │   ├── TodoList.test.js
│       │   │   ├── TodoListItem.test.js
│       │   │   ├── __snapshots__
│       │   │   │   ├── TodoAdd.test.js.snap
│       │   │   │   ├── TodoApp.test.js.snap
│       │   │   │   ├── TodoList.test.js.snap
│       │   │   │   └── TodoListItem.test.js.snap
│       │   │   └── todoReducer.test.js
│       │   └── 09-useContex
│       │       ├── AppRouter.test.js
│       │       ├── HomeScreen.test.js
│       │       ├── LoginScreen.test.js
│       │       └── __snapshots__
│       │           ├── AppRouter.test.js.snap
│       │           ├── HomeScreen.test.js.snap
│       │           └── LoginScreen.test.js.snap
│       ├── fixtures
│       │   └── demoTodos.js
│       └── hooks
│           ├── useCounter.test.js
│           ├── useFetch.test.js
│           └── useForm.test.js
└── yarn.lock

26 directories, 76 files

Screenshots

TODO List with hooks

Start project

run docker-compose up