React developer - razvojni put, saveti?

Redmond

Veoma poznat
Moderator
Poruka
13.206
za mesec dana pocinjem da radim kao react programer.
čestitam kolega
Poruka je automatski spojena:

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
25.796
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.697
imam problem, web stranica radi sa bazom perfektrno na lokalnom serveru, medjutim kad je hostujem i uploadujem bazu podataka dolazi do skroz komicnih rezultta, kakvi se ne bi trebali pojavljivati. tj ne pojavljuju se nikad na localserveru. probao sam app na local i sve radi odlicno.
 

pivosok

Buduća legenda
Poruka
25.697
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;
Poruka je automatski spojena:

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.697
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
25.796
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>
 

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.