fullstackreact/react-yelp-clone

Name: react-yelp-clone

Owner: Fullstack React

Description: Tutorial: Build a Yelp-clone in React

Created: 2016-05-20 00:54:57.0

Updated: 2018-05-24 01:55:04.0

Pushed: 2016-08-06 03:58:04.0

Homepage: https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/

Size: 1251

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

React Tutorial: Build a Yelp Clone

tl;dr - This is the code for our blog post which will guide you through building a full React app, even with little to no experience in the framework. We're going build a Yelp clone in React

See the demo and accompanying blog post.

Let's build a lightweight clone of Yelp using React.

In this tutorial we'll talk about:

• How to setup a new React project from scratch
• How to create a basic React component
• How to write modular CSS using postcss
• How to setup testing
• How route to different pages with react-router
• How to integrate with Google Maps
• How to write a Google Maps React component
• How to write a five-star rating component

We'll be tying in a lot of different pieces of React together to build a full-sized React app. This post will guide you through building a full React app, even with little to no experience in the framework.

Quickstart

First, clone the repository:

clone https://github.com/fullstackreact/react-yelp-clone.git react-yelp-clone
eact-yelp-clone

stall the dependencies
install

py configuration (see below)
env.example .env

art the server
start

Configuring the Application

This app uses dotenv for configuration. In order to configure the application for your own api access, grab an api token from Google here and set it in a file called .env at the root for a key called __GAPI_KEY__. For instance, say that your gapi key is: abc123. Your .env file should look like:

_KEY=abc123

You can also create this file by copying the .env.example file at the root:

env.example .env

Starting the Application

install 
start

Libraries We'll Use

This app uses the following technologies:

• webpack
• postcss
• hjs-webpack
• react.js
• react-router
• Google Maps API
• google-maps-react npm
• enzyme
• chai
• And much much more

Running the Tests

The application is built using tests, including the fantastic enzyme and chai libraries. To run the tests, use the npm test script:

run test

Check out the blog post for more information on how this app was built and a complete tutorial on using React to build your own apps.

Contributing

clone https://github.com/fullstackio/yelp-clone.git yelp
elp
install
start

---

Fullstack React Book

This app was built alongside the blog post React Tutorial: Cloning Yelp.

This repo was written and is maintained by the Fullstack React team. In the book we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.

This app is only one of several apps we have in the book. If you're looking to learn React, there's no faster way than by spending a few hours with the Fullstack React book.

License

MIT