](http://ddcreationstudios.at/)
3 |
4 | ##### Daniel Deutsch [Github](https://github.com/DDCreationStudios) / [FreeCodeCamp](https://www.freecodecamp.com/ddcreationstudios) / [CodePen](http://codepen.io/ddcreationstudios/) / [LinkedIn](https://www.linkedin.com/in/daniel-deutsch-b95611127) / [Medium](https://medium.com/@ddcreationstudi) / [Hashnode](https://hashnode.com/@DDCreationStudio) / [Site](http://ddcreationstudios.at/) / [E-Mail](mailto:deudan1010@gmail.com)
5 |
6 | # 🌐 Fetching data from Unsplash.com in React
7 |
8 | 
9 |
10 | ---
11 | A simple example on how to fetch data from Unsplash.com in React.
12 | ---
13 |
14 |
15 | 
16 | 
17 |
18 | Article on [Github](https://github.com/DDCreationStudios/Writing/blob/master/articles/FetchingInReact.md)
19 |
20 | Check out my post on [Medium](https://medium.com/@ddcreationstudi) or [Hashnode](https://hashnode.com/@DDCreationStudio)
21 |
22 |
23 | You can find a similar, better explained tutorial at treehouse:
24 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | /* =================================
2 | Element Styles
3 | ==================================== */
4 |
5 | * {
6 | box-sizing: border-box;
7 | }
8 |
9 | body {
10 | font: 1em/1.5 'Roboto', sans-serif;
11 | color: #4c4c4c;
12 | background: #f6f7f7;
13 | padding-top: 145px;
14 | padding-bottom: 3em;
15 | margin: 0;
16 | }
17 |
18 | a {
19 | text-decoration: none;
20 | }
21 |
22 | ul,
23 | li {
24 | margin: 0;
25 | padding: 0;
26 | list-style: none;
27 | }
28 |
29 | input {
30 | font-size: 1.12em;
31 | height: 46px;
32 | padding-bottom: 1em;
33 | padding-left: 0;
34 | background: none;
35 | border: none;
36 | outline: 0;
37 | border-bottom: 4px solid #e4e4e4;
38 | transition: border-color .4s;
39 | }
40 |
41 | input:focus {
42 | border-color: #c1c1c1;
43 | }
44 |
45 | button {
46 | width: 40px;
47 | height: 35px;
48 | border: 0;
49 | background: none;
50 | cursor: pointer;
51 | outline: 0;
52 | position: relative;
53 | z-index: 2000;
54 | }
55 |
56 | /* =================================
57 | Page Components
58 | ==================================== */
59 |
60 | .main-title {
61 | font-size: 1.4em;
62 | line-height: 80px;
63 | text-transform: uppercase;
64 | letter-spacing: 1px;
65 | margin: 0;
66 | }
67 |
68 | .search-form input:only-of-type {
69 | width: 100%;
70 | margin-right: -40px;
71 | padding-right: 35px;
72 | }
73 |
74 | .search-button {
75 | float: right;
76 | margin-right: -10px;
77 | }
78 |
79 | .icn-search {
80 | font-weight: 700;
81 | }
82 |
83 | .icon-img {
84 | font-size: 6em;
85 | margin-bottom: 0;
86 | color: #7bcbc4;
87 | display: block;
88 | }
89 |
90 | .no-imgs {
91 | color: #7bcbc4;
92 | height: 140px;
93 | padding-top: 62px;
94 | text-align: center;
95 | font-size: 1.25em;
96 | }
97 |
98 | .img-list a {
99 | display: block;
100 | margin: auto;
101 | }
102 |
103 | .img-wrap {
104 | background-color: #fff;
105 | margin-bottom: .8em;
106 | position: relative;
107 | }
108 |
109 | .img-wrap img {
110 | min-width: 100%;
111 | }
112 |
113 | /* =================================
114 | Layout Styles
115 | ==================================== */
116 |
117 | .inner,
118 | .main-content {
119 | width: 90%;
120 | max-width: 1025px;
121 | margin: auto;
122 | }
123 |
124 | .main-header {
125 | position: fixed;
126 | top: 0;
127 | left: 0;
128 | width: 100%;
129 | background: #fff;
130 | min-height: 80px;
131 | z-index: 1000;
132 | }
133 |
134 | .main-content::after {
135 | content: " ";
136 | display: table;
137 | clear: both;
138 | }
139 |
140 | .is-hidden {
141 | border: 0;
142 | clip: rect(0 0 0 0);
143 | height: 1px;
144 | margin: -1px;
145 | overflow: hidden;
146 | padding: 0;
147 | position: absolute;
148 | width: 1px;
149 | }
150 |
151 | /* =================================
152 | Media Queries
153 | ==================================== */
154 |
155 | @media (min-width: 0) and (max-width: 549px) {
156 | .img-list li {
157 | text-align: center;
158 | margin: 20px 0 0;
159 | font-size: 0;
160 | }
161 | }
162 |
163 | @media (min-width: 550px) {
164 | .img-list li {
165 | float: left;
166 | width: 50%;
167 | margin: 0;
168 | }
169 | .img-wrap img {
170 | height: 235px;
171 | }
172 | .img-list .no-imgs {
173 | float: none;
174 | width: 100%;
175 | }
176 | .img-wrap {
177 | border: 1px solid white;
178 | padding: 0;
179 | overflow: hidden;
180 | font-size: 0;
181 | }
182 | }
183 |
184 | @media (min-width: 769px) {
185 | body {
186 | padding-top: 115px;
187 | }
188 | .main-title {
189 | float: left;
190 | }
191 | .search-form {
192 | width: 422px;
193 | float: right;
194 | margin-top: 34px;
195 | }
196 | .img-list li {
197 | width: 33.333333333%;
198 | }
199 | }
200 |
201 | @media (min-width: 769px) {
202 | .img-list li:nth-of-type(3n+1) {
203 | clear: left;
204 | }
205 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import axios from 'axios';
3 |
4 | import './App.css';
5 | import ImgList from './Components/ImgList';
6 | import SearchForm from './Components/SearchForm';
7 | import cred from './cred.js';
8 |
9 | export default class App extends Component {
10 | constructor() {
11 | super();
12 | this.state = {
13 | imgs: [],
14 | loadingState: true
15 | };
16 | }
17 |
18 | componentDidMount() {
19 | this.performSearch();
20 | }
21 |
22 | performSearch = (query = 'sun') => {
23 | axios
24 | .get(
25 | `https://api.unsplash.com/search/photos/?page=1&per_page=10&query=${query}&client_id=${cred.APP_ID}`
26 | )
27 | .then(data => {
28 | this.setState({ imgs: data.data.results, loadingState: false });
29 | })
30 | .catch(err => {
31 | console.log('Error happened during fetching!', err);
32 | });
33 | };
34 |
35 | render() {
36 | return (
37 | Loading
47 | :9 | Photo by 10 | {props.name} 11 | See on Unsplash 12 |
13 |