Intro to React Workshop

intro to react/README slides/0.md

@@ -0,0 +1,7 @@
+**Type:** Title
+
+**Title:** *Getting Started With React*
+
+------
+
+*Speaker notes: 

intro to react/README slides/1.md

@@ -0,0 +1,19 @@
+**Type:** Centered Text
+
+**Title:** *Background*
+
+* JavaScript, HTML and CSS
+* You understand how to access development tools
+* You have a willingness to problem solve
+* You have a willingness to  start hacking
+
+------
+
+*Speaker notes: 
+
+Are you guys familiar with theses words? "JavaScript, HTML and CSS"? Before we start to learn React, you need to at least have some knowledge of what these are and how to use them.
+
+You should also understand how to access development tools.
+
+Besides these, you should be interested in being able to solve problems and starting to learn hacking.
+

intro to react/README slides/10.md

@@ -0,0 +1,26 @@
+**Type:** Centered text
+
+**Title:** *What is JSX*
+
+centered text box:
+
+* What is JSX?
+  * like HTML
+  * inside of React Components
+
+* Note: Every`render()` must return a single JSX tag, so use `<div>` to nest your HTML
+
+
+
+------
+
+*Speaker notes: 
+
+The next topic is about using JSX
+
+What is JSX?
+
+JSX is like HTML you can use inside of React Components
+
+Every `render()` must return a single JSX tag, so use `<div>` to nest your HTML.
+

intro to react/README slides/11.md

