deck.mdx

import { Head, Notes} from 'mdx-deck' import { FullScreenCode, Split } from 'mdx-deck/layouts' export { hack as theme } from 'mdx-deck/themes'

<title>React for BTS</title>

React

Paul Castillo

---

Overview

• What is React? Why use it?
• History
• JavaScript ES Version
• React fundamentals
• Syntax Differences Javascript vs. C#
• Pros Javascript vs. C#

---

What is React?

Why use it?

---

History

---

JavaScript ES Versions

---

React fundamentals

• One-way data binding with props
• Stateful components
• Virtual DOM
• JSX
• Lifecycle Methods

---

One-way data binding with props

// Code Example

import React from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends React.Component {
  render() {
    return <div>Hello World!</div>
  }
}

ReactDOM.render(<HelloWorld message="Nice to meet you" />, document.getElementById('root'))

---

Stateful components

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

---

JSX (JavaScript + HTML)

    if (this.props.isMessagePassed) {
      return <div>The message is passed</div>;
    }

---

Syntax Differences

	JavaScript	C#
Typing	Weak/Dynamic	Static
Compilation	Interpreted	Compiled

---

Pros

JavaScript	C#
Dynamic	Cool Syntax
Lives in Browser	Great Lambda support
Fast	Great Generics support
Flexible	Extension Methods
Non-blocking I/O	Automatic Garbage Collection

---

export default FullScreenCode

// Code Example

import React from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends React.Component {
  render() {
    return <div>Hello World!</div>
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'))

---

Resources

• React Docs
• Tyler McGinnis: Guide to Learning React

---

🙋‍ Questions

---

Created with ❤️ with mdx-deck

https://github.com/jxnblk/mdx-deck

---

React Part Deux

Paul Castillo

---

Overview

• Development tooling
• State of React/Component Ecosystem

---

Development tooling

• VS Code
• Babel – what is it?
• EsLint - linting
• Prettier – Code formatter
• Cypress.io - testing

Extensions

• JS Refactor
• Brackets Colorizer

---

React / Component Ecosystem

• What is out there to work with?
• NPM is your friend
• Github.com

---

🙋‍ Questions

---

Resources

• Awesome React - https://github.com/enaqx/awesome-react
• Scrimba tutorials - https://scrimba.com/g/glearnreact
• Wes Bos - https://wesbos.com/
• Level Up Tutorials - https://www.leveluptutorials.com/
• Tyler McGinnis - https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
• Syntax Podcast - https://syntax.fm/

---

---