<style> @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); .reveal { font-family: "Roboto Mono", monospace; font-size: 40px; } </style> # Basic React Crash Course 😲 ### Open Source @ UCSD --- ## What is React? Javascript library to build user interfaces, built by Facebook. It's essentially a tool to build UI components to show on screen! ---- **Libraries** are collections of pre-written code for popular utilities (functionalities that a lot of people use), so you don't need to code it all by hand. Don't reinvent the wheel! Use libraries! ---- ### Why do we want to use React? 1. **Simplicity**: intuitive component-based approach 2. **Reusability**: components can be reused for a consistent look and facilitates codebase maintenance 3. **Testability**: easy to isolate and test specific components 4. **Performance**: higher performance than regular HTML/CSS/Javascript (complicated why!), so better UX ---- ### Companies who use React BBC, Netflix, Dropbox, Coursera, American Express, Intuit, Khan Academy, Reddit --- ## What are Components? Components are usually a specific aspect of your UI, such as a navigation bar or a form. A component will house the logic and JSX (pretty much HTML, but we'll look at this in a bit) of that specific part of the UI ---- ### Examples of Components * A home component (which is your home page) * A form component (houses the HTML inputs, form validation, storing inputs, etc.) * A navigation bar component (houses the links to other pages on your website) ---- There are two ways that you can create components: using a class or using a function. Let's look at the differences. ---- ## Functional Components Used to accept and display data Called "presentational" components because they usually don't have any logic -- their job is to render ---- ### Example Functional Component ```javascript= import React from 'react'; const Example = () => { return( <h1>Hello, world!</h1> ); } export default Example; ``` ---- ## Class Components Usually implements the logic and and may be dynamic (what is on the page may be changing) Stores state (dynamic data in your component), which we will cover soon. In some cases, you use class components to determine some logic, then use the logic to render some functional component More on that later 😉 ---- ### Example Class Component ```javascript= import React from 'react'; class Example extends React.Component{ render(){ return( <h1>Hello, World!</h1> ); } } export default Example; ``` --- ## JSX (Javascript XML) Used to make up the HTML tags that is rendered for a component Pretty much just HTML with one twist... ---- ### You can use Javascript INSIDE of your HTML! What!? 😲 ---- While doing regular HTML, you can embed Javascript using {}: ```javascript= <h1>Welcome to my page, {name}!</h1> ``` ---- This is great for showing **dynamic data**! Above, the variable name is dynamic -- it depends on whatever was entered as the name. Especially great for conditional rendering, which we will cover soon! --- ## Rendering Components in Other Components Let's say you have a contact page and you want to have a form inside of the contact page. You may implement this by having a Contact component and a Form component. In this case, you want to render the Form inside of the Contact component. Let's look at how that would look like ---- ```javascript= import Form from '{PATH TO FORM.JS}'; class Contact extends React.Component{ render(){ return( <h1>Contact me!</h1> <Form/> ); } } ``` You're importing the Form component then using your component as a regular HTML tag! Whatever JSX you have in the Form component will be rendered within the Contact component. ---- ### 🚨🚔 Weewoo Weewoo 🚔🚨 ### Error Approaching! We get an error if we do this! Does anybody know why? ---- We are returning two JSX tags (h1 and Form), but we can only return one! To fix this, just wrap everything in a div tag: ```javascript= return( <div> <h1>Contact me!</h1> <Form/> </div> ); ``` --- ## Component Data: Props Props are used to pass data from one component to another. You cannot change the value of your props! **Example**: If you have a todo app, you may have a home component and a list of todos component (TodoList) If your home component has the todos data (like a list of todos), you will want to send that data to TodoList to render ---- ```javascript= /* Home component */ class Home extends React.Component{ render(){ let arrOfTodos = ["eat", "sleep", "uh"]; return( // todos is the prop name! <TodoList todos={arrOfTodos} /> ); } } ``` ---- ```javascript= /* TodoList functional component */ const TodoList = (props) => { return( { props.todos.map(); } ); } ``` ---- Use map whenever you need to render every element of an array! Each todo will be mapped to an h1 tag that says the given todo! ```javascript= /* TodoList class component */ class TodoList extends React.Component{ render(){ return( this.props.todos.map(todo => <h1>{todo}</h1>) ); } } ``` --- ## Component Data: State State allows you to store dynamic data that lasts the entire life of your component State is an object of key:value pairs. Use case: collect data (such as through a form), that is changed whenever a user types into the input ---- ### Initializing State Initialize your state inside of your constructor: ```javascript= class Example extends React.Component{ constructor(){ // always call super! you'll get an error if you don't super(); this.state = { stateKey: stateVal } } } ``` ---- ### Changing State You don't want to change the ```this.state``` variable directly! There's a specific function to change the state. DO THIS 👇👍👌🤩 ```javascript= this.setState({stateVar: newStateVal}); ``` **NEVER** THIS 🚫🛑🙅‍♂️ ```javascript= this.state.stateVar = newStateVal; ``` ---- Whenever you change a component's state, the component will re-render. Nani!? You usually store state in order to display some dynamic data. Therefore, when you change the state, you most likely want to update the UI, so React re-renders the component to show any changes! --- ### Conditional Rendering Conditional rendering is a perfect example of how state is used to change what's displayed on the UI! In essence, use ternaries to decide whether to render one component or the other! Utilizing ternaries within JSX makes your code look clean 😎 ```javascript if (a > b) ? a : b; ``` --- ## Event Handlers Event handlers are functions that run when a certain event happens Common events are when a user clicks on a button or types in a textbox. Ex: onClick(), onKeyPress(), onMouseOver(), onChange() ---- ## Structure of an Event Handler ```javascript= class BtnExample extends React.Component{ constructor(){ super(); this.btnClick = this.btnClick.bind(this); } btnClick(){ alert("you clicked me"); } render(){ return( <button onClick={this.btnClick}>Click</button> ); } } ``` --- ## Example: Pop ups! Let's say we have a button that displays a pop up and whenever we click the close button on the pop up, the pop up disappears. Conditional rendering and event handlers can help us out with that! First, we'll want a state variable called "showPopup" that'll be set to true if we want the pop up to be displayed or false if we don't want the pop up to display. --- # Let's code! --- # Why code when you can use somebody else's code lmao ---  https://material-ui.com/ ---- ## Installation ``` npm install @material-ui/core ``` ---- ## Use a Pre-Made Button! ``` import Button from '@material-ui/core/Button'; ```