Created Nov 5, 2019

React is a JavaScript library used in creating interactive UIs (user interfaces) on the front-end of an application.

1. The Virtual DOM

The virtual DOM is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory, and synced with the "real" DOM by a library such as ReactDOM.

2. Components

Using components allows you to split the UI into independent, reusable pieces, and think about each piece in isolation. See the React Component API reference here.

3. JSX syntax / file extensions

JSX is a syntax extension to JavaScript. It allows for separation of concerns, rather than separation of technologies (i.e. HTML vs. JavaScript). React doesn't require use of .jsx file extensions, but most find it useful as a visual aid, and it also allows React to show more useful error and warning messages for debugging.

Stateless / Functional

• Should be used when you have no use for state or lifecycle methods
• Newly added to React, you can use state with functional components by creating a React hook and "hooking into using React state".

Stateful / Class

• Should be used whenever you need to use state or lifecycle methods.
• Newly added to React, you can use state with functional components by creating a React hook. See the React hooks API here.

1. Ensure that you have Node installed
2. Ensure that you have forked and cloned this repo to your computer with git clone https://github.com/amanda-post/amandas-react-workshop.git, then cd amandas-react-workshop

Then,

1. Open a terminal tab, and run npm install to download the dependenices.
2. In that same tab (after completion), run npm start to start your node server.
3. In a NEW terminal tab, run npm run build to start Webpack, which will watch and auto-transpile your files (using Babel). Make sure this tab remains running.
4. Open up a chrome tab at localhost:3000 to see your code being rendered.

• With this project, we will be building a team of 6 of our favorite Pokemon, who we will take to battle with us!

• Our task is to build out functionalities to add a Pokemon to a slot, and remove a Pokemon from its slot, and update a slot with a new Pokemon. Let's get started!

• Render App.jsx to our index.html.

• Create App, as a stateful/class component.
• Create a piece of state to store an array of pokemon objects, which will make up your team.
• Render the PokeTeam component inside of the App component.

• Create both PokeTeam and PokeTeamSlot as functional components.
• Connect the two components (in React style), using the comments at the top of each file as a guideline.

Leave this hard-coded for now; we will refactor momentarily.

• Make sure you are able to see the hard-coded PokeTeam and PokeTeamSlots in your browser.

• PokeTeam should render one PokeTeamSlot for each pokemon in the array in App's state

• PokeTeamSlot components should be able to conditionally render the pokemon's id, name, and img based on what is passed down to it via props.

• Set App's state to a real team of Pokemon, by importing and using examplePokeTeam.js
• You should see a rendered list of 6 pokemon, with their id, name, and image displayed.

• PokeTeamSlot should have conditional rendering, based on whether there is a pokemon or not at that given index in the pokemon team array passed down from App.
  • If there is no pokemon in that slot, render a <button> that says "Add a pokemon"
  • Else, keep the normal rendering of the pokemon's id, name, and img.

• Write functionality that updates App's state (pokemon array) using a query (either the pokemon's name orid), and the provided getPokemon function, found in the lib/ folder of this repo.
• Each PokeTeamSlot should have a form that can be used to call that function, and add a new pokemon.
  • Create a new component, called addPokeForm.jsx.
  • In this file, build out a stateful / class component with a form that allows the user to input a pokemon name or id, and updates App's state using the functionality we just built out.

• Capture the information typed into the <form>, so that we can update App's state with it.

We can do this by implementing & updating state within the addPokeForm component.

1. Write out functionality to update the state of addPokeForm as it changes with user input. Hint: you may need the onChange listener!
2. Write out functionality that takes the updated state and calls the function to update App's state with the new pokemon.

• Replace our non-functional "Add a pokemon" <button> with our addPokeForm component, so that whenever there is an empty slot, we will have a search form available to add it.

Further steps to test your abilities are to come!