Uh oh!
There was an error while loading. Please reload this page.
Rewrite "adding React to existing app" - #992
Conversation
Deploy preview for reactjs ready! Built with commit ec791eb |
| ```html | ||
| <script | ||
| crossorigin | ||
| src="https://unpkg.com/react@16/umd/react.production.min.js"> |
There was a problem hiding this comment.
Let's make these "development" versions at first, and add a 5th step that says "Before deploying, replace the React script tags with production versions"
There was a problem hiding this comment.
The last step should also say something "You probably already have a minification step for your JavaScript—don't forget to minify your component files too!"
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| // src/widget.js | ||
| class Widget extends React.Component() { |
There was a problem hiding this comment.
Typo: shouldn't have parens at the end
| <h1>Hello, world!</h1>, | ||
| document.getElementById('root') | ||
| <Widget />, | ||
| document.querySelector('.widget') |
There was a problem hiding this comment.
I think this still looks too much like an SPA entry point. Maybe we could render the same component a few times to different nodes? e.g. three buttons
| ### Development and Production Versions | ||
| ```shell | ||
| npm install --global babel-cli babel-preset-react-app |
There was a problem hiding this comment.
react-app preset won't work if you don't explicitly specify NODE_ENV.
However we can add an entry point like babel-preset-react-app/prod to avoid messing with env variables.
There was a problem hiding this comment.
Also this won't work: Babel can't locate a global preset.
I think it'll have to be local installs.
gaearon
commented
Jun 23, 2018
I have some ideas for a larger set of changes. Will do on top of this. Thanks! |
alexkrolick
commented
Jun 23, 2018
Ok cool 😄 |
swyxio
left a comment
There was a problem hiding this comment.
left some comments, overall nice effort!
| ```js | ||
| // src/button.js | ||
| class Button extends React.Component { |
There was a problem hiding this comment.
prefer to use functional components unless you have a need for classes
There was a problem hiding this comment.
This is familiar syntax that always works. Shouldn't have to explain function components on the install page.
(Most components are going to have state anyways - else why would you be adding React to a static page?)
| ``` | ||
| This code renders into a DOM element with the id of `root`, so you need `<div id="root"></div>` somewhere in your HTML file. | ||
| ### 3. Compile with Babel |
There was a problem hiding this comment.
we don't need babel to compile, we can require inline, the whole point of this piece is that we can use babel in a script:
// babel in a script
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
// lower down
<script type="text/babel">
There was a problem hiding this comment.
That's extremely slow - this is meant for people adding React to an actual app. If they are just trying React they should be referring to the Try React page.
| * [Creating a Production Build with Browserify](/docs/optimizing-performance.html#browserify) | ||
| * [Creating a Production Build with Rollup](/docs/optimizing-performance.html#rollup) | ||
| * [Creating a Production Build with webpack](/docs/optimizing-performance.html#webpack) | ||
| You probably already have a minification step for your JavaScript - don't forget to minify your component files too! |
There was a problem hiding this comment.
don't need this, if you are using the prod version of react ( I think)
There was a problem hiding this comment.
The component scripts won't minify themselves 😄
The production CDN links are minified copies of React & ReactDOM though
@gaearon I like using the existing HTML page as a starting point, good idea What do you think about using a Like thisindex.html <!DOCTYPE html><html><head><metacharset="UTF-8" /><title>Add React in One Minute</title></head><body><h2>Add React in One Minute</h2><p>This page demonstrates using React with no build tooling.</p><p>React is loaded as a script tag.</p><!-- We will put our React component inside this div. --><divclass="like_button_container"></div><!-- Load React. --><!-- Change .development.js to .production.min.js in both tags before deployment! --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><!-- Load our React component. --><scriptsrc="like_button.js"></script></body></html>like_button.js 'use strict';classLikeButtonextendsReact.Component{constructor(props){super(props);this.state={liked: false};}render(){if(this.state.liked){return'You liked this.';}returnReact.createElement('button',{onClick: ()=>this.setState({liked: true})},'Like');}}// Find the DOM container we defined in HTML.letdomContainer=document.querySelector('.like_button_container');// Show the LikeButton component inside our DOM container.ReactDOM.render(React.createElement(LikeButton),domContainer); |
| **Make sure you've followed the previous steps.** Then 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.
I suspect you missed the previous steps, as it mentions? :-)
gaearon
commented
Jun 25, 2018
Superseded by #996. |
Fixes#988
Rendered