Skip to content

Instantly share code, notes, and snippets.

@goofballLogic
Last active July 31, 2018 08:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save goofballLogic/846427ce34a7f442d8f88c959403f2c4 to your computer and use it in GitHub Desktop.
Save goofballLogic/846427ce34a7f442d8f88c959403f2c4 to your computer and use it in GitHub Desktop.
Create the app:
npm init
Add React:
npm install --save react react-dom
Add webpack:
npm install --save-dev webpack webpack-cli webpack-dev-server
Add babel:
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
Add HTML webpack plugin:
npm install --save-dev html-webpack-plugin
Steal webpack.config.js file:
https://github.com/bradtraversy/react_webpack_starter/blob/master/webpack.config.js
Steal .babelrc file:
https://github.com/bradtraversy/react_webpack_starter/blob/master/.babelrc
Steal /src/index.html:
https://github.com/bradtraversy/react_webpack_starter/blob/master/src/index.html
Create your index.js file (in the /src folder):
import React from "react";
import ReactDOM from "react-dom";
const HelloWorld = () => <article>
<h1>Hello world</h1>
</article>;
ReactDOM.render(<HelloWorld />, document.getElementById('app'));
Start the server:
webpack-dev-server --mode development --open --hot
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* BONUS POINTS */*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/
1. Enable CSS imports
2. Make it work using SSR (works even with client-side javascript turned off)
(Find answers here: https://github.com/cassiozen/ReactCasts/tree/master/episode12)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment