React Intro

• React is a js library for building User Interfaces
• It can be used within other frameworks
• With JSX, you write custom HTML elements that have massive functionality
• React is intended to be easy to learn. It's more of a way of thinking about javascript than a new language to learn.
• ReactJS.org

Composition in React

Create components (custom HTML elements) that can be added together to enhance functionality. A reusable parent component can have different children injected into it at run time.

Learn more here

JSX in React

JSX looks like a template language (HTML), but it comes with the full power of javascript. It is used with React to describe what the UI should look like.

const name = 'Jon Middaugh';
const element = 
Hello, {name}
;

ReactDOM.render(
  element,
  document.getElementById('root')
);  
					

Read more here

Finance App

Create a new single-page application in React

• Make sure npm 5.2 or later is installed
• npx create-react-app finance-app
• cd finance-app
• npm start

What is public/index.html, src/index.js, and src/App.js

• public/index.html is the 'SPA' that is run by the browser and has all html built by react injected into it.
• src/index.js tells react where to inject the code --> ReactDOM.render(, document.getElementById('root'));
• src/App.js is where developers actually start writing React code.

What's in App.js?

• import statements
• class/extends
• render function
• export default

Creating our first class

• Think about folder/file management
• export default class
• render function