React developer - razvojni put, saveti?

Redmond

Veoma poznat
Moderator
Poruka
13.282
za mesec dana pocinjem da radim kao react programer.
čestitam kolega

prijavio sam se na 50ak mesta frontend u zadnjih 13 dana. i imao jedno 30 online intervjua. Pozvan na par mesta da dodjem i svi pitaju da li znas react, svi do jednog. **** im react mater
a šta si ti mislio? da ćeš bez frameworka da programiraš... no no :nono3:
 

bmaxa

Buduća legenda
Poruka
29.616
Jedna konstanta na ovom forumu se nikada nece promeniti:

bumerska posle forumasa bmaxe koji mraci i baca u depresiju svakog ko zeli da bude programer.......


.....meni je prosli pit rekao da treba tipa 20 godina ucenja da bi postao programer ili tako nesto......
Ne treba 20, jedno 5. Zavisi šta hoćeš da radiš... otprilike kolko traje fakultet za to. Naravno ako hoćeš da radiš samo usku oblast
i da ne znaš ništa drugo, može i kraće...
 

pivosok

Buduća legenda
Poruka
25.918
import axios from "axios";
import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import Workers from "./Workers";
import "./App.css";
import AddModal from "./AddModal";
function App() {
const [allState, setAllState] = useState({
workers: [],
isModalAdd: false,
isLoading: true,
});
const LOCAL_STORAGE_KEY = "app.worker";
const workerRef = useRef();
useEffect(() => {
getWorkersInfo();
}, []);
function getWorkersInfo() {
{
axios.get("/workers").then(function (response) {
setAllState({ workers: response.data });
allState.isLoading = false;
});
}
}
function handleAddWorker(name, surname, birth, arr, addFriendsFunction) {
if (name === "" || surname === "" || !birth) {
alert("you need to fill all fields");
return;
}
axios
.post("/schreib", {
name: name,
surname: surname,
birth: birth,
})
.then((res) => {
console.log(res.data);
const newWorker = [
...allState.workers,
{
id: res.data,
name: name,
surname: surname,
birth: birth,
},
];
setAllState({ workers: newWorker });
addFriendsFunction(res.data, arr);
updateNumberOfFriend();
});
}
function handleRemoveWorker(id) {
if (confirm("do you like to delete") == true) {
axios.delete("/delete/worker/" + id).then(() => {
const newWorker = allState.workers.filter(
(worker) => worker.id !== id
);
setAllState({ workers: newWorker });
updateNumberOfFriend();
});
}
}
function handleSearchWorker(e) {
const name = workerRef.current.value;
const copyWorkerArr = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
);
const searchWorkers = copyWorkerArr.filter((elWorker) => {
const nameSurname = elWorker.name + " " + elWorker.surname;
return nameSurname.toLowerCase().includes(name.toLowerCase());
});
console.log(searchWorkers);
setAllState({ workers: searchWorkers });
}
function handleOnFocus() {
localStorage.setItem(
LOCAL_STORAGE_KEY,
JSON.stringify([...allState.workers])
);
}
function handleOnFokusOut() {
setAllState({
workers: JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)),
});
}
function updateNumberOfFriend() {
getWorkersInfo();
}
function ShowAddModal() {
handleShowModal(true);
}
function handleShowModal(value) {
const clone = structuredClone(allState);
clone.isModalAdd = value;
setAllState(clone);
console.log(allState.workers);
}
return (
<>
<div
className={"main".concat(allState.isLoading ? " loading" : "")}
>
<h1>List of all workers dd</h1>
<input
type="text"
ref={workerRef}
onChange={handleSearchWorker}
onFocus={handleOnFocus}
onBlur={handleOnFokusOut}
className="inputSearch"
placeholder="worker search"
></input>
<button className="addButton" onClick={ShowAddModal}>
addWorker
</button>
<Workers
workers={allState.workers}
handleRemoveWorker={handleRemoveWorker}
getWorkersInfo={getWorkersInfo}
/>
{allState.isModalAdd ? (
<AddModal
workers={allState.workers}
handleShowModal={handleShowModal}
handleAddWorker={handleAddWorker}
/>
) : (
<></>
)}
</div>
</>
);
}
export default App;

