An example application that retrieves the issues from a particular Github repository and displays them. Includes pagination and some light filtering functionality. Clicking on an issue reveals the body with Gihub markdown parsed to display as HTML in the preview box. This particular repository is structured like a standalone React app, but it only consists of one main component, GithubIssues.jsx, that takes two props: 'user' & repo'. All of the other components are rendered as children to Changing the 'user' and 'repo' props of the GithubIssues component will initally render the issues for that user/repository accordingly. Clicking the left icon in the nav header opens a modal where you can enter a new user/repository to load dynamically.
-
React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
React Swipeable - React swipe event handler component & hook
-
react-fontawesome - Font Awesome 5 React component using SVG with JS
<!DOCTYPE html>
<html class="has-navbar-fixed-bottom has-navbar-fixed-top">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Github Issues Example"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Github Issues</title>
</head>
<body>
<div id="root"></div>
</body>
</html>import ReactDOM from 'react-dom';
import './css/index.css';
import App from './app/App';
import * as serviceWorker from './utils/serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.register();import React from 'react';
import GithubIssues from '../components/GithubIssues.jsx'
function App() {
return (
<>
<div className="App">
<GithubIssues user="facebook" repo="react" />
</div>
</>
);
}
export default App;To get a local copy up and running follow these simple steps.
- Clone the github-issues-react-example
git clone https:://github.com/atomize/github-issues-react-example.git- Install dependencies
yarn install- Start the development server
yarn startRuns the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
- Run interactive tests
yarn testLaunches the test runner in the interactive watch mode.
See the section about running tests for more information.
- Build bundle for production
yarn buildDistributed under the MIT License.
Berti - jonathan.berti@gmail.com
Project Link: https://github.com/atomize/github-issues-react-example/