[FEATURE] 30 seconds of code - React snippets

Question

[FEATURE] 30 seconds of code - React snippets

Chalarangelo opened this issue 6 years ago · 46 comments

Answer 1 · 2018-09-27T16:18:10.000Z

From @skatcat31 on September 11, 2018 5:31

You should add Modals as they're extremely helpful to have a dynamic modal that closes on click away from the child

Answer 2 · 2018-09-27T16:18:11.000Z

From @ShawnToubeau on September 18, 2018 13:56

Hello! Hope you don't mind me adding to this list :)

Spread notation / SO
Controlled vs uncontrolled input / SO

Noticed a handful of posts asking about React-Router, would that be something you would want to focus on as well?

Answer 3 · 2018-09-27T16:18:12.000Z

From @skatcat31 on September 18, 2018 15:45

Spread notation is something that's well documented and used in few places, but has definate hlepful places(styles are a big one), and controlled versus uncontrolled input is a huge contention point in React, so it'd be smart to touch base on it. It's something I don't really think about myself since the coding guidelines I implemented enforced controlled at my last job(considered a best practice to guard against injection and cross site)

Answer 4 · 2018-09-27T16:18:12.000Z

From @skatcat31 on September 18, 2018 15:46

As for organization I think a separate folder or project would be best here. Also to note about Modal is that there are full screen modals based on events, and middle man modals based on parent container. Both would be helpful since I've found more pages struggling with modals.

Answer 5 · 2018-09-27T16:18:13.000Z

Update: Having tested subdomain support on Github pages, I have to report we need to move React snippets into their own repo, as it's the only feasible way to host them under react.30secondsofcode.org. Probably a good idea, too, as it will help with separation of concerns. Only issue there is that star count will not be shared, but that's probably alright.

In light of this, I think we should close the issue and go on ahead to create a new repo over the weekend to get started. What do you guys say?

Answer 6 · 2018-09-27T16:18:14.000Z

From @fejes713 on September 27, 2018 15:51

Better idea to me honestly.

30code should stay 30code and provide snippets for vanilla JS only.

30react is a great idea, for the very start, I don't think we need a lot of snippets. Let's keep the focus on quality. If you're up to, we can develop under private repo and then make it public (for the big reveal 💯)

Answer 7 · 2018-09-27T16:18:14.000Z

@fejes713 We can't do private repo on org without paying, plus I wanted this to be a good starting point for Hacktoberfest participation, I will make a new repo and see if I can migrate the issue over to it.

Answer 8 · 2018-09-27T16:18:15.000Z

From @fejes713 on September 27, 2018 16:17

Idea was to make it under user private repo, but as you said Hacktoberfest is here very soon, so we should give people opportunity to make something great!

Answer 9 · 2018-09-27T17:22:00.000Z

Seems like a great place to start. I'm going to be busy the next few weeks but we should at least get a handle seated on how we want to display these and organize content soon

Answer 10 · 2018-09-28T03:06:26.000Z

@Chalarangelo

Some of suggestions that I want to share:

Set innerHTML vs dangerouslySetInnerHTML/SO Question
Setting default props/Devhints
Returning multiple elements/Devhints

Answer 11 · 2018-09-28T03:51:24.000Z

Hey! @Chalarangelo I am really looking forward to contributing to this repo. In what format do I submit the snippets?

For example, for show/hide component, should the snippet contain the entire class or just the part that is necessary?

Answer 12 · 2018-09-28T04:44:00.000Z

We are not set on a snippet template just yet. If you have any template suggestions, you can check #4.

Answer 13 · 2018-10-02T14:19:01.000Z

From @ShawnToubeau on September 18, 2018 13:56

Hello! Hope you don't mind me adding to this list :)

Spread notation / SO

Controlled vs uncontrolled input / SO

Noticed a handful of posts asking about React-Router, would that be something you would want to focus on as well?

I am not sure that React Router should be added honestly. They have a very great website already displaying a lot of basic and straight-to-the-point examples. Would be redundant in my opinion.

Answer 14 · 2018-10-02T17:54:39.000Z

I am not sure that React Router should be added honestly. They have a very great website already displaying a lot of basic and straight-to-the-point examples. Would be redundant in my opinion.

They do, but people often get implementation wrong(especially with redux in the mix). I would suggest that we consider it, but for initial release or scope it can easily be left out(get examples out first and decide if we want to include routers later option)

Answer 15 · 2018-10-02T18:14:00.000Z

Yep, I agree with what @skatcat31 said. Let's go for basic snippets first, then see if we want to add router or anything else.

Answer 16 · 2018-10-03T10:09:15.000Z

Hey @Chalarangelo and @fejes713, great work on starting this repo and this issue!

