React Test

React Notes

Why react is great
- load balancing
- code cleanliness
- keep from bloat

react creates components that will keep track of things and update on its own. have their own virtualDOM that lives in between your code and the dom. 

learn about JSX


FIRST STEP: Break your app into components! super small!

RESOURCES: 
download react developer tools for chrome!
babel.js
get JSX language encoding for sublime for appropriate coloring

this.setState allows you to update the state. this could prevent you from doing something as simple as typing (because that would be changing the state of the page. 

AJAX: 

React uses One Way Binding not Two Way Binding

Learn about props
JSX lets you use ${term} when setting URL for ajax call, instead of having to concat things

Steps to do

mkdir app_folder
cd app_folder
touch index.html
touch script.js
open editor
add CDN script files: 
  <script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
  <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
add script for babel (jsX)
  <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>


npm install react react-dom jquery lodash --save
npm install babel-core babel-loader babel-reset-es2015 babel-preset-react babel-preset-stage1 webpack webpack-dev-server gulp gulp-sass --save-dev
in the index.js file: 
  import React from 'react'
  import $ from 'jquery
  import ReactDOM from 'react-dom'

to use webpack, create a config file
  touch webpack.config.js