Rewrite Installation and related docs #996
Conversation
|
Deploy preview for reactjs ready! Built with commit 7d9b48f |
| ```js{3,4} | ||
| // ... the starter code you pasted ... | ||
|
|
||
| const domContainer = document.querySelector('.like_button_container'); |
There was a problem hiding this comment.
kinda weird IMO to use a class name then only support one at this step
There was a problem hiding this comment.
I didn't want to explain that we use an ID, and then in another example we use a class. But I now realized I already collapsed by other example from a section to a downloadable snippet. So I guess I can make this an ID.
| ```js | ||
| const e = React.createElement; | ||
|
|
||
| // Display a "Like" button |
There was a problem hiding this comment.
can we say
Display a "Like" <button>
| Create create a folder called `src` and run this terminal command: | ||
|
|
||
| ``` | ||
| npx babel --watch src --out-dir . --presets react-app/prod |
There was a problem hiding this comment.
why .? feels kinda weird to me for the src and out trees to not be disjoint
There was a problem hiding this comment.
Because then we don't have to mention that they need to update path in HTML and in Uglify command they learned in previous section. I figured people who would feel it's weird are the ones who'd guess to change the output directory, and the rest would break their setups.
| * Surfacing common mistakes during development. | ||
| * Fast development with live-editing CSS and JS. | ||
| * Optimizing the bundles for production. | ||
| * Running unit tests. |
There was a problem hiding this comment.
maybe something about scaling to many files and many components easier?
|
|
||
| ### More Flexible Toolchains | ||
|
|
||
| The following toolchains offer more flexiblity and choice. We recommend them to more experienced users: |
There was a problem hiding this comment.
do we really "recommend" all of these? I'm not familiar with all of them but would probably recommend most people turn to webpack+babel first, not sure if I'm skewed
There was a problem hiding this comment.
Yeah they're all pretty good and do defaults right. Babel/webpack unfortunately don't—people always end up shipping development builds. Webpack 4 might be better on this front but I'd think twice before recommending it directly.
| - "docs/environments.html" | ||
| --- | ||
|
|
||
| This page is an overview of the React documentation and related resources. |
There was a problem hiding this comment.
maybe a note about what React is, linking back to the homepage? in case someone misses it
content/docs/getting-started.md
Outdated
|
|
||
| ### Online Playgrounds | ||
|
|
||
| If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world) or [CodeSandbox](https://codesandbox.io/s/new). If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production. |
There was a problem hiding this comment.
I might walk back "don't use" slightly since there are a lot of toys that can be used like this – maybe like "so it's not the best choice when performance matters"? or "so we'd only recommend using this for simple demos"?
content/docs/getting-started.md
Outdated
|
|
||
| ### JavaScript Resources | ||
|
|
||
| The React documentation assumes some familiarity with the JavaScript language. You don't have to be an expert, but it's harder to learn both React and JavaScript at the same time. We recommend going through [this JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level. It will likely take you between 30 minutes and an hour but will help you feel more confident learning React. |
There was a problem hiding this comment.
should we say something about needing to know how to program? should be clear but…
content/docs/getting-started.md
Outdated
|
|
||
| Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help. | ||
|
|
||
| ### Main Concepts |
There was a problem hiding this comment.
You recommend people start here first? I always imagined most people should use the tutorial as their first code intro. My instinct would be to swap this with the tutorial. Also as someone familiar with the docs I had no idea where this would link before clicking it, not sure if that is a bad thing.
There was a problem hiding this comment.
I'm kind of torn on this. Could do both ways. Let's try Tutorial first.
I'm a bit worried that Tutorial being a single page makes it seem like a bigger commitment.
content/tutorial/tutorial.md
Outdated
|
|
||
| <details> | ||
|
|
||
| <summary><b>Optional: Click to expand the local development instructions</b></summary> |
There was a problem hiding this comment.
"local development instructions" is a bit vague. Something like this maybe:
"Optional: Instructions for following along locally using your preferred text editor"
|
|
||
| Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. | ||
|
|
||
| If you already minify the application scripts, all you need to do is to ensure that the deployed HTML loads the versions of React ending in `production.min.js`: |
There was a problem hiding this comment.
maybe ", your site will be production-ready if you ensure…"
Based off #992, I ended up rewriting much of it so I'll send as a separate PR. Something's wrong with Netlify build of that one too.