I have an idea suggestion for a code snippet, how to setState based on the previous state. This is the case where I see most of the people do the wrong thing:

// bad
this.setState({ counter: this.state.counter + 1 })

// good
this.setState(prevState => ({ counter: prevState.counter + 1 }))

It's also what ESLint suggests you do if you try the bad practice in your code :)
There's also an explanation in React docs https://reactjs.org/docs/react-component.html#setstate

Let me know what you think and whether it should be added :)

Answer 17 · 2018-10-03T11:00:43.000Z

@nikolalsvk That sounds like a useful snippet in general, at least to me.

Answer 18 · 2018-10-03T17:54:51.000Z

It's something I often have to correct junior developers on. Good catch.

Answer 19 · 2018-10-04T06:54:30.000Z

@nikolalsvk Definitely a good addition to our collection. Thanks a ton for stopping by to help us! 👍

@Chalarangelo any plans on when do you want us to start implementing those? What's our current progress with the template?

Answer 20 · 2018-10-04T07:12:11.000Z

Current warning: I have had an extreme amount of interviews this week, and will for the next two on top of moving. I'll help when available but it's looking that that's going to be sparse. A lot of the commenting I'm doing is on scattered access to the internet(has been for awhile... I really just want a consistent schedule again -.-)

Answer 21 · 2018-10-04T08:01:20.000Z

@fejes713 Maybe start around October, 15 or something like that? Just to have enough time to decide on a template and figure out everything else. These won't take extremely long anyways.

If anyone wants to start implementing snippets without a template, feel free to do so, we can reformat them later.

Answer 22 · 2018-10-04T09:19:34.000Z

@skatcat31 Good luck on interviews, hopefully, at least one of them will be bingo 😉

@Chalarangelo Right, I'll try dedicating time around 15th Oct for this 👍

Answer 23 · 2018-10-05T06:59:37.000Z

@Chalarangelo Do you have a place where snippets can be written and reviewed?

Answer 24 · 2018-10-05T07:43:53.000Z

@SCHKN I suppose we do not have the exact template for React snippets jet. I would suggest to wait a bit and see what we come up with (less work then - no reformating).

Once there is a template we will have ../snippets folder where we will store snippetName.md files. In there you can PR snippets that you've written.

Hopefully this makes sense 😄

TLDR: by waiting for template to be discussed we won't need to reformat each snippet. Less work = better

Answer 25 · 2018-10-05T18:21:28.000Z

possible help with snippet names: We may want to "name space" them with snippetName.class.md or snippetName.function.md or to tag them in the snippet somehow so we can put them into categories of classes or functional components. This way we have an extra layer of organization and it's obvious before even opening the file, or once open, what type of component it is without reading source code.

Answer 26 · 2018-10-07T07:11:25.000Z

Maybe we don't need to ~~have~~ show full components in our snippets 🤔

We can only share relevant idea in the snippet, and make it inputtable (copyable) in any component you like. That's how React docs work and how basically every React library on NPM writes their examples :)

Then, we could put examples of the snippet in the expandable "+ Examples" container like it's done in the 30-seconds-of-code website :)

Also, I think the main purpose of these cards is not to make them as copy-friendly as they can be, but to learn something from reading them. And by adding so much code at first (like component, defaultProps, constructor), it won't be readable for 30 seconds anymore 😄

What do y'all think?

Answer 27 · 2018-10-07T12:34:53.000Z

I think examples could be made to work in separate codepens or repls either inside the page or opening in new tab, so we can isolate them from the main website code.

Answer 28 · 2018-10-07T13:23:42.000Z

I really like the format that @nikolalsvk suggested. I am voting +1 for this. By doing so we will still have a clean and understandable format that provides high value to the end user.

@skatcat31 @atomiks @flxwu could you please give your final opinion on this issue so we can slowly start working on this repository 😄

Answer 29 · 2018-10-08T03:39:28.000Z

showing relevant parts is definitely a good idea, but it means we'll basically always need a helping post about how our code is organized and what parts are where and such... But either way it should still probably be organized as "things in constructor", "methods", etc. and have some sort of common order to snippets.

So it's not a bad idea, but it means we'll basically always need a "help" post at the top

Answer 30 · 2018-10-08T10:12:09.000Z

"Help" post would be awesome to have, to explain the structure of the cards :)

Plus, it's not a big deal to implement a help box at each page of the future website with nowdays compilers of Markdown files.

Answer 31 · 2018-10-17T07:47:47.000Z

Note: Reviewing the suggested snippets, I can see that many of those suggestions are not exactly things that we want to provide as components, but rather concepts we want to show off in components that we want to implement. Therefore, we still need a few suggestions for snippets, so we can find a way to integrate those concepts into new components.

