项目作者: buralog

项目描述 :
A responsive Single-Page Application made with Reactjs and React-Router.
高级语言: JavaScript
项目地址: git://github.com/buralog/react-twitch-app.git
创建时间: 2019-02-22T11:16:37Z
项目社区:https://github.com/buralog/react-twitch-app

开源协议:

下载


ReacTwitch

ReacTwitch is a responsive React Single-Page Application that utilises React Select dropdown library to search dynamically and load data via Twitch API asynchronously. This project was bootstrapped with Create React App.

Demo

ReacTwitch - Live Demo

Stack

Tool Description
React A JavaScript library for building user interfaces
React Router Declarative routing for React
React Bootstrap The most popular front-end framework Rebuilt for React.
React Select A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
Node-Sass Node-sass allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
Axios Promise based HTTP client for the browser and node.js
Moment.js Parse, validate, manipulate, and display dates and times in JavaScript.
Toastr Simple Javascript toast notifications
Lodash A modern JavaScript utility library delivering modularity, performance & extras.
PropTypes Runtime type checking for React props and similar objects.
Jest Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
Enzyme Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output.

Installation

1 - Clone the project and install the dependencies:

Node.js is required to get npm.

  1. $ git clone https://github.com/buralog/react-twitch-app.git
  2. $ cd react-twitch-app
  3. $ npm install

2 - Setup:

Twitch API Key is required to run the project.

Note: This app is currently using Twitch API v5. Make sure you use the correct version of API.

You need to have an .env environment file for your API key:

  1. REACT_APP_TWITCH_KEY = your key

Use your key in src > services > Twitch.js file:

  1. const client_id = process.env.REACT_APP_TWITCH_KEY;

3 - Run the app:

  1. $ npm start

Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.

You will see the build errors and lint warnings in the console.

Testing

  1. $ npm test

Runs the test watcher in an interactive mode.

By default, runs tests related to files changed since the last commit.