import React, { useRef, useState, useEffect } from "react";
import FriendChange from "./FriendChange";
import axios from "axios";
export default function ChangeModal({
worker,
showChangeModal,
getWorkersInfo,
}) {
const inputRef = useRef({});
const [changedWorker, setChangedWorker] = useState({
workerUpdate: worker,
friendArray: [],
});
useEffect(() => {
friendListCheckbox();
}, []);
function friendListCheckbox() {
axios.post("/worker/friends/" + worker.id).then((response) => {
updateFriendArray(response.data);
});
}
function toggleFriend(id) {
const newWorker = structuredClone(changedWorker);
const indexFriend = newWorker.friendArray.find(
(element) => element.id == id
);
indexFriend.total = (indexFriend.total + 1) % 2;
const arr = newWorker.friendArray;
console.log(friendArrayID(arr));
setChangedWorker(newWorker);
}
function updateFriendArray(arr) {
const clone = structuredClone(changedWorker);
clone.friendArray = arr;
setChangedWorker(clone);
console.log(clone.friendArray);
}
function updateName() {
const clone = structuredClone(changedWorker);
clone.workerUpdate.name = inputRef.current["name"].value;
setChangedWorker(clone);
}
function updateSurname() {
const clone = structuredClone(changedWorker);
clone.workerUpdate.surname = inputRef.current["surname"].value;
setChangedWorker(clone);
}
function updateBirth() {
const clone = structuredClone(changedWorker);
clone.workerUpdate.birth = inputRef.current["birth"].value;
setChangedWorker(clone);
}
function updateWorker() {
saveUpdatededWorker();
}
function removeModalChange() {
showChangeModal(false);
}
function friendArrayID(array) {
const arr = [];
array.map((e) => {
if (e.total) arr.push(e.id);
console.log(e);
});
return arr;
}
function saveUpdatededWorker() {
axios
.post("/update", {
id: changedWorker.workerUpdate.id,
name: changedWorker.workerUpdate.name,
surname: changedWorker.workerUpdate.surname,
birth: changedWorker.workerUpdate.birth,
})
.then(() => {
axios
.post("/removefriends", {
id: worker.id,
})
.then(() => {
const arrr = changedWorker.friendArray;
const arrrFriends = friendArrayID(arrr);
axios.post("/addfriends", {
dataFriend: arrrFriends.map((el) => {
return {
first_friend: el,
second_friend: worker.id,
};
}),
});
})
.then(() => {
getWorkersInfo();
removeModalChange();
console.log("uspesno ste updejtovali");
});
});
}
return (
<div className="viewChangeModal">
<div>
<input
ref={(el) => (inputRef.current["name"] = el)}
placeholder="First Name"
value={changedWorker.workerUpdate.name}
onChange={updateName}
></input>
<input
ref={(el) => (inputRef.current["surname"] = el)}
placeholder="surname"
value={changedWorker.workerUpdate.surname}
onChange={updateSurname}
></input>
<input
ref={(el) => (inputRef.current["birth"] = el)}
placeholder="birth"
type="date"
value={changedWorker.workerUpdate.birth}
onChange={updateBirth}
></input>
<p>{changedWorker.workerUpdate.name}</p>
<button onClick={removeModalChange}>back</button>
<button onClick={updateWorker}>save</button>
</div>
<FriendChange
id={changedWorker.workerUpdate.id}
arr={changedWorker.friendArray}
toggle={toggleFriend}
></FriendChange>
</div>
);
}
 

pivosok

