tutorial_notes.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Notes for Tetris in React\n",
    "\n",
    "### Basic React commands\n",
    "\n",
    " Command | Description \n",
    " --- | --- \n",
    " `npm install -g npx` | Install npx globally, which allows creating a non-blank Ract applicaiton\n",
    " `npx create-react-app` | Create a new React application with some basic build settings\n",
    " `npm init create-react-app tetris_tutorial `| Create a new blank React application \n",
    " `npm start` | Run your React project\n",
    " `npm test` | Run your React project in test mode\n",
    " `npm run build` | Builds and optimizes your React project into a build folder\n",
    " `npm run eject` | Removes all the dependencies and configs created from npx create-react-app\n",
    " `npm install -g nodemon` | Installs nodemon, which re-builds your running application if you change it\n",
    " \n",
    " If you did npx create-react-app, you will have a public and src folder. In the src folder, create an img, font, hooks, and components folder.\n",
    " \n",
    " Each component will start off with a typical skeleton:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "ename": "SyntaxError",
     "evalue": "invalid syntax (<ipython-input-1-83207107cada>, line 1)",
     "output_type": "error",
     "traceback": [
      "\u001b[0;36m  File \u001b[0;32m\"<ipython-input-1-83207107cada>\"\u001b[0;36m, line \u001b[0;32m1\u001b[0m\n\u001b[0;31m    import React from 'react';\u001b[0m\n\u001b[0m                    ^\u001b[0m\n\u001b[0;31mSyntaxError\u001b[0m\u001b[0;31m:\u001b[0m invalid syntax\n"
     ]
    }
   ],
   "source": [
    "import React from 'react';\n",
    "\n",
    "// {} are props for this component\n",
    "const ComponentName = ({ props }) => (\n",
    "\n",
    ")\n",
    "\n",
    "export default ComponentName;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Component names should be in CamelCase, while helper files should be in camelCase.\n",
    "\n",
    "If you `export default` a component, you can `import ComponentName from './file/location';`\n",
    "\n",
    "If you `export` a component, you have to `import { ComponentName } from './file/location';`\n",
    "\n",
    "Another example: `import React, { useState } from 'react';`\n",
    "\n",
    "\n",
    "Begin custom hook names with 'use,' ex. `useCustomHook.js`\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}