@@ -0,0 +1,42 @@
+**Type:** Side text
+
+**Title:** *JSX and HTML and JS*
+
+side text box:
+
+* Differences between JSX and HTML
+
+  *  `class` and `classnName`
+  * `style` and CSS
+
+* JS and JSX
+
+  * inserting JS code into JSX tags
+  * {}
+  * attributes and inner HTML
+
+* React Component and JSX
+
+  *  `<ComponentName />`
+
+
+
+------
+
+*Speaker notes: 
+
+Although JSX is like HTML, there are still some differences
+
+Some things are different from HTML
+
+- `class` is a reserved word in JS, so you must use `className` instead
+- The `style` attribute must be passed a JS object, more on that in [How to Use CSS](#how-to-use-css)
+
+You can insert JS code into JSX tags!
+
+- Wrap the variable around curly braces `{}`
+- Works for attributes and inner HTML!
+
+You can insert Components with JSX
+
+- Just use `<ComponentName />`

intro to react/README slides/12.md

@@ -0,0 +1,75 @@
+**Type:** code centered
+
+**Title:** *How to use CSS with React*
+
+upper titile box:
+
+* Import CSS file
+
+middle text box:
+
+* ```js
+import 'ComponentName.css'
+  ```
+
+lower text box:
+
+* CSS operates like normal
+* `id`
+  * `className`
+  * JSX tags
+
+------
+
+*Speaker notes: 
+
+Now we will talk about how to use CSS file with React
+
+To Import the appropriate CSS file, we directly import it between double quotes
+
+```js
+import 'ComponentName.css'
+```
+
+
+
+Go to the CSS file
+
+- CSS operates just like normal, you can target `id`, `className`, and JSX tags
+
+
+
+### Inline styles are DIFFERENT IN REACT
+
+- Create a JS object
+
+```js
+const style = {}
+```
+
+- Add a CSS style, but without the hyphens and using camelCase
+- Example:
+
+```js
+const style = { fontSize: '24px' }
+```
+
+- Add a comma at the end of the CSS style if you want to add another
+
+```js
+const style = { fontSize: '24px', color: 'blue' }
+```
+
+- To add an inline style, pass the object to the style attribute
+- Example with style variable:
+
+```js
+<h1 style={style}>Hello World</h1>
+```
+
+- Example with new object:
+
+```js
+<h1 style={{ color: 'blue' }}>Hello World</h1>
+```
+

intro to react/README slides/13.md

@@ -0,0 +1,79 @@
+**Type:** Code Steps large
+
+**Title:** *How to use CSS with React*
+
+upper text box:
+
+* Differences of inline styles using CSS in React
+
+  * create a JS object
+
+    ```js
+    const style = {}
+    ```
+
+  * Add a CSS style, but without the hyphens and using camelCase
+
+    ```js
+    const style = { fontSize: '24px' }
+    ```
+
+  lower text box:
+
+  * Add a comma at the end of the CSS style if you want to add another
+
+    ```js
+  const style = { fontSize: '24px', color: 'blue' 
+    ```
+
+  * To add an inline style, pass the object to the style attribute
+
+    ```js
+    //Example with "style" variable
+    <h1 style={style}>Hello World</h1>
+    //Example with a new variable
+    <h1 style={{ color: 'blue' }}>Hello World</h1>
+    ```
+
+------
+
+*Speaker notes: 
+
+There are still some differences when using CSS file in React
+
+The inline styles are different
+
+First, when we create a JS object, we use 
+
+- Create a JS object
+
+```js
+const style = {}
+```
+
+- Add a CSS style, but without the hyphens and using camelCase
+- Example:
+
+```js
+const style = { fontSize: '24px' }
+```
+
+- Add a comma at the end of the CSS style if you want to add another
+
+```js
+const style = { fontSize: '24px', color: 'blue' }
+```
+
+- To add an inline style, pass the object to the style attribute
+- Example with style variable:
+
+```js
+<h1 style={style}>Hello World</h1>
+```
+
+- Example with new object:
+
+```js
+<h1 style={{ color: 'blue' }}>Hello World</h1>
+```
+

intro to react/README slides/14.md

@@ -0,0 +1,29 @@
+**Type:** Main point
+
+**Title:** *What are Props*
+
+title box:
+
+* Props: Properties
+
+  * Any JS code can become a prop: Functions, variables, etc
+  * Communicate to other components
+
+
+------
+
+*Speaker notes: 
+
+One feature of React is using "props"
+
+1. What are "props"?
+
+Props stands for properties, they are how we can parameter pass with React
+
+Any JS code can become a prop
+
+- Functions, variables, etc
+
+Props allow us to communicate to other components
+
+- For example, it can tell a picture w/ caption component to render a certain picture and give it a caption

intro to react/README slides/15.md

@@ -0,0 +1,50 @@
+**Type:** Code left/right
+
+**Title:** *How to use Props*
+
+left text box:
+
+* How to use props
+
+  * ```js
+    <ComponentName prop1={data} prop2={data2} />
+    ```
+
+  * ```js
+    <Photo picture={JohnDoePicture} caption="John Doe, Manager" />
+    ```
+
+right text box:
+
+* `this.props.propName`
+
+  * ```js
+    <img src={this.props.picture} />
+    ```
+
+------
+
+*Speaker notes: 
+
+How to use "props"
+
+```js
+<ComponentName prop1={data} prop2={data2} />
+```
+
+- Ex:
+
+```js
+<Photo picture={JohnDoePicture} caption="John Doe, Manager" />
+```
+
+
+
+To gather information from props use: `this.props.propName`
+
+- Ex:
+
+```js
+<img src={this.props.picture} />
+```
+

intro to react/README slides/16.md

@@ -0,0 +1,26 @@
+**Type:** Side text
+
+**Title:** *What is State in React*
+
+subtitle:
+
+* Communicate when to update a website
+
+side text box:
+
+* State and `render()`
+* What does State do?
+  * Change the design of your React Component
+
+------
+
+*Speaker notes: 
+
+Another feature in React is State
+
+What is State?
+
+State tells React when to update a website
+
+- Anytime state changes, `render()` is called
+- Use states to change the design of your Component

intro to react/README slides/17.md

@@ -0,0 +1,26 @@
+**Type:** Centered text
+
+**Title:** *Access a state*
+
+centered text box:
+
+* How to access a state
+
+  ```js
+  this.state.stateName
+  ```
+
+  * states are also JS objects
+
+------
+
+*Speaker notes: 
+
+accessing a state is easy
+
+```js
+this.state.stateName
+```
+
+- states can be any data type because they are also a JS object
+- refer to [How to Use CSS](#how-to-use-css) for more information on objects