Buduća legenda
Poruka
25.918
import React, { useRef, useState } from "react";
import FriendND from "./FriendND";
import axios from "axios";
import { isNull } from "lodash";
export default function AddModal({
handleAddWorker,
handleShowModal,
workers,
}) {
const inputRef = useRef({});
const [arrayFriendState, setArrayFriendState] = useState([]);
function removeModal() {
handleShowModal(false);
}
function addWorker() {
handleAddWorker(
inputRef.current["name"].value,
inputRef.current["surname"].value,
inputRef.current["birth"].value,
arrayFriendState,
handleAddWorkerFriends
);
}
function handleAddWorkerFriends(id, arrayOfFriends) {
axios.post("/addfriends", {
dataFriend: arrayOfFriends.map((el) => {
return { first_friend: el, second_friend: id };
}),
});
}
function setFriendArray(array) {
const arr = [];
array.map((e, i) => {
if (e.checked) arr.push(i);
console.log(i);
});
setArrayFriendState(arr);
console.log(arr);
}
return (
<div className="viewAddModal">
<div>
<input
ref={(el) => (inputRef.current["name"] = el)}
placeholder="First Name"
></input>
<input
ref={(el) => (inputRef.current["surname"] = el)}
placeholder="surname"
></input>
<input
ref={(el) => (inputRef.current["birth"] = el)}
placeholder="birth"
type="date"
defaultValue={null}
></input>
<button onClick={removeModal}>back</button>
<button onClick={addWorker}>save</button>
</div>
<FriendND
workers={workers}
setFriendArray={setFriendArray}
></FriendND>
</div>
);
}
 

bmaxa

Buduća legenda
Poruka
29.616
import React, { useRef, useState } from "react";
import FriendND from "./FriendND";
import axios from "axios";
import { isNull } from "lodash";
export default function AddModal({
handleAddWorker,
handleShowModal,
workers,
}) {
const inputRef = useRef({});
const [arrayFriendState, setArrayFriendState] = useState([]);
function removeModal() {
handleShowModal(false);
}
function addWorker() {
handleAddWorker(
inputRef.current["name"].value,
inputRef.current["surname"].value,
inputRef.current["birth"].value,
arrayFriendState,
handleAddWorkerFriends
);
}
function handleAddWorkerFriends(id, arrayOfFriends) {
axios.post("/addfriends", {
dataFriend: arrayOfFriends.map((el) => {
return { first_friend: el, second_friend: id };
}),
});
}
function setFriendArray(array) {
const arr = [];
array.map((e, i) => {
if (e.checked) arr.push(i);
console.log(i);
});
setArrayFriendState(arr);
console.log(arr);
}
return (
<div className="viewAddModal">
<div>
<input
ref={(el) => (inputRef.current["name"] = el)}
placeholder="First Name"
></input>
<input
ref={(el) => (inputRef.current["surname"] = el)}
placeholder="surname"
></input>
<input
ref={(el) => (inputRef.current["birth"] = el)}
placeholder="birth"
type="date"
defaultValue={null}
></input>
<button onClick={removeModal}>back</button>
<button onClick={addWorker}>save</button>
</div>
<FriendND
workers={workers}
setFriendArray={setFriendArray}
></FriendND>
</div>
);
}
ubaci u <code=js> </code>
 

pivosok

Buduća legenda
Poruka
25.918
@Redmond, @bmaxa imao sam danas intervju za senior react programera. treci krug, sa cetiri coveka, dobio da vizualiziram bubble sort tokom intervju. 1.5h vremena radio, zvuk se slucajno iskljucio 10 minuta na oko sat vremena, kad pogledam oni i dalje gledaju, a pisali pre 10 minuta da nemam zvuk, bio bas koncentrisan. ovo je code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>

#graf{
display: grid;

grid-column-gap: 5px;
padding:50px;
}

.element{
border:1px solid black;
padding-top: 10px;
}

