first commit

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

src/App.js

@@ -1,26 +1,45 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+
+import * as styles from "./mod.module.css";
+
+const arr = [{ title: "1" }, { title: "2" }, { title: "3" }, { title: "4" }, { title: "5" }, { title: "6" }];
+
+const arr2 = [
+	{ title: "12" },
+	{ title: "22" },
+	{ title: "32" },
+	{ title: "42" },
+	{ title: "52" },
+	{ title: "62" }
+];
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	const sum = arr.reduce((prev, el) => prev + el, 0);
+	console.log("styles", styles);
+
+	return (
+		<div className="App">
+			<header className="App-header">
+				<img src={logo} className="App-logo" alt="logo" />
+				<p>
+					Edit <code>src/App.js</code> and save to reload.
+				</p>
+				<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+					Learn React
+				</a>
+			</header>
+			<div className={styles.dude}>Hello its my first meet with react</div>
+			<div>
+				<ul>
+					{arr2.map(el => (
+						<li className="foo">{el.title} </li>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
 }
 
 export default App;

src/index.js

@@ -1,10 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import "./style.scss";
+
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/mod.module.css

@@ -0,0 +1,3 @@
+.dude {
+	color: blue;
+}

src/style.scss

@@ -0,0 +1,3 @@
+.foo {
+	color: green;
+}