# Getting Started with React This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants). If you haven't gone through the getting started guide, the way you request a Strapi API with [React](https://reactjs.org/) remains the same except that you will not fetch the same content. ### Create a React app Create a basic React application using [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html). :::: tabs ::: tab yarn ```bash yarn create react-app react-app ``` ::: ::: tab npx ```bash npx create-react-app react-app ``` ::: :::: ### Use an HTTP client Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) :::: tabs ::: tab axios ```bash yarn add axios ``` ::: ::: tab fetch No installation needed ::: :::: ### GET Request your collection type Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants. Be sure that you activated the `find` permission for the `restaurant` Collection Type :::: tabs ::: tab axios *Request* ```js import axios from 'axios' axios.get('http://localhost:1337/restaurants') .then(response => { console.log(response); }) ``` ::: ::: tab fetch *Request* ```js fetch("http://localhost:1337/restaurants", { method: "GET", headers: { 'Content-Type': 'application/json' }, }).then(response => response.json()) .then(data => console.log(data)); ``` ::: *Response* ```json [{ "id": 1, "name": "Biscotte Restaurant", "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.", "created_by": { "id": 1, "firstname": "Paul", "lastname": "Bocuse", "username": null }, "updated_by": { "id": 1, "firstname": "Paul", "lastname": "Bocuse", "username": null }, "created_at": "2020-07-31T11:37:16.964Z", "updated_at": "2020-07-31T11:37:16.975Z", "categories": [{ "id": 2, "name": "French Food", "created_by": 1, "updated_by": 1, "created_at": "2020-07-31T11:36:23.164Z", "updated_at": "2020-07-31T11:36:23.172Z" }] }] ``` :::: ### Example :::: tabs ::: tab axios `./src/App.js` ```js import React from 'react'; import axios from 'axios' class App extends React.Component { // State of your application state = { restaurants: [], error: null } // Fetch your restaurants immediately after the component is mounted componentDidMount = async () => { try { const response = await axios.get('http://localhost:1337/restaurants'); this.setState({ restaurants: response.data }) } catch(error) { this.setState({ error }) } } render() { const { error, restaurant } = this.state // Print errors if any if (error) { return
An error occured: {error.message}
} return (
); } } export default App; ``` ::: ::: tab fetch `./src/App.js` ```js import React from 'react'; class App extends React.Component { // State of your application state = { restaurants: [], error: null } // Fetch your restaurants immediately after the component is mounted componentDidMount = async () => { // Parses the JSON returned by a network request const parseJSON = (resp) => (resp.json ? resp.json() : resp); // Checks if a network request came back fine, and throws an error if not const checkStatus = (resp) => { if (resp.status >= 200 && resp.status < 300) { return resp; } return parseJSON(resp).then((resp) => { throw resp; }); }; const headers = { 'Content-Type': 'application/json', }; try { const restaurants = await fetch("http://localhost:1337/restaurants", { method: "GET", headers: headers, }).then(checkStatus) .then(parseJSON); this.setState({ restaurants }) } catch (error) { this.setState({ error }) } } render() { const { error, restaurant } = this.state // Print errors if any if (error) { return
An error occured: {error.message}
} return (
); } } export default App; ``` ::: :::: ### POST Request your collection type Execute a POST request on the `restaurant` Collection Type in order to create a restaurant. Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission fot the `category` Collection type. :::: tabs ::: tab axios *Request* ```js import axios from 'axios' axios.post('http://localhost:1337/restaurants', { name: 'Dolemon Sushi', description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious', categories: [ 3 ] }) .then(response => { console.log(response); }) ``` ::: ::: tab fetch *Request* ```js fetch('http://localhost:1337/restaurants', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Dolemon Sushi', description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious', categories: [ 3 ] }) }).then(response => response.json()) .then(data => console.log(data)); ``` ::: *Response* ```json { "id": 2, "name": "Dolemon Sushi", "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious", "created_by": null, "updated_by": null, "created_at": "2020-08-04T09:57:11.669Z", "updated_at": "2020-08-04T09:57:11.669Z", "categories": [{ "id": 3, "name": "Japanese", "created_by": 1, "updated_by": 1, "created_at": "2020-07-31T11:36:23.164Z", "updated_at": "2020-07-31T11:36:23.172Z" }] } ``` :::: ### Example :::: tabs ::: tab axios `./src/App.js` ```js import React from 'react'; import axios from 'axios' class App extends React.Component { constructor(props) { super(props); // State of your application this.state = { modifiedData: { name: "", description: "", categories: [] }, allCategories: [], error: null }; } // Fetch your categories immediately after the component is mounted componentDidMount = async () => { try { const response = await axios.get('http://localhost:1337/categories'); this.setState({ allCategories: response.data }); } catch(error) { this.setState({ error }) } } handleInputChange = ({ target: { name, value } }) => { this.setState(prev => ({ ...prev, modifiedData: { ...prev.modifiedData, [name]: value } })); }; handleSubmit = async e => { e.preventDefault(); try { const response = await axios.post('http://localhost:1337/restaurants', this.state.modifiedData); console.log(response); } catch(error) { this.setState({ error }); } } renderCheckbox = category => { const { modifiedData: { categories } } = this.state; const isChecked = categories.includes(category.id); const handleChange = () => { if (!categories.includes(category.id)) { this.handleInputChange({ target: { name: "categories", value: categories.concat(category.id) } }); } else { this.handleInputChange({ target: { name: "categories", value: categories.filter(v => v !== category.id) } }); } }; return (
); }; render() { const { error, allCategories, modifiedData } = this.state; // Print errors if any if (error) { return
An error occured: {error.message}
; } return (

Restaurants



Select categories {allCategories.map(this.renderCheckbox)}

); } } export default App; ``` ::: ::: tab fetch `./src/App.js` ```js import React from "react"; // Parses the JSON returned by a network request const parseJSON = (resp) => (resp.json ? resp.json() : resp); // Checks if a network request came back fine, and throws an error if not const checkStatus = (resp) => { if (resp.status >= 200 && resp.status < 300) { return resp; } return parseJSON(resp).then((resp) => { throw resp; }); }; const headers = { 'Content-Type': 'application/json', }; class App extends React.Component { constructor(props) { super(props); this.state = { modifiedData: { name: "", description: "", categories: [] }, allCategories: [], error: null }; } componentDidMount = async () => { try { const allCategories = await fetch("http://localhost:1337/categories", { method: "GET", headers: headers, }).then(checkStatus) .then(parseJSON); this.setState({ allCategories }) } catch (error) { this.setState({ error }); } } handleInputChange = ({ target: { name, value } }) => { this.setState(prev => ({ ...prev, modifiedData: { ...prev.modifiedData, [name]: value } })); }; handleSubmit = async(e) => { e.preventDefault(); try { await fetch('http://localhost:1337/restaurants', { method: "POST", headers: headers, body: JSON.stringify(this.state.modifiedData) }) .then(checkStatus) .then(parseJSON); } catch (error) { this.setState({ error }) } }; renderCheckbox = category => { const { modifiedData: { categories } } = this.state; const isChecked = categories.includes(category.id); const handleChange = () => { if (!categories.includes(category.id)) { this.handleInputChange({ target: { name: "categories", value: categories.concat(category.id) } }); } else { this.handleInputChange({ target: { name: "categories", value: categories.filter(v => v !== category.id) } }); } }; return (
); }; render() { const { error, allCategories, modifiedData } = this.state; // Print error if any if (error) { return
An error occured: {error.message}
; } return (

Restaurants



Select categories {allCategories.map(this.renderCheckbox)}

); } } export default App; ``` ::: :::: ### PUT Request your collection type Execute a PUT request on the `restaurant` Collection Type in order to update the category of a restaurant. Be sure that you activated the `put` permission for the `restaurant` Collection Type. :::: tabs We consider that the id of your restaurant is `2` and the id of your category is `3` ::: tab axios *Request* ```js import axios from 'axios' axios.put('http://localhost:1337/restaurants/2', { categories: [ 3 ] }) .then(response => { console.log(response); }) ``` ::: ::: tab fetch *Request* ```js fetch('http://localhost:1337/restaurants/2', { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ categories: [ 3 ] }) }) .then(response => response.json()) .then(data => { console.log(data); }) ``` ::: *Response* ```json { "id": 2, "name": "Dolemon Sushi", "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious", "created_by": null, "updated_by": null, "created_at": "2020-08-04T10:21:30.219Z", "updated_at": "2020-08-04T10:21:30.219Z", "categories": [{ "id": 3, "name": "Japanese", "created_by": 1, "updated_by": 1, "created_at": "2020-08-04T10:24:26.901Z", "updated_at": "2020-08-04T10:24:26.911Z" }] } ``` :::: ## Conclusion Here is how to request your Collection Types in Strapi using React. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with. We just used the GET, POST and PUT methods here but you can [get one entry](../content-api/api-endpoints.html#get-an-entry), [get how much entry you have](../content-api/api-endpoints.html#count-entries) and [delete](../content-api/api-endpoints.html#delete-an-entry) an entry too. Learn more about [API Endpoints](../content-api/api-endpoints.html#api-endpoints)