diff --git a/intro to react/README slides/0.md b/intro to react/README slides/0.md new file mode 100644 index 0000000..2a3ede9 --- /dev/null +++ b/intro to react/README slides/0.md @@ -0,0 +1,7 @@ +**Type:** Title + +**Title:** *Getting Started With React* + +------ + +*Speaker notes: \ No newline at end of file diff --git a/intro to react/README slides/1.md b/intro to react/README slides/1.md new file mode 100644 index 0000000..3827ae8 --- /dev/null +++ b/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. + diff --git a/intro to react/README slides/10.md b/intro to react/README slides/10.md new file mode 100644 index 0000000..39a8d8d --- /dev/null +++ b/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 `
` 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 `
` to nest your HTML. + diff --git a/intro to react/README slides/11.md b/intro to react/README slides/11.md new file mode 100644 index 0000000..fd681e9 --- /dev/null +++ b/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 + + * `` + + + +------ + +*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 `` \ No newline at end of file diff --git a/intro to react/README slides/12.md b/intro to react/README slides/12.md new file mode 100644 index 0000000..4dd84bd --- /dev/null +++ b/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 +

Hello World

+``` + +- Example with new object: + +```js +

Hello World

+``` + diff --git a/intro to react/README slides/13.md b/intro to react/README slides/13.md new file mode 100644 index 0000000..f31d2c0 --- /dev/null +++ b/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 +

Hello World

+ //Example with a new variable +

Hello World

+ ``` + +------ + +*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 +

Hello World

+``` + +- Example with new object: + +```js +

Hello World

+``` + diff --git a/intro to react/README slides/14.md b/intro to react/README slides/14.md new file mode 100644 index 0000000..7284e26 --- /dev/null +++ b/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 diff --git a/intro to react/README slides/15.md b/intro to react/README slides/15.md new file mode 100644 index 0000000..30b1bba --- /dev/null +++ b/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 + + ``` + + * ```js + + ``` + +right text box: + +* `this.props.propName` + + * ```js + + ``` + +------ + +*Speaker notes: + +How to use "props" + +```js + +``` + +- Ex: + +```js + +``` + + + +To gather information from props use: `this.props.propName` + +- Ex: + +```js + +``` + diff --git a/intro to react/README slides/16.md b/intro to react/README slides/16.md new file mode 100644 index 0000000..5177309 --- /dev/null +++ b/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 diff --git a/intro to react/README slides/17.md b/intro to react/README slides/17.md new file mode 100644 index 0000000..0b7531c --- /dev/null +++ b/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 diff --git a/intro to react/README slides/18.md b/intro to react/README slides/18.md new file mode 100644 index 0000000..7c99f03 --- /dev/null +++ b/intro to react/README slides/18.md @@ -0,0 +1,31 @@ +**Type:** code centered + +**Title:** *Initialize a state* + +upper title box: + +* Constructor + + middle text box: + + ```js + constructor(props) { + super(props); + this.state = { stateName: data }; + } + ``` + +------ + +*Speaker notes: + +### To set an initial state, you must add a constructor + +```js +constructor(props) { + super(props); + this.state = { stateName: data }; +} +``` + +- Inside of the curly brackets above, create a JS object like normal diff --git a/intro to react/README slides/19.md b/intro to react/README slides/19.md new file mode 100644 index 0000000..b572453 --- /dev/null +++ b/intro to react/README slides/19.md @@ -0,0 +1,34 @@ +**Type:** Side text + +**Title:** *Change a state* + +side text box: + +* Change a state: + + * `this.setState()` + + ```js + this.setState({ stateName: data }) + ``` + +* Change a state within JSX: + + * create a method within the class + + +------ + +*Speaker notes: + +### To change a state, you must use `this.setState()` + +```js +this.setState({ stateName: data }) +``` + +- You can pass an object that only changes one state of the component + +### To change a state within JSX, you must use methods + +- Create a method within the class diff --git a/intro to react/README slides/1_hwBFLBbqu59EibJspxNvjw.png b/intro to react/README slides/1_hwBFLBbqu59EibJspxNvjw.png new file mode 100644 index 0000000..440aa9b Binary files /dev/null and b/intro to react/README slides/1_hwBFLBbqu59EibJspxNvjw.png differ diff --git a/intro to react/README slides/2.md b/intro to react/README slides/2.md new file mode 100644 index 0000000..f88f3e8 --- /dev/null +++ b/intro to react/README slides/2.md @@ -0,0 +1,26 @@ +**Type:** Small code snipet + +**Title:** *Installing React* + +upper-right text box + +* Node.js +* Terminal + +lower-right text box + +```bash +$ npm install --save-dev react +$ npm install --save-dev react-dom +``` + +------ + +*Speaker notes: + +First, you need to download the latest version of Node.js + +Now let's nevigate to the terminal. Every operating system is differen, and here we are demostrating with Apple terminal. + +Install react using npm + diff --git a/intro to react/README slides/20.md b/intro to react/README slides/20.md new file mode 100644 index 0000000..1d3c07c --- /dev/null +++ b/intro to react/README slides/20.md @@ -0,0 +1,53 @@ +**Type:** Code steps + +**Title:** *Change a state within JSX example* + +upper text box: + +```js +methodName(e) { + e.preventDefault(); + this.setState({ + state1: data1, + state2: data2 + }); +} +``` + +lower text box: + +* Name the method: `handleEvent` ex.`handleClick` + +* Make this work: add to the `constructor` + + ```js + this.methodName = this.methodName.bind(this) + ``` + + +------ + +*Speaker notes: + +There is an example of changing a state using JSX + +(notes after //) + +```js +methodName(e) { // you can add more data with methodName(e, data1, data2, etc… + e.preventDefault(); // prevents the method from running without an event + this.setState({ // Can accept one or more states, even if you have multiple states + state1: data1, + state2: data2 + }); +} +``` + +- Proper practice is to name the method `handleEvent`, where `Event` is what activates the method +- Ex: `handleClick` +- To allow this to work, you have to add another line to your `constructor` + +```js +this.methodName = this.methodName.bind(this) +``` + diff --git a/intro to react/README slides/21.md b/intro to react/README slides/21.md new file mode 100644 index 0000000..3c634e6 --- /dev/null +++ b/intro to react/README slides/21.md @@ -0,0 +1,55 @@ +**Type:** Small code snipet + +**Title:** *More About Method* + +upper text box: + +* Attach the method to events: + + * `onClick`, `onHover , etc + + * ```js +