Inital commit

ashleemboyer · Apr 13, 2021 · af60ed8 · af60ed8
commit af60ed8
Show file tree

Hide file tree

Showing 10 changed files with 15,545 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/preset-react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,119 @@
+# Things
+
+- created `public/index.html`
+
+  ```html
+  <!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="UTF-8" />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      />
+      <title>React Starter</title>
+    </head>
+
+    <body>
+      <div id="root"></div>
+      <noscript> You need to enable JavaScript to run this app. </noscript>
+      <script src="../dist/bundle.js"></script>
+    </body>
+  </html>
+  ```
+
+- `npm install --save-dev @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected]`
+
+  - `babel-core` is the main babel package — We need this for babel to do any transformations on our code.
+  - `babel-cli` allows you to compile files from the command line
+  - [`preset-react`](https://babeljs.io/docs/en/babel-preset-react) and [`preset-env`](https://babeljs.io/docs/en/babel-preset-env) are both presets that transform specific flavors of code — in this case, the env preset allows us to transform ES6+ into more traditional javascript and the react preset does the same, but with JSX instead.
+
+- created `.babelrc`
+
+  ```
+  {
+    "presets": ["@babel/env", "@babel/preset-react"]
+  }
+  ```
+
+- `npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]`
+
+- created `webpack.config.js`
+
+  ```js
+  const path = require('path');
+  const webpack = require('webpack');
+
+  module.exports = {
+    entry: './src/index.js',
+    mode: 'development',
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /(node_modules|bower_components)/,
+          loader: 'babel-loader',
+          options: { presets: ['@babel/env'] },
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+    resolve: { extensions: ['*', '.js', '.jsx'] },
+    output: {
+      path: path.resolve(__dirname, 'dist/'),
+      publicPath: '/dist/',
+      filename: 'bundle.js',
+    },
+    devServer: {
+      contentBase: path.join(__dirname, 'public/'),
+      port: 3000,
+      publicPath: 'http://localhost:3000/dist/',
+      hotOnly: true,
+    },
+    plugins: [new webpack.HotModuleReplacementPlugin()],
+  };
+  ```
+
+- `npm i [email protected] [email protected]`
+
+- created `src/index.js`
+
+  ```js
+  import React from 'react';
+  import ReactDOM from 'react-dom';
+  import App from './App.js';
+
+  ReactDOM.render(<App />, document.getElementById('root'));
+  ```
+
+- created `src/App.js`
+
+  ```js
+  import React, { Component } from 'react';
+  import './App.css';
+
+  class App extends Component {
+    render() {
+      return (
+        <div className="App">
+          <h1> Hello, World! </h1>
+        </div>
+      );
+    }
+  }
+
+  export default App;
+  ```
+
+- created `src/App.css`
+
+  ```css
+  .App {
+    margin: 1rem;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  ```