React

mysql.php

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

define("MYSQL_SERVERNAME", "localhost");
define("MYSQL_USERNAME", "root");
define("MYSQL_PASSWORD", "");
define("MYSQL_DB", "react");

//Mysql
function db_connect() {
	// Define connection as a static variable, to avoid connecting more than once
	static $connection;
	// Try and connect to the database, if a connection has not been established yet
	if(!isset($connection)) {
		// Load configuration as an array. Use the actual location of your configuration file
		$connection = mysqli_connect(MYSQL_SERVERNAME,MYSQL_USERNAME,MYSQL_PASSWORD,MYSQL_DB);
	}
	// If connection was not successful, handle the error
	if($connection === false) {
		// Handle error - notify administrator, log to a file, show an error screen, etc.
		return mysqli_connect_error();
	}
	return $connection;
}
function db_query($query) {
	// Connect to the database
	$connection = db_connect();
	// Query the database
	$result = mysqli_query($connection,$query);
	return $result;
}
function db_select($query) {
	$rows = array();
	$result = db_query($query);
	// If query failed, return `false`
	if($result === false) {
		return false;
	}
	// If query was successful, retrieve all the rows into an array
	while ($row = mysqli_fetch_assoc($result)) {
		$rows[] = $row;
	}
	return $rows;
}
function db_select_row($query) {
	$result = db_query($query);
	$row = mysqli_fetch_assoc($result);
	return $row;
}

db_connect();
$rows = db_select("SELECT * FROM samples");
echo json_encode($rows);

Sample.js

import { Component } from 'react'

class Sample extends Component {

    render() {
        const { title, description, body } = this.props
        return (
            <div className="member">
                <h1>{title}</h1>
                <p>{description}</p>
                <p>{body}</p>
            </div>
        )
    }
}

export default Sample

Samples.js

import React, {Component} from 'react'
import {SamplesCarousel} from "./SamplesCarousel";
import fetch from 'isomorphic-fetch'
import Sample from './Sample'

class Samples extends Component {

    constructor(props) {
        super(props);
        this.state = {
            samples: []
        }
    }

    componentDidMount() {
        this.setState({loading: true});
        fetch('http://localhost/react/dist/mysql.php')
            .then(response => response.json())
            .then(json => json.results)
            .then(samples => this.setState({
                samples
            }))
    }

    render() {
        const { samples } = this.state;
        return (
            <div>
                <SamplesCarousel/>
                <div className="container">
                    <h1>Samples</h1>
                    {(samples.length) ?
                        samples.map(
                            (sample, i) =>
                                <Sample key={i}
                                        title={sample.title}
                                        description={sample.description}
                                        body={sample.body}
                                />
                        ):
                        <span>Currently 0 Samples </span>
                    }
                </div>
            </div>
        )
    }
}
export default Samples