paulnguyen/reactjs

Reference

• Quick Start:

  • Example: https://reactjs.org/docs/try-react.html
  • Example: https://reactjs.org/docs/hello-world.html
  • Codepen: https://reactjs.org/redirect-to-codepen/hello-world
  • Codepen: https://reactjs.org/redirect-to-codepen/introducing-jsx
  • Codepen: https://reactjs.org/redirect-to-codepen/rendering-elements/render-an-element
  • Codepen: https://reactjs.org/redirect-to-codepen/rendering-elements/update-rendered-element
  • Codepen: https://reactjs.org/redirect-to-codepen/components-and-props/rendering-a-component
  • Codepen: https://reactjs.org/redirect-to-codepen/components-and-props/composing-components
  • Codepen: https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components
  • Codepen: https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components-continued
  • Codepen: https://codepen.io/gaearon/pen/dpdoYR?editors=0010 (Clock as Stateless Function)
  • Codepen: https://codepen.io/gaearon/pen/zKRGpo?editors=0010 (Clock as Class)
  • Codepen: https://codepen.io/gaearon/pen/KgQpJd?editors=0010 (Clock as Class with State)
  • Codepen: https://codepen.io/gaearon/pen/amqdNA?editors=0010 (Clock as Class with Lifecycle Hooks)
  • Codepen: https://codepen.io/gaearon/pen/zKRqNB?editors=0010 (State Data Flow to Children)
  • Codepen: https://codepen.io/gaearon/pen/vXdGmd?editors=0010 (Top-Down Data Flow Example)
  • Codepen: https://codepen.io/gaearon/pen/xEmzGg?editors=0010 (Event Handlers)
  • Codepen: https://codepen.io/gaearon/pen/ZpVxNq?editors=0011 (Conditional Rendering)
  • Codepen: https://codepen.io/gaearon/pen/QKzAgB?editors=0010 (Login Component)
  • Codepen: https://codepen.io/gaearon/pen/ozJddz?editors=0010 (Inline Conditional)
  • Codepen: https://codepen.io/gaearon/pen/Xjoqwm?editors=0010 (Warning Banner)
  • Youtube: https://www.youtube.com/watch?v=x7cQ3mrcKaY

• Hello React:

  • Example: https://reactjs.org/tutorial/tutorial.html
  • Codepen: https://codepen.io/gaearon/pen/oWWQNa?editors=0010 (Starter Code)
  • Codepen: https://codepen.io/gaearon/pen/gWWZgR?editors=0010 (Final Code)
  • Codepen: https://codepen.io/ericnakagawa/pen/vXpjwZ?editors=0010 (Another Example)

• JavaScript (Background):

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

• Bable / JSX Editor Package

  • http://babeljs.io/docs/editors
  • https://labs.voronianski.com/oceanic-next-color-scheme/

React Local Development

• To set up a production-ready React build environment, follow these instructions:

  • https://reactjs.org/docs/add-react-to-a-new-app.html
  • https://reactjs.org/docs/add-react-to-an-existing-app.html

• You can also use React without JSX, in which case you can remove Babel:

  • https://reactjs.org/docs/react-without-jsx.html
  • https://reactjs.org/docs/cdn-links.html

Install Yarn

• https://yarnpkg.com/en/docs/install#mac-stable

  brew install yarn --without-node

Create a new project

npx create-react-app hello-react
cd hello-react
yarn start

React Project Notes

  yarn start 	- Starts the development server.
  yarn build 	- Bundles the app into static files for production.
  yarn test 	- Starts the test runner.
  yarn eject 	- Removes this tool and copies build dependencies, configuration files
    			  and scripts into the app directory. If you do this, you can’t go back!