Initializated CRUD Place

crud-place/src/App.js

@@ -0,0 +1,12 @@
+import Header from "./components/Header/Header";
+
+function App() {
+  return (
+    <Header
+      color={'rgb(123, 169, 255)'}
+      text={'CRUD Place'}
+    />
+  );
+}
+
+export default App;

crud-place/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

crud-place/src/components/Button/Button.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Button = ({text, action}, props) => {
+
+    console.log(action);
+    return (
+        <button
+            onClick={
+                () => window.location = '../'
+            }
+        >
+            {text}
+        </button>
+    )
+}
+
+export default (Button)

crud-place/src/components/Header/Header.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Header = (props) => {
+
+    console.log(props);
+    
+    const Header = styled.header`
+
+        background-color: ${props.color};
+        
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    `
+
+    return (
+        <Header>
+            <h1>{props.text}</h1>
+            {props.additionalChildren ? props.additionalChildren : null}
+        </Header>
+    )
+}
+
+export default Header

crud-place/src/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

crud-place/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

crud-place/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';