syntax.us Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me

Question:
What is 2015_1122 Code Challenge?

The 2015_1122 Code Challenge is a learning exercise for students attending Dan's Linux JavaScript Class at 3pm on 2015-11-22 at Hacker Dojo:

http://www.meetup.com/Dans-Linux-JavaScript-Class/

We start with three tasks: Install Ubuntu, enhance it, and create account named ann:
  • After I learn some Emacs or some other editor, I Install Node.js in this folder: ~ann/node/
  • cd ~ann
    wget https://nodejs.org/dist/v5.0.0/node-v5.0.0-linux-x64.tar.gz
    tar zxf node-v5.0.0-linux-x64.tar.gz
    rm -rf node
    mv node-v5.0.0-linux-x64 node
  • Then, I add Node.js to PATH:
    export       PATH="/home/ann/node/bin:${PATH}"
    echo 'export PATH="/home/ann/node/bin:${PATH}"' >> ~ann/.bashrc
  • Run a test:
    which node
    node -e 'console.log("hello world")'
  • Install CoffeScript to test npm:
    which npm
    npm install -g coffee-script
    ls -la /home/ann/node/lib/node_modules/
    which coffee
    coffee -e 'console.log "hello coffee!"'
  • Start work on an app:
    cd ~ann
    rm -rf app28
    git clone https://github.com/danbikle/app28.git
    cd ~ann/app28
    .  ~ann/app28/app28env.bash


If you want to deploy this repository to Heroku, follow this recipe:
  • Create an account at heroku.com website
  • Download/Install Heroku client
    cd ~ann
    wget https://s3.amazonaws.com/assets.heroku.com/heroku-client/heroku-client.tgz
    tar zxf heroku-client.tgz
    echo 'export PATH=/home/ann/heroku-client/bin:${PATH}' >> ~ann/.bashrc
    echo  export PATH=/home/ann/heroku-client/bin:${PATH}
  • I created ssh-key for ann account (assuming ann has none yet):
    ann@dev06:~$ 
    ann@dev06:~$ ssh-keygen -t rsa
    Generating public/private rsa key pair.
    Enter file in which to save the key (/home/ann/.ssh/id_rsa): 
    Created directory '/home/ann/.ssh'.
    Enter passphrase (empty for no passphrase): 
    Enter same passphrase again: 
    Your identification has been saved in /home/ann/.ssh/id_rsa.
    Your public key has been saved in /home/ann/.ssh/id_rsa.pub.
    The key fingerprint is:
    7c:73:e0:26:8b:62:f6:a4:1d:78:22:e5:cd:3a:5c:eb ann@dev06
    The key randomart image is:
    +--[ RSA 2048]----+
    |                 |
    |                 |
    |          .      |
    |       . . .     |
    |    .   S = .    |
    |   o +.. = o     |
    |  ..B.B..        |
    |   +oX..         |
    |    ooE          |
    +-----------------+
    ann@dev06:~$ 
    ann@dev06:~$ 
    ann@dev06:~$ 
    
  • I used heroku-client to "login" my shell. I gave a copy of ann public ssh-key to heroku:
    heroku status
    heroku auth:login
    heroku auth:whoami
    heroku keys:add
  • I used heroku-client to create a blank app named app28 at herokuapp.com
    cd ~ann/app28
    ~ann/heroku-client/bin/heroku create app28
  • git-push ~ann/app28 to heroku
    cd ~ann/app28
    git add .
    git commit -am hello
    git push heroku master
  • I saw ~ann/app28 deployed at https://app28.herokuapp.com

Questions

  • Which javascript libraries do I need to run the React demos?
  • a: react.js, react-dom.js, browser.js
  • What does browser.js do?
  • a: I think it supports babel,jsx
  • The syntax: ReactDOM.render(p1, p2); is what kind of syntax?
  • a: babel, jsx
  • Is p1 usually a string?
  • a: no it is a component.
  • Is p2 a JavaScript call?
  • a: yes!
  • What are 2 ways I can use jQuery to simulate the React-Hello-World demo?
  • a: html in a string a: clear and append where I do this to append: jQuery('<h1/>', {text:jmsg2}).appendTo('#jquery_example2');
  • What are 2 ways I can use D3.js to simulate the React-Hello-World demo?
  • a: like jquery see demo11.html
  • When I call ReactDOM.render(p1, p2), which React-call can I make to create p1?
  • a: React.createClass(), see demo12.html
  • When I call React.createClass(p3), how might I create p3?
  • I create an object which has a property called render which points to function which returns a component.
  • What is a property of p3 which I might set?
  • a: render, ....
  • When I call React.createClass(p3) can it place HTML in the DOM for me?
  • a: No, I use... ReactDOM.render()
  • When I call React.createClass(p3) what is the name of the object which gets created?
  • a: component
  • Suppose I create DanDiv from React.createClass(p4). How do I nest DanDiv inside a later call to React.createClass(p5)?
  • a: I create DanDiv, I get DanDiv with a call which looks like <DanDiv />
  • Suppose I create DanDiv from React.createClass(p4) and place DanDiv inside of BigDiv, what phrase describes what I am doing?
  • a: Composing Components
  • Whats the difference between an HTML component and a component?
  • a: A component has a name, an HTML component is referred to immediately.
  • How can a child component get data from a parent component?
  • a: Using attributes and text as children when I call the child. See demo17.html where Comment is the child.
  • In JS I can pass a paramter to a function call by placing the parameter inside parenthesis. In JSX how to pass a parameter to a component call?
  • a see demo17.html when I call Comment.
  • In JS when I define a function I can specify that it take a parameter and then I can get the value of the parameter later. When I define a component, How do I define a parameter in a component definition and how do I get a value out of each parameter later?
  • a: look at set state and get state...
  • When I define a simple component which can accept a text-node as a parameter, how do I refer to the value of the text-node?
  • When I define a simple component which can accept an href-attribute as a parameter, how do I refer to the value of the href-attribute?
  • How to serve the marked.js lib to my browser?
  • How to assume a string is in markedown format and then convert the markedown syntax into HTML?
  • Will React allow me to render HTML I get from a call to marked()?
  • What does it mean to 'sanitize' HTML?
  • What kind of syntax is inside un-sanitary HTML?
  • How to install React Developer Tools in Firefox?
  • How to use React Developer Tools in Firefox?
  • How to use inspect a component using React Developer Tools in Firefox?
  • How to pass an array of data to a component?
  • Look at demo20.html and describe how mydata flows to urdata.
  • How does a component get data?
  • How does a component set data?
  • Can JSX syntax 'see' an array which was set via JavaScript earlier?

That could be considered an adequate code challenge for a two hour Meetup.

If you have questions, e-me:

bikle101@gmail.com


syntax.us Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me