I'm doing Colt Steele's Modern React Bootcamp and I wanted to share my notes.

This is the finished project and its scope.

Colt has a great way of easing you into complicated topics like passing props which I always find confusing. This project was a fun and easy way to practice using JSX loops and also passing data through components (like our pokemon).

The exercise asks you to take an array of 8 pokemon objects, each with id, name, type and base_experience properties and randomly separate them into two hands, then determine which hand is the winner by the accumulated number of points in each hand.

I got stuck at the end. Even though I could figure out the logic to randomize the selection, I couldn't figure out how to apply it to spread the pokemon array objects into two separate hands.

What Colt does is: -> Creates two arrays and then spreads all of the pokemon in the second array. -> Sets up a while loop that compares the two arrays as long as the first (empty loop) is smaller < than the second loop.
-> Declares a random index randIdx by applying a Math.floor() and Math.random() to the length of the second array (we called it handTwo in this example). -> Declares a random pokemon randPokemon which is equal to a spliced value from the handTwo array.

 - This value is at position `randIdx` in the array, and we have only selected the value at that index (that's what the '1' after `randIdx` is for).
 - Once we have this value, we immediately assign it position [0] (not sure my best guess is to avoid accumulating pokemon in the array 'randPokemon', please feel free to correct me in the comments if I'm wrong). 

-> Push randPokemon to array handOne.

The next step is to declare to variables, exp1 and exp2 and use the reduce array method to add up all of the experience points in each hand.

Finally, we pass them as props to Pokedex components comprised of Pokecard components and 'voila'!

For now, I won't go into much more details, if you have any questions, feel free to put them in the comments. I'll leave the link to the github repo below:

Pokedex exercise Github repository

React component conventions

• Each React component goes in a separate file.
• The name of your file should always match the name of the component in that file.

For example: src/Car.js for Car component. src/House.js for House component.

Capitalized component names are also a convention.

• All components should extend Component (imported from React).
• Each component should be exported as the default object from its given file

import React, {Component} from 'react';

class App extends Component {...

export default App;

🚨 Top level component should always be App in App.js (it's possible to tweak it), but the skeleton assumes it's called App.

Styling in React

The standard convention is to make your CSS file the same name as your component.

For example -> House.css for House component

Then we import it at the top of the House.js component

- create-react-app will automatically load that CSS

Conventional to add className="House" onto House div (top level element)

- and use that as prefix for sub-items to style: 

<div className="House">
    <p className="House-title"> {this.props.title} </p>
    <p className="House-address"> {this.props.addr} </p>
</div>

Images

To include images and CSS, you can import them in JS files.

We import them with the same syntax as components

• Store images in src/folder with the components. If there are many files, you can structure them however you want.

Conclussions

Importing assets is something that we do all the time in React.

In case you forget, you can always to refer to the App.js file that create-react-app give you:

import React, {Component} from 'react';
import logo from "./logo.svg"; // you're import an SVG
import "./App.css"; // you're importing a CSS file

class App extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <p>
                        Edit <code>src/App.js</code> and save to reload.
                    </p>
                    <p>This React app is INCREDIBLE </p>
                </header>
            </div>
        );
    }
}
export default App;

What Colt does:

Every time he makes a new component Dog.js, <Dog />, he also makes a new CSS file with the same name Dog.CSS, and then imports it at the top of every component I create.