Adding the merged files

package.json

@@ -6,7 +6,10 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+<<<<<<< HEAD
     "big-js": "^3.1.3",
+=======
+>>>>>>> e20629e4382bf10ba82127a0098450a94869ac01
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

src/App.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './App';
+import App from './components/App';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);

src/components/App.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import '../App.css';
+import Display from './Display';
+import ButtonPanel from './ButtonPanel';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Display result="0" />
+        <ButtonPanel />
+      </div>
+    );
+  }
+}
+
+
+export default App;

src/components/Button.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Proptypes from 'prop-types';
+
+const button = props => {
+  const { name } = props;
+  return (
+    <button type="button">{name}</button>
+  );
+};
+
+button.defaultProps = {
+  name: '',
+};
+
+button.propTypes = {
+  name: Proptypes.string,
+};
+
+export default button;

src/components/ButtonPanel.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from './Button';
+
+const buttonPanel = () => (
+  <div>
+    <div className="group-1">
+      <Button name="AC" />
+      <Button name="+/-" />
+      <Button name="%" />
+      <Button name="+" />
+    </div>
+    <div className="group-2">
+      <Button name="7" />
+      <Button name="8" />
+      <Button name="9" />
+      <Button name="X" />
+    </div>
+    <div className="group-3">
+      <Button name="4" />
+      <Button name="5" />
+      <Button name="6" />
+      <Button name="-" />
+    </div>
+    <div className="group-4">
+      <Button name="1" />
+      <Button name="2" />
+      <Button name="3" />
+      <Button name="+" />
+    </div>
+    <div className="group-5">
+      <Button name="0" />
+      <Button name="." />
+      <Button name="=" />
+    </div>
+  </div>
+);
+
+
+export default buttonPanel;

src/components/Display.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Proptypes from 'prop-types';
+
+const display = props => {
+  const { result } = props;
+  return (
+    <div>
+      {result}
+    </div>
+  );
+};
+
+display.defaultProps = {
+  result: '0',
+};
+
+display.propTypes = {
+  result: Proptypes.string,
+};
+export default display;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/serviceWorker.js

@@ -1,6 +1,10 @@
 // This optional code is used to register a service worker.
 // register() is not called by default.
 /* eslint-disable */
+<<<<<<< HEAD
+=======
+
+>>>>>>> e20629e4382bf10ba82127a0098450a94869ac01
 
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)