body{
display:flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

span{
display: block;

font-size: 16px;
}

</style>

<body>
<input type="number" >
<div id="graf"></div>


</body>
<script>

const GRID_COLUMN_SIZE_IN_UNIT = "30px";
const HEIGH_OF_COLUMNS = 300;

const SPEED = 120;
let arr = new Array(20);

arr = arr.fill().map((el) => Math.floor(Math.random() * 115));

function draw(arr, indexOfRed) {
centerlize(arr, "graf");

const allElements = arr.map((value, i) => {
const arrElement = document.createElement("div");
arrElement.style.gridColumnStart = i + 1;
if (indexOfRed == i - 1) arrElement.style.backgroundColor = "red";
arrElement.innerHTML = `<span>${value}</span>`;
arrElement.style.height = value * skalieren(arr) + "px";
arrElement.classList.add("element");
return arrElement;
});

return allElements;
}

function skalieren(arr) {
const max = Math.max(...arr);
const ratio = HEIGH_OF_COLUMNS / max;
return ratio;
}

function centerlize(arr, gridIDName) {
const grid = document.getElementById(gridIDName);
if (arr.length > 25) {
grid.style.gridTemplateColumns = `repeat(${arr.length},1fr)`;
grid.style.gridGap = "2px";
} else grid.style.gridTemplateColumns = `repeat(${arr.length},30px)`;
}
const bubbleSort = (inputArr) => {
let copyInputArr = [...inputArr];
let bigArr = [];
const len = copyInputArr.length;
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - i - 1; j++) {
console.log(j, i);
if (copyInputArr[j] > copyInputArr[j + 1])
[copyInputArr[j], copyInputArr[j + 1]] = [copyInputArr[j + 1], copyInputArr[j]];

bigArr.push({ ar: [...copyInputArr], indexj: j });
console.log(bigArr);
}
}

return bigArr;
};

let i = 0;
myInterval = setInterval(setUpdate, SPEED);
const bigArr = bubbleSort(arr);
function setUpdate() {
document.getElementById("graf").innerHTML = ``;
i++;
document
.getElementById("graf")
.append(...draw(bigArr.ar, bigArr.indexj));
if (i + 2 > bigArr.length) clearInterval(myInterval);
}



</script>
</html>
 

bmaxa

Buduća legenda
Poruka
29.616
@Redmond, @bmaxa imao sam danas intervju za senior react programera. treci krug, sa cetiri coveka, dobio da vizualiziram bubble sort tokom intervju. 1.5h vremena radio, zvuk se slucajno iskljucio 10 minuta na oko sat vremena, kad pogledam oni i dalje gledaju, a pisali pre 10 minuta da nemam zvuk, bio bas koncentrisan. ovo je code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>

#graf{
display: grid;

grid-column-gap: 5px;
padding:50px;
}

.element{
border:1px solid black;
padding-top: 10px;
}

body{
display:flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

span{
display: block;

font-size: 16px;
}

</style>

<body>
<input type="number" >
<div id="graf"></div>


</body>
<script>

const GRID_COLUMN_SIZE_IN_UNIT = "30px";
const HEIGH_OF_COLUMNS = 300;

const SPEED = 120;
let arr = new Array(20);

arr = arr.fill().map((el) => Math.floor(Math.random() * 115));

function draw(arr, indexOfRed) {
centerlize(arr, "graf");

const allElements = arr.map((value, i) => {
const arrElement = document.createElement("div");
arrElement.style.gridColumnStart = i + 1;
if (indexOfRed == i - 1) arrElement.style.backgroundColor = "red";
arrElement.innerHTML = `<span>${value}</span>`;
arrElement.style.height = value * skalieren(arr) + "px";
arrElement.classList.add("element");
return arrElement;
});

return allElements;
}

function skalieren(arr) {
const max = Math.max(...arr);
const ratio = HEIGH_OF_COLUMNS / max;
return ratio;
}

function centerlize(arr, gridIDName) {
const grid = document.getElementById(gridIDName);
if (arr.length > 25) {
grid.style.gridTemplateColumns = `repeat(${arr.length},1fr)`;
grid.style.gridGap = "2px";
} else grid.style.gridTemplateColumns = `repeat(${arr.length},30px)`;
}
const bubbleSort = (inputArr) => {
let copyInputArr = [...inputArr];
let bigArr = [];
const len = copyInputArr.length;
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - i - 1; j++) {
console.log(j, i);
if (copyInputArr[j] > copyInputArr[j + 1])
[copyInputArr[j], copyInputArr[j + 1]] = [copyInputArr[j + 1], copyInputArr[j]];

bigArr.push({ ar: [...copyInputArr], indexj: j });
console.log(bigArr);
}
}

