Rewrite "adding React to existing app" #992

alexkrolick · 2018-06-23T06:46:51Z

Fixes #988

Rendered

reactjs-bot · 2018-06-23T06:50:05Z

Deploy preview for reactjs ready!

Built with commit ec791eb

https://deploy-preview-992--reactjs.netlify.com

Fixes reactjs#988

gaearon · 2018-06-23T11:48:28Z

content/docs/add-react-to-an-existing-app.md

+```html
+<script
+  crossorigin
+  src="https://unpkg.com/react@16/umd/react.production.min.js">


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"

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!"

gaearon · 2018-06-23T11:52:43Z

content/docs/add-react-to-an-existing-app.md

-import React from 'react';
-import ReactDOM from 'react-dom';
+// src/widget.js
+class Widget extends React.Component() {


Typo: shouldn't have parens at the end

gaearon · 2018-06-23T11:55:19Z

content/docs/add-react-to-an-existing-app.md

-  <h1>Hello, world!</h1>,
-  document.getElementById('root')
+  <Widget />,
+  document.querySelector('.widget')


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

gaearon · 2018-06-23T11:58:45Z

content/docs/add-react-to-an-existing-app.md

-
-### Development and Production Versions
+```shell
+npm install --global babel-cli babel-preset-react-app


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.

Also this won't work: Babel can't locate a global preset.

I think it'll have to be local installs.

gaearon · 2018-06-23T18:12:13Z

I have some ideas for a larger set of changes. Will do on top of this. Thanks!

alexkrolick · 2018-06-23T18:15:12Z

Ok cool 😄

swyxio

left some comments, overall nice effort!

swyxio · 2018-06-23T19:35:47Z

content/docs/add-react-to-an-existing-app.md

+```js
+// src/button.js
+
+class Button extends React.Component {


prefer to use functional components unless you have a need for classes

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

swyxio · 2018-06-23T19:38:18Z

content/docs/add-react-to-an-existing-app.md

 );
 ```

-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


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">

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.

swyxio · 2018-06-23T19:39:12Z

content/docs/add-react-to-an-existing-app.md

-* [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!


don't need this, if you are using the prod version of react ( I think)

The component scripts won't minify themselves 😄
The production CDN links are minified copies of React & ReactDOM though

alexkrolick · 2018-06-25T07:43:52Z

@gaearon I like using the existing HTML page as a starting point, good idea

What do you think about using a details tag to hide the linked code samples inline, but make them expandable? I worry that relying on external links makes it hard to maintain context.

Like this

Download examples

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="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. -->
    <div class="like_button_container"></div>

    <!-- Load React. -->
    <!-- Change .development.js to .production.min.js in both tags before deployment! -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

like_button.js

'use strict';

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return React.createElement(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// Find the DOM container we defined in HTML.
let domContainer = document.querySelector('.like_button_container');

// Show the LikeButton component inside our DOM container.
ReactDOM.render(React.createElement(LikeButton), domContainer);

alexkrolick · 2018-06-25T18:21:21Z

content/docs/add-react-to-a-website.md

+**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 


I suspect you missed the previous steps, as it mentions? :-)

gaearon · 2018-06-25T21:52:49Z

Superseded by #996.
Thanks for starting this

facebook-github-bot added the CLA Signed label Jun 23, 2018

alexkrolick force-pushed the add-existing branch from 808d862 to ccfc583 Compare June 23, 2018 06:56

Rewrite "adding React to existing app"

4ae0060

Fixes reactjs#988

alexkrolick force-pushed the add-existing branch from ffa99f7 to 4ae0060 Compare June 23, 2018 07:02

gaearon reviewed Jun 23, 2018

View reviewed changes

This was referenced Jun 23, 2018

Add modes to our Babel preset (1.x) facebook/create-react-app#4668

Merged

Add mode entry points to our preset facebook/create-react-app#4669

Merged

gaearon and others added 6 commits June 23, 2018 14:14

Some copy

ea62599

typo

5d77355

Update babel instructions

3a577e0

Update umd link

6b6e530

Add prod minification section

90de469

Show "button" example in several targets

6f84692

alexkrolick mentioned this pull request Jun 23, 2018

[feat] yarn add-script yarnpkg/yarn#6025

Open

swyxio suggested changes Jun 23, 2018

View reviewed changes

wip

6a65d90

gaearon added 6 commits June 25, 2018 14:17

More

74edd25

More

91a53ec

tweak

1156655

yas

2adaa07

Multi root tip

fd0d7d0

moaar

ad138c7

alexkrolick commented Jun 25, 2018

View reviewed changes

gaearon added 3 commits June 25, 2018 20:36

alot

fd22d5b

Tweak links

5bf8c5d

Explain better

1ae845f

gaearon added 4 commits June 25, 2018 20:55

better lead

8267c92

tweaks

785cbb7

tweaks

106a702

wording

ec791eb

gaearon mentioned this pull request Jun 25, 2018

Rewrite Installation and related docs #996

Merged

gaearon closed this Jun 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rewrite "adding React to existing app" #992

Rewrite "adding React to existing app" #992

alexkrolick commented Jun 23, 2018 •

edited

Loading

reactjs-bot commented Jun 23, 2018 •

edited

Loading

gaearon Jun 23, 2018

gaearon Jun 23, 2018

gaearon Jun 23, 2018

gaearon Jun 23, 2018

gaearon Jun 23, 2018

gaearon Jun 23, 2018

gaearon commented Jun 23, 2018

alexkrolick commented Jun 23, 2018

swyxio left a comment

swyxio Jun 23, 2018

alexkrolick Jun 23, 2018 •

edited

Loading

swyxio Jun 23, 2018

alexkrolick Jun 23, 2018

swyxio Jun 23, 2018

alexkrolick Jun 23, 2018

alexkrolick commented Jun 25, 2018 •

edited

Loading

alexkrolick Jun 25, 2018

gaearon Jun 25, 2018

gaearon commented Jun 25, 2018

Rewrite "adding React to existing app" #992

Rewrite "adding React to existing app" #992

Conversation

alexkrolick commented Jun 23, 2018 • edited Loading

reactjs-bot commented Jun 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jun 23, 2018

alexkrolick commented Jun 23, 2018

swyxio left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexkrolick Jun 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexkrolick commented Jun 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jun 25, 2018

alexkrolick commented Jun 23, 2018 •

edited

Loading

reactjs-bot commented Jun 23, 2018 •

edited

Loading

alexkrolick Jun 23, 2018 •

edited

Loading

alexkrolick commented Jun 25, 2018 •

edited

Loading