twilson63/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Get Started with React

TL;DR

Just clone this gist if you don't feel like typing...

This is a sort step by step post on how to get started with React without Webpack.
Step 1

Create a directory for your project -
mkdir foo
Step 2

Change into the project directory and create two files:

cd foo
index.html
index.js

Step 3

Update index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Awesome Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">Loading...</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <script src="https://unpkg.com/getlibs"></script>
    <script>
      System.config({
        map: {
          'react-dom': 'react-dom'
        }
      })
      System.import('/index.js')
    </script>
  </body>
</html>
Step 4

Update index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Hello from React</h1>, document.getElementById('app'))
Step 5

Run a static web server
npm install serve -g
serve -c 0 -s
Step 6

Deploy to now
npm install now -g
now

  
## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Awesome Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">Loading...</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <script src="https://unpkg.com/getlibs"></script>
    <script>
      System.config({
        map: {
          'react-dom': 'react-dom'
        }
      })
      System.import('/index.js')
    </script>
  </body>
</html>

## index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Hello from React</h1>, document.getElementById('app'))
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>My Awesome Project</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div id="app">Loading...</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
	<script src="https://unpkg.com/getlibs"></script>
	<script>
	System.config({
	map: {
	'react-dom': 'react-dom'
	}
	})
	System.import('/index.js')
	</script>
	</body>
	</html>
	import React from 'react'
	import ReactDOM from 'react-dom'

	ReactDOM.render(<h1>Hello from React</h1>, document.getElementById('app'))