diff --git a/lesson 13 - React Part1.md b/lesson 13 - React Part1.md index 7c0f8b9..75898dc 100644 --- a/lesson 13 - React Part1.md +++ b/lesson 13 - React Part1.md @@ -1,4 +1,4 @@ -# Lesson 14 - React +# Lesson 13 - React ## Recap & Intro - We've come a long way! We've learned @@ -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 @@ -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. `` for example, has to include a closing tag ``. ## Exercise 1: Rendering a Simple Component -Let's create our first component! +Let's create our first component! 1. Clone the boilerplate project from `git@github.com:ttsJavaScriptApps/webpack-boilerplate.git` 2. In index.jsx, create a component class called `MessageInput` that renders: @@ -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 @@ -103,7 +103,7 @@ class HelloMessage extends React.Component { constructor() { super(); //needed for inheritance - + //Define an intial state object this.state = { message : 'Hello World' @@ -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 (