30-seconds-of-code: [FEATURE] 30 seconds of code - React snippets

[Chalarangelo]

After some internal discussion and the idea floating around for a bit, I think we should go ahead and brainstorm a bit about adding React snippets in the repository, as a separate page, folder etc.

The idea is to provide a basic cheatsheet for React, much like the base repository, except this will be a sub-project (as it is part of the JS ecosystem and we are probably not going to have snippets in the hundreds in this category). I've started compiling a list of popular StackOverflow questions and answers that might prove useful. Add your suggestions below and let's get a decently-sized list ready for October, when Hacktoberfest starts and we can expect a decent flow of PRs.

My completely incomplete list of ideas

• Array.map() to create a row in a table (or similar) / SO question
• Set focus on input after render using componentDidMount / SO Question
• Force rerender / SO Question
• Pass data on onClick event with arrow functions / SO Question
• Keying groups of items? / SO Question
• Custom version of shouldComponentUpdate for component, if we have a good example for that / SO Question
• Debounce in React / SO Question
• Show/Hide Component / SO Question
• Conditional attributes on components / SO Question
• Using booleans for selected <select> / SO Question
• Update array in state / SO Question
• Props inside quotes with template literals / SO Question
• Pass props to parent / SO Question
• How to use mapDispatchToProps / SO Question
• Properly altering state, using this.setState, too many people ask this / SO Question
• Call child method from parent / SO Question
• Detect click outside component (advanced) / SO Question
• Multiple CSS classes for component / SO Question
• Conditionally apply classes / SO Question
• setState with dynamic key name / SO Question
• Validate propTypes of nested object / SO Question
• setState with nested objects / SO Question
• Component inside component / SO Question
• update immutability helper / SO Question
• Multiple inline styles / SO Question
• Remove element from array in state, a bit too basic maybe / SO Question
• Add <script> via React / SO Question
• Form data in React / SO Question
• Allow one of multiple types in propTypes / SO Question
• Add :hover styles / SO Question
• Dynamic component name, not sure if this works and how / SO Question

[skatcat31]

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

[ShawnToubeau]

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?

[skatcat31]

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)

[skatcat31]

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.

[Chalarangelo]

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?

[fejes713]

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 💯)

[Chalarangelo]

@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.

[fejes713]

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!

[Chalarangelo]

This issue was moved to 30-seconds/30-seconds-of-react#1

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.