Is there a in-depth code guide to React JS similar to John Papa's code guide to Angular JS? [closed]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I've been developing in AngularJS 1.6+ for awhile now, and John Papa's code style guide has been critical to how I've written my Angular code. The conventions used are something I'd expect an experienced developer would be aware of:
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
If you go to AngularJs's site you end up creating a "Hello World" example with a non ideal file architecture. I want to avoid this while learning React JS. I'm looking to expand my skillset to include the React framework, but I want to make sure I'm using it in a way a real-time SPA would use React.
I'm looking for any reading material or videos I can watch to get me pointed in the right direction. I feel learning React won't be too bad, but I want to learn in a manner that is consistent to what is expected in the real world. I've done a few obvious google searches, but would like to hear feedback from some experience React developers.
javascript reactjs
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
closed as off-topic by Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen Nov 14 '18 at 6:24
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen
add a comment |
I've been developing in AngularJS 1.6+ for awhile now, and John Papa's code style guide has been critical to how I've written my Angular code. The conventions used are something I'd expect an experienced developer would be aware of:
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
If you go to AngularJs's site you end up creating a "Hello World" example with a non ideal file architecture. I want to avoid this while learning React JS. I'm looking to expand my skillset to include the React framework, but I want to make sure I'm using it in a way a real-time SPA would use React.
I'm looking for any reading material or videos I can watch to get me pointed in the right direction. I feel learning React won't be too bad, but I want to learn in a manner that is consistent to what is expected in the real world. I've done a few obvious google searches, but would like to hear feedback from some experience React developers.
javascript reactjs
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
closed as off-topic by Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen Nov 14 '18 at 6:24
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen
2
Any reason for the downvote? I know it's not code specific, but I feel I have been clear and concise while trying my own options.
– noPostOnSundays
Jan 14 '18 at 3:37
It looks like it all depends on what tech stack you have around react. And that can vary.. even in the field of styling and css solutions there are about 3-4 different approaches and at least 3 dozens of more or less well supported libraries to implement those
– Daniel Khoroshko
Jan 14 '18 at 5:39
add a comment |
I've been developing in AngularJS 1.6+ for awhile now, and John Papa's code style guide has been critical to how I've written my Angular code. The conventions used are something I'd expect an experienced developer would be aware of:
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
If you go to AngularJs's site you end up creating a "Hello World" example with a non ideal file architecture. I want to avoid this while learning React JS. I'm looking to expand my skillset to include the React framework, but I want to make sure I'm using it in a way a real-time SPA would use React.
I'm looking for any reading material or videos I can watch to get me pointed in the right direction. I feel learning React won't be too bad, but I want to learn in a manner that is consistent to what is expected in the real world. I've done a few obvious google searches, but would like to hear feedback from some experience React developers.
javascript reactjs
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
I've been developing in AngularJS 1.6+ for awhile now, and John Papa's code style guide has been critical to how I've written my Angular code. The conventions used are something I'd expect an experienced developer would be aware of:
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
If you go to AngularJs's site you end up creating a "Hello World" example with a non ideal file architecture. I want to avoid this while learning React JS. I'm looking to expand my skillset to include the React framework, but I want to make sure I'm using it in a way a real-time SPA would use React.
I'm looking for any reading material or videos I can watch to get me pointed in the right direction. I feel learning React won't be too bad, but I want to learn in a manner that is consistent to what is expected in the real world. I've done a few obvious google searches, but would like to hear feedback from some experience React developers.
javascript reactjs
javascript reactjs
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
asked Jan 14 '18 at 3:25
noPostOnSundaysnoPostOnSundays
172
172
closed as off-topic by Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen Nov 14 '18 at 6:24
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen
closed as off-topic by Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen Nov 14 '18 at 6:24
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – Tiny Giant, Shree, sideshowbarker, Tetsuya Yamamoto, Makyen
2
Any reason for the downvote? I know it's not code specific, but I feel I have been clear and concise while trying my own options.
– noPostOnSundays
Jan 14 '18 at 3:37
It looks like it all depends on what tech stack you have around react. And that can vary.. even in the field of styling and css solutions there are about 3-4 different approaches and at least 3 dozens of more or less well supported libraries to implement those
– Daniel Khoroshko
Jan 14 '18 at 5:39
add a comment |
2
Any reason for the downvote? I know it's not code specific, but I feel I have been clear and concise while trying my own options.
– noPostOnSundays
Jan 14 '18 at 3:37
It looks like it all depends on what tech stack you have around react. And that can vary.. even in the field of styling and css solutions there are about 3-4 different approaches and at least 3 dozens of more or less well supported libraries to implement those
– Daniel Khoroshko
Jan 14 '18 at 5:39
2
2
Any reason for the downvote? I know it's not code specific, but I feel I have been clear and concise while trying my own options.
– noPostOnSundays
Jan 14 '18 at 3:37
Any reason for the downvote? I know it's not code specific, but I feel I have been clear and concise while trying my own options.
– noPostOnSundays
Jan 14 '18 at 3:37
It looks like it all depends on what tech stack you have around react. And that can vary.. even in the field of styling and css solutions there are about 3-4 different approaches and at least 3 dozens of more or less well supported libraries to implement those
– Daniel Khoroshko
Jan 14 '18 at 5:39
It looks like it all depends on what tech stack you have around react. And that can vary.. even in the field of styling and css solutions there are about 3-4 different approaches and at least 3 dozens of more or less well supported libraries to implement those
– Daniel Khoroshko
Jan 14 '18 at 5:39
add a comment |
1 Answer
1
active
oldest
votes
This is a reasonable question, though not without opinion. I've done loads of Angular and React, and there is SOO much literature about React, but nothing similar to Todd's style guide. The reason is because React is such a simple, small library compared to Angular. It's a good thing. I'll attempt objectivity here (As of today (Jan.13 / 2018)
1) Docs first. The docs are excellent.
- https://reactjs.org/docs/hello-world.html
2) online sandboxes (this is subject to change)
- https://stackblitz.com/
- https://codesandbox.io/
3) create-react-app (it's great for tinkering and good enough for prod)
- https://github.com/facebookincubator/create-react-app
4) prettier (the gold standard of javascript formatting)
https://prettier.io/
5) react-router
Client side routing is essential to modern day JS. If you only ever had two libraries (React and React Router) you're set. I promise.
https://react-router.now.sh
6) Join / lurk communities.
The dev world is rich, fascinating and helpful. There's reddit, discord, slack, github, gitter, irc etc etc etc etc. You will gain so much more from talking to people online or in person, than from reading a guide that may or may not be up to date.
7) experiment
Style guides might be way off. It might turn out that you're weird way of doing things becomes the de facto way in the future, so constantly try new things and iterate quickly.
8) Smile, code, debug and carry on
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
|
show 1 more comment
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is a reasonable question, though not without opinion. I've done loads of Angular and React, and there is SOO much literature about React, but nothing similar to Todd's style guide. The reason is because React is such a simple, small library compared to Angular. It's a good thing. I'll attempt objectivity here (As of today (Jan.13 / 2018)
1) Docs first. The docs are excellent.
- https://reactjs.org/docs/hello-world.html
2) online sandboxes (this is subject to change)
- https://stackblitz.com/
- https://codesandbox.io/
3) create-react-app (it's great for tinkering and good enough for prod)
- https://github.com/facebookincubator/create-react-app
4) prettier (the gold standard of javascript formatting)
https://prettier.io/
5) react-router
Client side routing is essential to modern day JS. If you only ever had two libraries (React and React Router) you're set. I promise.
https://react-router.now.sh
6) Join / lurk communities.
The dev world is rich, fascinating and helpful. There's reddit, discord, slack, github, gitter, irc etc etc etc etc. You will gain so much more from talking to people online or in person, than from reading a guide that may or may not be up to date.
7) experiment
Style guides might be way off. It might turn out that you're weird way of doing things becomes the de facto way in the future, so constantly try new things and iterate quickly.
8) Smile, code, debug and carry on
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
|
show 1 more comment
This is a reasonable question, though not without opinion. I've done loads of Angular and React, and there is SOO much literature about React, but nothing similar to Todd's style guide. The reason is because React is such a simple, small library compared to Angular. It's a good thing. I'll attempt objectivity here (As of today (Jan.13 / 2018)
1) Docs first. The docs are excellent.
- https://reactjs.org/docs/hello-world.html
2) online sandboxes (this is subject to change)
- https://stackblitz.com/
- https://codesandbox.io/
3) create-react-app (it's great for tinkering and good enough for prod)
- https://github.com/facebookincubator/create-react-app
4) prettier (the gold standard of javascript formatting)
https://prettier.io/
5) react-router
Client side routing is essential to modern day JS. If you only ever had two libraries (React and React Router) you're set. I promise.
https://react-router.now.sh
6) Join / lurk communities.
The dev world is rich, fascinating and helpful. There's reddit, discord, slack, github, gitter, irc etc etc etc etc. You will gain so much more from talking to people online or in person, than from reading a guide that may or may not be up to date.
7) experiment
Style guides might be way off. It might turn out that you're weird way of doing things becomes the de facto way in the future, so constantly try new things and iterate quickly.
8) Smile, code, debug and carry on
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
|
show 1 more comment
This is a reasonable question, though not without opinion. I've done loads of Angular and React, and there is SOO much literature about React, but nothing similar to Todd's style guide. The reason is because React is such a simple, small library compared to Angular. It's a good thing. I'll attempt objectivity here (As of today (Jan.13 / 2018)
1) Docs first. The docs are excellent.
- https://reactjs.org/docs/hello-world.html
2) online sandboxes (this is subject to change)
- https://stackblitz.com/
- https://codesandbox.io/
3) create-react-app (it's great for tinkering and good enough for prod)
- https://github.com/facebookincubator/create-react-app
4) prettier (the gold standard of javascript formatting)
https://prettier.io/
5) react-router
Client side routing is essential to modern day JS. If you only ever had two libraries (React and React Router) you're set. I promise.
https://react-router.now.sh
6) Join / lurk communities.
The dev world is rich, fascinating and helpful. There's reddit, discord, slack, github, gitter, irc etc etc etc etc. You will gain so much more from talking to people online or in person, than from reading a guide that may or may not be up to date.
7) experiment
Style guides might be way off. It might turn out that you're weird way of doing things becomes the de facto way in the future, so constantly try new things and iterate quickly.
8) Smile, code, debug and carry on
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
This is a reasonable question, though not without opinion. I've done loads of Angular and React, and there is SOO much literature about React, but nothing similar to Todd's style guide. The reason is because React is such a simple, small library compared to Angular. It's a good thing. I'll attempt objectivity here (As of today (Jan.13 / 2018)
1) Docs first. The docs are excellent.
- https://reactjs.org/docs/hello-world.html
2) online sandboxes (this is subject to change)
- https://stackblitz.com/
- https://codesandbox.io/
3) create-react-app (it's great for tinkering and good enough for prod)
- https://github.com/facebookincubator/create-react-app
4) prettier (the gold standard of javascript formatting)
https://prettier.io/
5) react-router
Client side routing is essential to modern day JS. If you only ever had two libraries (React and React Router) you're set. I promise.
https://react-router.now.sh
6) Join / lurk communities.
The dev world is rich, fascinating and helpful. There's reddit, discord, slack, github, gitter, irc etc etc etc etc. You will gain so much more from talking to people online or in person, than from reading a guide that may or may not be up to date.
7) experiment
Style guides might be way off. It might turn out that you're weird way of doing things becomes the de facto way in the future, so constantly try new things and iterate quickly.
8) Smile, code, debug and carry on
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
answered Jan 14 '18 at 4:23
aziumazium
12.3k33355
12.3k33355
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
|
show 1 more comment
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
Prettier is good but too much opinionated unfortunately, not always the output code is readable enough
– Daniel Khoroshko
Jan 14 '18 at 5:36
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
interesting, I've found prettiers formatting to be top notch. can you give an example output that's less readable than input? I'm sure prettier would encourage that type of issue. sandbox: prettier.io/playground/…
– azium
Jan 14 '18 at 7:44
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
Hi! Of course prettier is a really cool and handy util and makes one's life much easier. My biggest complaint is that is removes an empty line after the function declaration (or signature, where the name and the arguments go), especially when function has a few arguments, some generic type arguments , so it takes 5 lines in the end :-)
– Daniel Khoroshko
Jan 14 '18 at 12:05
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
An another thing which just gets to me is that it squashed if-else if-else and try-catch by combining closing braces and opening braces on one line . Thanks
– Daniel Khoroshko
Jan 14 '18 at 12:11
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
@azium, thanks for the response. It's good to hear your POV on this subject. It' nice to hear that a doc similar to Todd Motto or John Papa is not needed due to React's simplicity. I wanted a confirmation like this before studying React's docs without feeling like I'm missing out elsewhere.
– noPostOnSundays
Jan 14 '18 at 23:24
|
show 1 more comment
2
Any reason for the downvote? I know it's not code specific, but I feel I have been clear and concise while trying my own options.
– noPostOnSundays
Jan 14 '18 at 3:37
It looks like it all depends on what tech stack you have around react. And that can vary.. even in the field of styling and css solutions there are about 3-4 different approaches and at least 3 dozens of more or less well supported libraries to implement those
– Daniel Khoroshko
Jan 14 '18 at 5:39