Answer 32 · 2018-10-17T08:05:20.000Z

Yes I agree @Chalarangelo . Some of those are/could be part of a component. Some of them might be useful as a component.

The concepts can also be mulit-categorized in future as this project expands i.e. fall in one or more than one domain. Examples like those additional domains would be - redux, react-router, formik, PropTypes and much more.

So we would need those domains to interact with this project which provides information about only "React.js"(framework's perspective)

Also newbies would follow the patterns that we have incorporated here. Therefore we also need to stick to the specific patterns for concepts and components. There are also advanced patterns and I have one good example - https://github.com/manjula91/react-advanced-patterns

Answer 33 · 2018-10-17T08:15:21.000Z

Redux, React-Redux and React-Router should ideally be part of the same repo as React. Same applies to PropTypes. The rest of the tools are probably out of scope for this particular project and should be explored later down the line. However, currently, we are focusing on simple React snippets to get things right first, before expanding and combining with other tools.

Answer 34 · 2018-11-14T17:32:37.000Z

So we should decide on a final snippet structure so we can start applying it to the currently suggested snippets. I've been reviewing a few but my time has been limited due to the interview process.

Answer 35 · 2018-12-23T21:43:09.000Z

What’s the status on this? I can contribute and need to know the snippet format.

Answer 36 · 2018-12-24T08:37:15.000Z

@jonniespratley the format is the one described on the snippet template file (or you can take a look at existing snippets, as well).

Answer 37 · 2018-12-26T06:53:11.000Z

Hey @Chalarangelo @skatcat31 I wanted to contribute in this. Can you please tell me how to make my contribution in this awesome library?

Answer 38 · 2018-12-26T16:03:02.000Z

Hey @Chalarangelo @skatcat31 I wanted to contribute in this. Can you please tell me how to make my contribution in this awesome library?

You can have a look at the Issues. You can mainly contribute snippets or there are other "Chores"

Answer 39 · 2018-12-27T03:34:37.000Z

I'm going to add another chore for Contributing Guidelines. Currently I'm on boarding at work, so maybe in a few weeks I can circle back around to this after I get unemployment and insurance figured.

Answer 40 · 2018-12-28T07:29:35.000Z

I think there are projects/products which are built using older versions(still using older versions like 15.6 or 16.0) like some would not support new Context API or some would be using deprecated lifecycles hence making it legacy code.

So there should be line added in snippet.md stating which versions or above versions this snippet can be used

Answer 41 · 2018-12-28T16:14:53.000Z

@meetzaveri that's a good point. Totally agree.

I was reading a few articles about clean code and code reusability. After semi-intensive research, I still believe that we should use prop types and default props. Yes, it will make the card longer but user shouldn't try to guess the props or look into the code itself - bad habits.

Remeber 30s of code? You just copy paste the snippet and it works. If we don't follow this approach with 30s of react somebody will copy it without any props and get error. Think about development experience and robustness of the snippet. The goal is to build reusable components, not the halfway done snippet just to say we did something.

Think about it few times; let's go for quality not quantity. @skatcat31 @Chalarangelo @meetzaveri

Answer 42 · 2018-12-28T18:13:01.000Z

@fejes713 the general issue with default props is that some things cannot be set to sensible defaults (e.g. content of components). I'm not against this, I'm just trying to figure out what the best course of action is.

Answer 43 · 2018-12-29T04:03:47.000Z

@fejes713 That's why I say any defaults should be assigned in the constructor. Default props, while useful, is still awkward in that it's not actually on the class, and makes copy pasta harder because you have to remember to look for other things too. I'm a big fan of JS classes keeping instantiations to the constructor(hence my gripe with field proposal)

Answer 44 · 2019-09-15T16:52:08.000Z

Hi @Chalarangelo , first-timer here. This is an awesome repo and I am looking to contribute to this repo! I'm interested in one of these: lazy loading component, notifications, or hamburger menu. I'm already read the contributing guidelines mentioned above. Can you tell me which one you recommend more and the details that you are trying to achieve? Thanks!

Answer 45 · 2019-09-15T17:26:58.000Z

Hey @theodorusyoga, thanks for willing to help us! We're glad that you like the project 😄

We're trying to make a collection of useful components that you can integrate to your own project and use for learning purposes.

Pick whatever component you feel most comfortable writing and I'll be happy to help out and review your PR.

Let me know if you need any help.

Answer 46 · 2019-12-09T11:02:46.000Z

This issue is a bit of a mess right now, I'm closing it but we can still add snippets suggested here in new PRs.

[FEATURE] 30 seconds of code - React snippets

My completely incomplete list of ideas

My completely incomplete list of ideas (old)