Skip to content

fix: lesson 13 said lesson 14 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Bobby-H merged 1 commit into from
Mar 15, 2016
Merged

fix: lesson 13 said lesson 14 #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions lesson 13 - React Part1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Lesson 14 - React
# Lesson 13 - React

## Recap & Intro
- We've come a long way! We've learned
Expand All @@ -17,7 +17,7 @@
- Simple, powerful, and composable

## What React Isn't
- React is not a web framework (not tied to html/css).
- React is not a web framework (not tied to html/css).
- React isn't a full fledged application framework
- React is not Flux or Redux

Expand Down Expand Up @@ -73,7 +73,7 @@ Like we said before, JSX isn't really HTML. Because it lives in the same context
- All tags have to be closed. `<input type="text">` for example, has to include a closing tag `<input type="text" />`.

## Exercise 1: Rendering a Simple Component
Let's create our first component!
Let's create our first component!

1. Clone the boilerplate project from `[email protected]:ttsJavaScriptApps/webpack-boilerplate.git`
2. In index.jsx, create a component class called `MessageInput` that renders:
Expand All @@ -85,7 +85,7 @@ Let's create our first component!
## Making our JSX Dynamic
Let's take a deeper look at the render method. This is essentially the equivalant of our view template in other frameworks (ejs, handlebars, mustache, jade, haml, etc.).

The basic functionality needed in any templating language is
The basic functionality needed in any templating language is

1. Token Replacement
2. Conditions
Expand All @@ -103,7 +103,7 @@ class HelloMessage extends React.Component {

constructor() {
super(); //needed for inheritance

//Define an intial state object
this.state = {
message : 'Hello World'
Expand Down Expand Up @@ -152,13 +152,13 @@ Often times we want to render one thing in one case, and something else in anoth
// this.state = { person : 'Matt'};

render() {

//Figure out the elements in advance
if(this.state.person)
message = "Hello " + this.state.person;
else
message = "I'm all alone... and sad";

return (
<div>{message}</div>
);
Expand Down Expand Up @@ -189,12 +189,12 @@ Sometimes you want to render the same elements repeatedly for every item in an a
```javascript
//this.state = { studentNames: ['Matt', 'Katy', 'Mariel', 'Lee'] }

render() {
render() {
//Figure out the elements in advance
var students = this.state.studentNames.map(function(name){
return (<li key="name">{name}</li>)
})

return (
<ul>{students}</ul>
);
Expand All @@ -211,12 +211,12 @@ One of the most common dynamic elements is the list of classes an element has ap

render() {
var classes = 'item'

if(isActive) {
classes += 'active';
}


return (
<div className={classes}></div>
);
Expand All @@ -233,8 +233,8 @@ render() {
var classes = classNames({
'item' : true,
'active' : isActive
})
})

return (
<div className={classes}></div>
);
Expand All @@ -251,7 +251,7 @@ render() {
color: 'red',
textDecoration: 'underline'
}

return (
<h1 style={headerStyle}></h1>
);
Expand All @@ -270,7 +270,7 @@ Let's add some logic to our little component.
5. Only show the most recent 3 messages.
6. If there are more than 3 messages, show a "load more" button

## Homework
## Homework

- Start Reading the [React Documentation](https://facebook.github.io/react/docs/getting-started.html)
- Complete the first 3 challenges (stop at Step 2 - Part 3) of [Thinking in React](https://github.com/asbjornenge/thinking-in-react) module
Expand Down