return bigArr;
};

let i = 0;
myInterval = setInterval(setUpdate, SPEED);
const bigArr = bubbleSort(arr);
function setUpdate() {
document.getElementById("graf").innerHTML = ``;
i++;
document
.getElementById("graf")
.append(...draw(bigArr.ar, bigArr.indexj));
if (i + 2 > bigArr.length) clearInterval(myInterval);
}



</script>
</html>
Nije ti baš ponajbolji bubble sort, treba unutrašnja petlja da ide od i+1...<len i ima optimizacija da ako ne uradi nijedan flip da odmah izađeš iz petlje ČP
 

Redmond

Veoma poznat
Moderator
Poruka
13.282
@Redmond, @bmaxa imao sam danas intervju za senior react programera. treci krug, sa cetiri coveka, dobio da vizualiziram bubble sort tokom intervju. 1.5h vremena radio, zvuk se slucajno iskljucio 10 minuta na oko sat vremena, kad pogledam oni i dalje gledaju, a pisali pre 10 minuta da nemam zvuk, bio bas koncentrisan. ovo je code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>

#graf{
display: grid;

grid-column-gap: 5px;
padding:50px;
}

.element{
border:1px solid black;
padding-top: 10px;
}

body{
display:flex;
justify-content: center;
flex-direction: column;
align-items: center;
}

span{
display: block;

font-size: 16px;
}

</style>

<body>
<input type="number" >
<div id="graf"></div>


</body>
<script>

const GRID_COLUMN_SIZE_IN_UNIT = "30px";
const HEIGH_OF_COLUMNS = 300;

const SPEED = 120;
let arr = new Array(20);

arr = arr.fill().map((el) => Math.floor(Math.random() * 115));

function draw(arr, indexOfRed) {
centerlize(arr, "graf");

const allElements = arr.map((value, i) => {
const arrElement = document.createElement("div");
arrElement.style.gridColumnStart = i + 1;
if (indexOfRed == i - 1) arrElement.style.backgroundColor = "red";
arrElement.innerHTML = `<span>${value}</span>`;
arrElement.style.height = value * skalieren(arr) + "px";
arrElement.classList.add("element");
return arrElement;
});

return allElements;
}

function skalieren(arr) {
const max = Math.max(...arr);
const ratio = HEIGH_OF_COLUMNS / max;
return ratio;
}

function centerlize(arr, gridIDName) {
const grid = document.getElementById(gridIDName);
if (arr.length > 25) {
grid.style.gridTemplateColumns = `repeat(${arr.length},1fr)`;
grid.style.gridGap = "2px";
} else grid.style.gridTemplateColumns = `repeat(${arr.length},30px)`;
}
const bubbleSort = (inputArr) => {
let copyInputArr = [...inputArr];
let bigArr = [];
const len = copyInputArr.length;
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - i - 1; j++) {
console.log(j, i);
if (copyInputArr[j] > copyInputArr[j + 1])
[copyInputArr[j], copyInputArr[j + 1]] = [copyInputArr[j + 1], copyInputArr[j]];

bigArr.push({ ar: [...copyInputArr], indexj: j });
console.log(bigArr);
}
}

return bigArr;
};

let i = 0;
myInterval = setInterval(setUpdate, SPEED);
const bigArr = bubbleSort(arr);
function setUpdate() {
document.getElementById("graf").innerHTML = ``;
i++;
document
.getElementById("graf")
.append(...draw(bigArr.ar, bigArr.indexj));
if (i + 2 > bigArr.length) clearInterval(myInterval);
}



</script>
</html>
u jbt sta je uopste bubble sort ... sta se ovde trazi da uradis? ovde kod mene u konzoli izgleda upada u neku beskonacnu petlju
 
Da biste mogli da kreirate nove teme, trajno koristite svoje ime i ne pogađate stalno slike - kliknite ovde da se registrujete.

Top
  Blokirali ste reklame
Dragi prijatelju, nemojte da blokirate reklame - isključite Ad Blocker na Forumu, jer će tako mesto vaših susreta na Krstarici ostati besplatno za korišćenje.