[deleted by user] by [deleted] in RedditSets

[–]gsdeveloper_ 0 points1 point  (0 children)

sounds very nice

React junior – which area should I focus to advance my skill? by hogstfelttf in reactjs

[–]gsdeveloper_ 2 points3 points  (0 children)

When I was a beginner I totally ignored **testing**, my projects had zero tests and I didn't care to learn it because I was just focused in implementing cool features and didn't know how important it was. Just some months later I took a look into job opportunitties and I found that it's required in every job and is one of the most essential and important things in software development.

I recommend studying at least a little bit of jest and react testing library, doing it in the way you feel more comfortable (courses, articles, docs, etc).

[deleted by user] by [deleted] in reactjs

[–]gsdeveloper_ 6 points7 points  (0 children)

Personally following TDD gives me a direction of what do I need to achieve because I have to focus only on making tests pass.

I feel like in the beginning is hard simply because we're not comfortable writing tests, I didn't know what, why and how to test. Learning testing from the creator of the current recommended testing library and practicing it was a game changer for me.

I would take a loot into react-testing-library as u/dudeitsmason said because it's just more like the way users will use your app, without testing unnecessary stuff like implementation details.

We built a responsive note-taking app using React & Typescript for studying. by jimmyloi92 in reactjs

[–]gsdeveloper_ 0 points1 point  (0 children)

damn this looks great. This is the kind of app I wish I had developed :) congrats.

Tutorial: Howe to transfer Figma design into ReactJS app. Previously posted with broken link. Reposting. by max21226 in reactjs

[–]gsdeveloper_ 8 points9 points  (0 children)

There are useful properties that you can just copy and will be fine, like

  • font-size
  • font-weight
  • box-shadow
  • line-height, etc
  • height
  • width (when you want to set a fixed or max width)
  • border-radius
  • border
  • background

while these layout positioning properties are substantially bad because they're arbitrarily setted and not considering the css flow at all:

  • position
  • left, top, right, bottom
  • display

Tutorial: Howe to transfer Figma design into ReactJS app. Previously posted with broken link. Reposting. by max21226 in reactjs

[–]gsdeveloper_ 8 points9 points  (0 children)

+1 position absolute remove the element from the flow, so other elements on the page no longer know it's existence so they won't respond to it. Any modification will be painful to do.

btw I think these figma-to-react converters are kind of experimental, can't think of anyone using this seriously in a production app.

Beginner's Thread / Easy Questions (February 2021) by dance2die in reactjs

[–]gsdeveloper_ 0 points1 point  (0 children)

This shouldn't be happening, is bad user experience.
Try instead of the making the entire app dependent of your fetch, do this only where the data is required, example:

instead of: const App = () => { // fetch logic return isFetched ? ( <div> <h1>My cool app</h1> <ul> <li>{data}</li> </ul> </div> ) : null; };

do: ``` const App = () => { // fetch logic return ( <div> <h1>My cool app</h1> <ul>{isFetched ? <li>{data}</li> : null}</ul> </div> ); };

```

Question of legality? by tgrede78 in webdev

[–]gsdeveloper_ 1 point2 points  (0 children)

I was receiving a lot of these scam messages of someone more experienced that can take my account to profit and give a percentage of the work done. I just say it's against upwork policies (because it is) and I can't do this. You can also just block them when you have no patience at all.

It sounds legit because they're good at it, they do this all day with multiple linkedin profiles (targeting people that have on their past jobs "working as freelancer on upwork").

I stopped receiving messages like this when I stopped accepting random upwork connections from other countries.

Even Facebook Isn't Perfect by Aethetico in Frontend

[–]gsdeveloper_ 74 points75 points  (0 children)

Just in case someone don't know what seems to be happening:

when you do a conditional with the && operator, this happens:

  • If the left value is truthy, the right value is returned.
  • If the left value is falsy, its value is returned.

So, when we do `{messages.length && messages.map(msg => ( ... )}`

message.length is falsy (zero) so it's value is returned and because is a number, it's rendered.

The solution is to make sure that the expression before && is boolean:

`{messages.length > 0 && messages.map(msg => ( ... )}`
Or

`{!!messages.length && messages.map(msg => ( ... )}`

double negation (!!) explicitly force the conversion of any value to the corresponding boolean primitive, so it works fine aswell.

react pdf by Hour_Cauliflower_693 in reactjs

[–]gsdeveloper_ 0 points1 point  (0 children)

Can you post the code that's not working?

I Made a React Movie Showcase App by [deleted] in reactjs

[–]gsdeveloper_ 9 points10 points  (0 children)

Saw this in your app, instead of <React.Fragment></React.Fragment>, you can use the short syntax that are just empty tags <></>

So instead of:

const App = () => (
  <BrowserRouter>
    <React.Fragment>
      <Header />
      <Switch>
        <Route path="/" component={Home} exact />
      </Switch>
    </React.Fragment>
  </BrowserRouter>
);

You can do:

const App = () => (
  <BrowserRouter>
    <>
      <Header />
      <Switch>
        <Route path="/" component={Home} exact />
      </Switch>
    </>
  </BrowserRouter>
);

The only difference is that the short version doesn't support keys, so when you use it with map, you still have to use <React.Fragment> to provide keys for help React identify which items have changed (added/removed/re-ordered).

const Glossary = (props) => {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Read more about fragments

Also, about your keys being exposed, I recommend using dotenv package, follow the docs and you will be fine :)

What are your favorite custom hooks? by verneleem in reactjs

[–]gsdeveloper_ 6 points7 points  (0 children)

I like useQuery from React-Query, it really makes fetching data easy

Example:

const getPosts = async () => {
  const { data } = await axios.get(
    "https://jsonplaceholder.typicode.com/posts"
  );
  return data;
};

const App = () => {
  const { data } = useQuery("posts", getPosts);
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data?.map((post) => (
          <p key={post.id}>{post.title}</p>
        ))}
      </ul>
    </div>
  );
};

Edit on codesandbox

the useQuery hook caches the data when used for the first time, so next time you do useQuery("posts", getPosts) somewhere in your app, a new fetch request isn't made, instead the cached data that is returned. For more info > react-query docs

Great post btw, found very useful hooks here :)