├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── components ├── App.js └── ResourceList.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Initial Code 2 | 3 | This is a repository containing inital code for React Hooks tutorial. Demo application is written with class based components, and the goal of the tutorial is to convert them to functional components using hooks. 4 | 5 | ## Setup: 6 | * run npm i && npm start to start the development server 7 | 8 | ## Covered topics: 9 | * why and how to use React Hooks 10 | * useState and useEffect hooks 11 | * custom hooks 12 | * passing props 13 | * API calls 14 | 15 | ## Todo: 16 | * Convert this application to functional components using hooks. 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_hooks_app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "react": "^16.8.6", 8 | "react-dom": "^16.8.6", 9 | "react-scripts": "3.0.1" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrianhajdin/tutorial_react_hooks/13e00f517ce293e74d97aad8c29db099aaf68191/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React Hooks App 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import ResourceList from './ResourceList'; 4 | 5 | class App extends React.Component { 6 | state = { 7 | resourceName: 'posts' 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | } 20 | export default App; -------------------------------------------------------------------------------- /src/components/ResourceList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from 'axios'; 3 | 4 | class ResourceList extends React.Component { 5 | state = { 6 | resources: [], 7 | } 8 | 9 | async componentDidMount() { 10 | const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.resourceName}`); 11 | 12 | this.setState({ resources: response.data }); 13 | } 14 | 15 | async componentDidUpdate(prevProps) { 16 | if(prevProps.resourceName !== this.props.resourceName) { 17 | const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.resourceName}`); 18 | 19 | this.setState({ resources: response.data }); 20 | } 21 | } 22 | 23 | render() { 24 | return ( 25 | 30 | ) 31 | } 32 | } 33 | 34 | export default ResourceList; 35 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './components/App'; 5 | 6 | ReactDOM.render(, document.querySelector('#root')); --------------------------------------------------------------------------------