DEV Community: Randy Rivera

React and Redux: Part 2

Randy Rivera — Wed, 05 Jan 2022 15:24:32 +0000

Hello again! Let's continue forward with the last of these lessons for this particular section.
In the last post we created Redux store to handle the messages array and created an action for adding new messages. Now we need to provide React access to the Redux store and the actions it needs to dispatch updates.
React Redux provides a small API with two key features: Provider and connect.
Here we'll focus on Provider. It's a wrapper component from React Redux that wraps your React app. Which then allows us to access the Redux store and dispatch functions throughout our component tree.
Provider takes two props, the Redux store and the child components of our app.
It will look like this.

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};



const store = Redux.createStore(messageReducer);

// React:

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {  
    this.setState((state) => {
      const currentMessage = state.input;
      return {
        input: '',
        messages: state.messages.concat(currentMessage)
      };
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.state.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component {
  // Render the Provider below this line
  render() {
    return (
    <Provider store={store}>
    <DisplayMessages/>
    </Provider>
    )
  }

};

As you can see, we rendered the Provider from ReactRedux and passed the Redux store as a prop. Then we rendered the DisplayMessages component as a child. Once we finished, we can see our React component rendered to the page.
Obviously there's a lot more to learn about this but I'm just basics.

Map State to Props

The Provider component allows you to provide state and dispatch to your React components, but you must specify exactly what state and actions you want.
You can accomplish this by creating two functions: mapStateToProps() and mapDispatchToProps().
With these functions, you declare what pieces of state you want to have access to and which action creators you need to be able to dispatch.
FreeCodeCamp wants us to create a function mapStateToProps. For this function it will take state as an argument, then return an object which maps that state to specific property names. Then create a property messages in the object that's being returned and set it to state.

const state = [];

function mapStateToProps(state) {
  return {
    messages: state
  }
}

The properties become available to our component via props. FreeCodeCamp provides us with the store.subscribe method to implement mapStateToProps() behind the scenes.

Map Dispatch to Props

The mapDispatchToProps() function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It also returns an object that maps dispatch actions to property names, which become component props. With that, each property returns a function that calls dispatch with an action creator and any relevant action data.
We have access to this dispatch because it's passed in to mapDispatchToProps() as a parameter when you define the function, just like you passed state to mapStateToProps()
Behind the scenes, React Redux is using Redux's store.dispatch
Example, we have a addMessage() action creator that takes a message as an action payload. The object returned from mapDispatchToProps() for this action creator would look like this.

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

function mapDispatchToProps(dispatch) {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
}

The object here has a property submitNewMessage set to the dispatch function, which takes a parameter for the new message to add when it dispatches addMessage().

Connect Redux to React

Now that we've written both the mapStateToProps and the mapDispatchToProps functions, you can use them to map state and dispatch to the props of one of our React components.
The connect method has two optional arguments, mapStateToProps() and mapDispatchToProps(). They are optional because you may have a component that only needs access to state but doesn't need to dispatch any actions, or vice versa.
To use such method, you'll have to pass in the functions as arguments, and then call the result with our component. It will look like so:

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

FreeCodeCamp wants us to connect the component Presentational to Redux with the connect method from the ReactRedux global object, and call it on the Presentational component. Assigning the result to a new const called ConnectedComponent that represents the connected component.

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;

Answer:

 const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational)

Here the The Presentational component received a prop messages via connect and received a prop submitNewMessage via connect.

Connect Redux to the Messages App

With learning about how to use connect we can now apply what we've learned to our React Component that handles messages.
Container components are connected to Redux. These are typically responsible for dispatching actions to the store and pass store state to child components as props.
Here FreeCodeCamp wants us to create a new component const called Container that uses connect to connect the Presentational component to Redux. Then, in the AppWrapper, render the React Redux Provider component. Pass Provider the Redux store as a prop and render Container as a child. Once everything is setup, you will see the messages app rendered to the page.

const mapStateToProps = (state) => {
  return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (newMessage) => {
       dispatch(addMessage(newMessage))
    }
  }
};

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Define the Container component here:


class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Complete the return statement:
    return (null);
  }
};

Answer:

const mapStateToProps = (state) => {
  return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (newMessage) => {
       dispatch(addMessage(newMessage))
    }
  }
};

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational)


class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Provider store={store}>
      <Container/>

      </Provider>
    );
  }
};

Extract Local State into Redux

Nice work! Just like me you're learning about React and Redux and all it's wonders this isn't the end though. There's still so much we have to work towards and learn more about. Please don't give up on making things happen.
Let's recall that you wrote all the Redux code so that Redux could control the state management of your React messages app. Now that Redux is connected, you need to extract the state management out of the Presentational component and into Redux. We have Redux connected, but we are handling the state locally within the Presentational component.
FreeCodeCamp wants us In the Presentational component, remove the messages property in the local state. These messages will be managed by Redux.
Next, modify the submitMessage() method so that it dispatches submitNewMessage() from this.props, and pass in the current message input from local state as an argument. Because you removed messages from local state, remove the messages property from the call to this.setState() here as well. Finally, modify the render() method so that it maps over the messages received from props rather than state.

submitMessage() {
    this.setState((state) => ({
      input: '',
      messages: state.messages.concat(state.input)
    }));
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.state.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

Answer:

  submitMessage() {
   this.props.submitNewMessage(this.state.input)
    this.setState({
      input: ''
    })
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.props.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

And that is it for the React and Redux Lesson on freeCodeCamp. Thank you so much for reading these as I go through them. Helping myself and others,

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/react-and-redux

This can get complicated quickly. there's a link below if you want to experiment on your own machine, the Create React App comes configured and ready to go.

React and Redux: Part 1

Randy Rivera — Sun, 02 Jan 2022 15:55:16 +0000

Getting Started with React Redux

Let's just go over what we have learned so far from FreeCodeCamps lessons. React is a view library that you provide with data, then it renders the view in an efficient way.
Redux is a state management framework that you can use to simplify the management of your application's state.
Basically, in a React Redux app, you create a single Redux store that manages the state of your entire app.
Your React components subscribe to only the pieces of data in the store that are similar to their role. Then, you dispatch actions directly from React components, which then trigger store updates.
Over the course of these next post/small helpful articles, we'll create a simple React component which allows you to input new text messages. Which are then added to an array that's displayed in the view.
Next, we'll create a Redux store and actions that manage the state of the messages array. When all of that is set and done, we'll use react-redux to connect the Redux store with your component, then extracting the local state into the Redux store.

class DisplayMessages extends React.Component {

  render() {
    return <div />
  }
};

Here we start with a DisplayMessages component. We need to add a constructor to this component and initialize it with a state that has two properties: input, that is set to an empty string and messages set to an empty array.

class DisplayMessages extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  render() {
    return <div />
  }
};

Manage State Locally First

Here we'll finish creating the DisplayMessages component.
We first need to in render() method have the component render an input element, button element, and ul element.
When the input element changes, it should trigger a handleChange() method. Also the input element should render the value of input that's in the component's state. The button element will trigger a submitMessage() method when it's clicked.
Now, we should be writing these two methods. The handleChange() method should update the input with what the user is typing and the submitMessage() should concatenate the current message(stored in input) to the messages array in local state, and clear the value of the input.
With the ul we need to map over the array of messages and render it to the screen as a list of li elements.
FreeCodeCamp wants a lot but it's not too complicated.

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // Add handleChange() and submitMessage() methods here

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }

        { /* Change code above this line */ }
      </div>
    );
  }
};

Answer:

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
        this.handleChange = this.handleChange.bind(this);
        this.submitMessage = this.submitMessage.bind(this);
  }

  handleChange(event) {
    this.setState({
      input: event.target.value,
      messages: this.state.messages
    })
  }
  submitMessage() {
    this.setState({
       input: '',
       messages: [...this.state.messages, this.state.input]
    })
  }

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange} value={this.state.input}></input>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>{this.state.messages.map(l => <li>{l}</li>)}</ul>
      </div>
    );
  }
};

Extract State Logic To Redux

Now that we have finished the React Component, we need to move the logic it's performing locally in its state into Redux.
This is the first step to connect the simple React app to Redux. The only thing our app can do at the moment is add new messages from the user to an unordered list.
The instructions that freeCodeCamp has asked of us is actually quite easy.
First, the want us to define an action type ADD and set it to a const ADD. Then, define an action creator addMessage() which creates the action to add a message. We need to pass a message to this action creator and include the message in the returned action. With it return an object with type equal to ADD and message equal to the message that is passed in.
Now they want us to create a reducer called messageReducer() that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer.
Answer:

const ADD = 'ADD'

function addMessage(message) {
  return {
  type: 'ADD',
  message
 }
}

const messageReducer = (intialState = [], action) => {
  switch(action.type) {
    case 'ADD':
    return [...intialState, action.message];
    default:
    return intialState;

  }
}


const store = Redux.createStore(messageReducer)

Working with Bootstrap: Part 3

Randy Rivera — Sun, 26 Dec 2021 15:13:15 +0000

Create a BootStrap Headline

Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills. FreeCodeCamp Provides us with the following instructions.
To start with, create an h3 element, with the text jQuery Playground.
Then Color your h3 element with the text-primary Bootstrap class, and center it with the text-center Bootstrap class.

<h3 class="text-primary text-center">JQuery Playground</h3>

House our page within a Bootstrap container-fluid div

Continuing from the last lesson, now they want us to just make sure all the content on your page is mobile-responsive.
By nesting the h3 element within a div element with the class container-fluid.

<div class="container=fluid
<h3 class="text-primary text-center">JQuery Playground</h3>

</div>

Creating a Bootstrap Row, Splitting the row, bootstrap wells, adding elements within Bootstrap Wells, applying the default bootstrap button style..

FreeCodeCamp just wanted us to add in extra things to our code as you see below nothing new except for the wells which can create a visual sense of depth for your columns.

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
  </div>
</div>

Create a Class to Target with jQuery Selectors

Sometimes we create classes for the purpose of selecting these elements more easily using jQuery. By giving each of our button elements the class target

 <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>

Add id Attributes to Bootstrap Elements

We can give each of our elements an id attribute.
Each id should be unique to a specific element and used only once per page.
Let's give the well on the left the id of left-well and the one of the right the id of right-well.

<div class="well" id="left-well">
  <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
<div class="well" id="right-well">

Give Each Element a Unique id

*Let's give each of our buttons a unique id starting with a target1 and ending with target6.

<button class="btn btn-default target" id="target1"></button>
        <button class="btn btn-default target" id="target2"></button>
        <button class="btn btn-default target" id="target3"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4"></button>
        <button class="btn btn-default target" id="target5"></button>
        <button class="btn btn-default target" id="target6"></button>

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap

Working with Bootstrap Part 2

Randy Rivera — Fri, 17 Dec 2021 16:04:44 +0000

Continuing Forward!

Create a Custom Heading

Let's make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.

(link to challenge) => https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap/create-a-custom-heading

Nest the first image and your h2 element within a single <div class="row"> element. Then nest the h2 element within a <div class="col-xs-8"> and your image in a <div class="col-xs-4"> so that they are on the same line.
Answer:

  <div class="row">
    <div class="col-xs-8">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
  </div>
<div class="col-xs-4">
  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
  </div>
  </div>

Add Font Awesome Icons to our Buttons

Font Awesome is a convenient library of icons. These icons can be webfonts or vector graphics. They're treated just like fonts.
We can include it in any of our apps by adding the following code to the top of our HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

We can also add the Front Awesome classes to the i element to turn it into an icon, for example:

<i class="fas fa-thumbs-up"></i>

Add Font Awesome Icons to all of our Buttons

Let's Use Font Awesome to add an info-circle icon to our info button and a trash icons to your delete button.
Code

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i>Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

Answer:

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fas fa-trash"></i>Delete</button>
    </div>
  </div>

Responsively Style Radio Buttons

We can use Bootstrap's `col-xs- classes on form` elements, too! This way, our radio buttons will be evenly spread out across the page.

Let's nest both of our radio buttons within a <div class="row"> element. Then nest each of them within a <div class="col-xs-6"> element.
Code:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

Answer:

<div class="row">
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    </div>
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
     </div>
    </div>

Responsively Style Checkboxes

Bootstrap's col-xs-* classes are fitting to all form elements, you can use them on your checkboxes too!
Let's nest all three of our checkboxes in a <div class="row"> element. Then nest each of them in a <div class="col-xs-4"> element.

<div class="row">
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label>
  </div>
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label>
  </div>
  <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label>
    </div>
  </div>

Style Text Inputs as Form Controls

We can add the fa-paper-plane Font Awesome icon by adding <i class="fa fa-paper-plane"></i> within our submit button element.
Here FreeCodeCamp wants us to give our form's text input field a class of form-control. Also to give our submit button the classes btn btn-primary. Finally to give this button the Font Awesome icon of fa-paper-plane
Answer:

<input class="form-control" type="text" placeholder="cat photo URL" required>
    <button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>

Line up Form Elements Responsively with Bootstrap

Here they just want us to align the form input and submission button on the same line. Just like we've previosuly had with the radio buttons and checkbox buttons.
Nest the form's text input within a div with the class of col-xs-7. Nest your form's submit button in a div with the class col-xs-5.
Answer:

 <div class="row">
      <div class="col-xs-7">
    <input type="text" class="form-control" placeholder="cat photo URL" required>
    </div>
    <div class="col-xs-5">
    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
    </div>
    </div>

Working with Bootstrap Notes: Part 1

Randy Rivera — Fri, 10 Dec 2021 15:35:35 +0000

We can also center our heading element to make it look way better, by just adding the class text-center to our h2 element.
Remember to separate each of them with a space when adding several classes like this.

<h2 class="red-text text-center">your text</h2>

Code:


<div class="container-fluid">
  <h2 class="red-text">CatPhotoApp</h2>

Answer:

<h2 class= "text-center red-text">CatPhotoApp</h2>

Create A BootStrap Button

Let's create a new button element below our kitten photo(below is a link to the creator of FreeCodeCamp to follow along). We're gonna give it the btn and btn-default classes as well as the text of like
Code:

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
/* insert button here */

Answer:

  <button class="btn btn-default">Like</button>

Create a Block Element Bootstrap Button

*Normally, your button elements with the btn and btn-default classes are only as wide as the text that they have.

It would only be as wide as the word Submit. By Making them Block Elements with the additional class of btn-block, our button will stretch to fill the page's entire horizontal space and any elements following it flow onto a new line below the block, like so.

<button class="btn btn-default btn-block">Submit</button>

Taste the Bootstrap Color Rainbow

The btn-primary class is the main color we'll be using in our app. It's useful for highlighting actions you want your user to take. By just replacing Bootstrap's btn-default class with btn-primary in our button.

<button class="btn btn-primary btn-block">Like</button>

Call out Optional Actions with btn-info

The btn-info class is used to call attention to optional actions that the user can take. Let's create a new block-level Bootstrap button below the like button with the text info and add Bootstrap's btn-info and btn-block classes to it.

<button class="btn btn-info btn-block">Info</button>

Warn Your Users of a Dangerous Action with btn-danger

The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.

 <button class="btn btn-block btn-danger">Delete</button>

Use the Bootstrap Grid to Put Elements Side by Side

Bootstrap uses a responsive 12-column grid system, which makes it easy to put elements into rows and specify each element's relative width.
For Example Bootstrap's col-md-* class. md means medium, and * is a number specifying how many columns wide the element should be.
We'll use col-xs-*, where xs means extra small(like an extra-small mobile phone) and * is the number of columns specifying how many columns wide the element should be.

<div class="row">
    <div class="col-xs-4">
  <button class="btn btn-block btn-primary">Like</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-info">Info</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-danger">Delete</button>
  </div>
  </div>

We put Like, Info, and Delete buttons side-by-side by nesting all three of the, within one <div class="row"> element. Then each of them within a <div class="col-xs-4"> element.

Ditch Custom CSS for Bootstrap

Here FreeCodeCamp just wants us to clean up our code and make our app look more conventional by using Bootstrap's built-in styles.
In the current code

<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

They want us to Delete the .red-text-. p, and smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border. Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.
Finally!!! They want us to remove the smaller-image class from the first img element and replace it with the img-responsive
Answer:

<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

Use a span to target Inline Elements

We can also use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?
Well with that being said by Using the inline span element. We can put several elements on the same line, and even style different parts of the same line differently.
Let's do so by nesting the word love inside the p element that currently has the text things cats love. Give the span the class text-danger to make the text red.
Code

<p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>

Answer:

<p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/Bootstrap

Bootstrap: Make Images Mobile Responsive

Randy Rivera — Thu, 09 Dec 2021 16:13:20 +0000

Continuing with the next lesson that FreeCodeCamp provided us.
First we need to add a new image below the existing one. We have to set its src attribute to https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg.
For the image to be exactly the width of our phone's screen, since we're learning Bootstrap all we need to do is add the img-responsive class to our image.
Code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Answer:

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
  <img class="img-responsive" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/Bootstrap

Bootstrap: Use Responsive Design with Bootstrap Fluid Containers

Randy Rivera — Thu, 09 Dec 2021 15:52:38 +0000

https://www.freecodecamp.org/learn/front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers

FreeCodeCamp is an extremely beneficial tool that I've been using throughout these months. As you seen I'm learning just like you are. I provide help/solutions as much as I can give. Programming is something that you truly have to commit to. The time and effort you put into it, the urge to continue learning and getting it right. To have that knowledge and help others is incredible.
Now that onwards! During my first week or so of FreeCodeCamp, In the HTML section we built a Cat Photo App. We're coming back to it to style it with Bootstrap responsive CSS framework.
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements, meaning there's need to design a mobile version of it.
You can add Bootstrap to any app by adding the following code to the top of your HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

For our case they have already added it for us to the page behind the scenes. They want us to nest all of our HTML (except the link tag and the style element) in a div element with the class container-fluid.

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

Answer:

<div class=container-fluid>
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>

Redux: Copy an Object with Object.assign

Randy Rivera — Wed, 01 Dec 2021 17:33:11 +0000

The last posts worked with arrays, but there are ways to help enforce state immutability when state is an object. A useful tool for handling objects is the Object.assign()
Object.assign() takes a target object and source objects and maps properties from the source objects to the target object. This is used to make shallow copies of objects by passing an empty object as the first argument followed by the object(s) you want to copy.
Example:

const myObject = Object.assign({}, obj1, obj2);

This creates myObject as a new object, which contains the properties that currently exist in obj1 and obj2.
Code:

const defaultState = {
  user: 'CamperBot',
  status: 'offline',
  friends: '732,982',
  community: 'freeCodeCamp'
};

const immutableReducer = (state = defaultState, action) => {
  switch(action.type) {
    case 'ONLINE':
      // Don't mutate state here or the tests will fail
      return
    default:
      return state;
  }
};

const wakeUp = () => {
  return {
    type: 'ONLINE'
  }
};

const store = Redux.createStore(immutableReducer);

Here we have a Redux state and actions that were modified to handle our object situation. We need to edit the code to return a new state object for actions with the type ONLINE, which set the status property to the string online

*Answer:

const defaultState = {
  user: 'CamperBot',
  status: 'offline',
  friends: '732,982',
  community: 'freeCodeCamp'
};

const immutableReducer = (state = defaultState, action) => {
  switch(action.type) {
    case 'ONLINE':
      const myObject = Object.assign({}, state, {status: 'online'})
      return myObject;
    default:
      return state;
  }
};

const wakeUp = () => {
  return {
    type: 'ONLINE'
  }
};

const store = Redux.createStore(immutableReducer);

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux

Redux: Never Mutate State

Randy Rivera — Wed, 01 Dec 2021 17:20:50 +0000

Today FreeCodeCamp will be giving us a lesson about enforcing the key [principle of state immutability in Redux. Which means that you never modify state directly. Instead you return a new copy of state.
Redux does not actively enforce state immutability in its store or reducers. Remember strings and numbers are primitive values and are immutable by nature. In other words, 3 is always 3. You cannot change the value of the number 3. An array or object, however, is mutable.
Code:

const ADD_TO_DO = 'ADD_TO_DO';

// A list of strings representing tasks to do:
const todos = [
  'Go to the store',
  'Clean the house',
  'Cook dinner',
  'Learn to code',
];

const immutableReducer = (state = todos, action) => {
  switch(action.type) {
    case ADD_TO_DO:
      // Don't mutate state here or the tests will fail
      return
    default:
      return state;
  }
};

const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    todo
  }
}

const store = Redux.createStore(immutableReducer);

Above we have a store and reducer in the code editor for managing to-do items. You have to finish writing the ADD_TO_DO case in the reducer to append a new-to-do to the state. You have tp find a way to return a new array with the item from action.todo appended to the end.
Answer:

const ADD_TO_DO = 'ADD_TO_DO';

const todos = [
  'Go to the store',
  'Clean the house',
  'Cook dinner',
  'Learn to code',
];

const immutableReducer = (state = todos, action) => {
  switch(action.type) {
    case ADD_TO_DO:
      let newList = [...todos]
      newList.push(action.todo)
      return newList;
    default:
      return state;
  }
};

const addToDo = (todo) => {
  return {
    type: ADD_TO_DO,
    todo
  }
}

const store = Redux.createStore(immutableReducer);

store.dispatch(addToDo('PS5 Time'))****
console.log(store.getState()) // 
[ 'Go to the store',
  'Clean the house',
  'Cook dinner',
  'Learn to code',
  'PS5 Time' ]


console.log(todos) // 
[ 'Go to the store',
  'Clean the house',
  'Cook dinner',
  'Learn to code' ]

Use the Spread Operator on Arrays

(ES6) To help enforce state immutability in Redux is the spread operator: .... which I used in the lesson above which produces a new array from an existing array.
To clone an array but add additional values in the new array, you could write [...myArray, 'new value']. This would return a new array composed of the values in myArray and the string new value as the last value.
It's important to know that it only makes a shallow copy of the array. It only provides immutable array operations for one-dimensional arrays.
Code:

const immutableReducer = (state = ['Do not mutate state!'], action) => {
  switch(action.type) {
    case 'ADD_TO_DO':
      // Don't mutate state here or the tests will fail
      return
    default:
      return state;
  }
};

const addToDo = (todo) => {
  return {
    type: 'ADD_TO_DO',
    todo
  }
}

const store = Redux.createStore(immutableReducer);

Answer:

const immutableReducer = (state = ['Do not mutate state!'], action) => {
  switch(action.type) {
    case 'ADD_TO_DO':
      let newArray = [...state, action.todo]
      return newArray
    default:
      return state;
  }
};

Remove an Item from an Array

Now we gotta practice removing items from an array. Other useful JavaScript methods include slice() and concat().
The reducer and action creator were modified to remove an item from an array based on the index of the item. Let's Finish writing the reducer so a new state array is returned with the item at the specific index removed.

*Code:

const immutableReducer = (state = [0,1,2,3,4,5], action) => {
  switch(action.type) {
    case 'REMOVE_ITEM':
      // Don't mutate state here or the tests will fail
      return
    default:
      return state;
  }
};

const removeItem = (index) => {
  return {
    type: 'REMOVE_ITEM',
    index
  }
}

const store = Redux.createStore(immutableReducer);

Answer:

const immutableReducer = (state = [0,1,2,3,4,5], action) => {
  switch(action.type) {
    case 'REMOVE_ITEM':
      let a = state.slice(0, action.index)
      let b = state.slice(action.index + 1)
      return a.concat(b)
    default:
      return state;
  }
};

const removeItem = (index) => {
  return {
    type: 'REMOVE_ITEM',
    index
  }
}

const store = Redux.createStore(immutableReducer);

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux

Write a Counter with Redux

Randy Rivera — Tue, 30 Nov 2021 19:06:23 +0000

Now that both you and I have learned all the core principles of Redux! We've seen how to create actions and action creators, create a Redux store, dispatch your actions against the store, and design state updates with reducers. You've even seen how to manage complex state with reducer composition and handle asynchronous actions.
In this section, you'll execute a simple counter with Redux from scratch. The basics are provided in the code editor, but you'll have to fill it all in. Once you're finished you should be able to dispatch INCREMENT or DECREMENT actions to increment or decrement the state held in the store. Good luck building your first Redux app.
Provided Code:

const INCREMENT = null; // Define a constant for increment action types
const DECREMENT = null; // Define a constant for decrement action types

const counterReducer = null; // Define the counter reducer which will increment or decrement the state based on the action it receives

const incAction = null; // Define an action creator for incrementing

const decAction = null; // Define an action creator for decrementing

const store = null; // Define the Redux store here, passing in your reducers

Answer:

const INCREMENT = 'INCREMENT'; 
const DECREMENT = 'DECREMENT'; 

const counterReducer = (state = 0, action) => {
  switch(action.type) {
    case INCREMENT:
    return state + 1
    case DECREMENT:
    return state - 1
    default:
    return state
  }
}

const incAction = () => {
  return {
    type: INCREMENT
  }
};

const decAction = () => {
  return {
    type: DECREMENT
  }
}; 

const store = Redux.createStore(counterReducer); 

console.log(store.getState()) // 0
store.dispatch(incAction()) 
console.log(store.getState()) // 1

Use Middleware to Handle Asynchronous Actions

Randy Rivera — Tue, 30 Nov 2021 18:55:00 +0000

At some point you'll need to call asynchronous endpoints in your Redux app, so how do you handle these types of requests? Redux provides middleware designed specifically for this purpose, called Redux Thunk middleware.
I'm still kinda effy about this particular topic so like you I myself am still learning.
To include Redux Thunk middleware, you pass it as an argument to Redux.applyMiddleware(). This statement is then provided as a second optional parameter to the createStore() function. The code will be provided below. Take a look at the code at the bottom of the editor to see this. Then, to create an asynchronous action, you return a function in the action creator that takes dispatch as an argument. Within this function, you can dispatch actions and perform asynchronous requests.
Code:

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {
    // Dispatch request action here

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // Dispatch received data action here

    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);

Here an asynchronous request is simulated with a setTimeout() call. Dispatching an action before initiating any asynchronous behavior so that your application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once you receive the data, you dispatch another action which carries the data as a payload along with information that the action is completed.
Remember that you're passing dispatch as a parameter to this special action creator.
We need to write both dispatches in the handleAsync() action creator. Dispatch requestingData() before the setTimeout(). Then, after you receive the data, dispatch the receivedData()action, passing in this data.
Treat the dispatch argument as a function and pass the action events in it.
Answer:

const handleAsync = () => {
  return function(dispatch) {
    dispatch(requestingData())
    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      dispatch(receivedData(data)) // This sequence mimics the process of requesting the data, receiving the data and then dispatching the received data.

    }, 2500);
  }
};

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux

Send Action Data to the Store

Randy Rivera — Tue, 30 Nov 2021 18:19:56 +0000

Actions usually come from some user interaction and they tend to carry some data with them which Redux store needs to know.
Code:

const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // Change code below this line

    // Change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // Change code below this line

  // Change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());

We have a notesReducer() and an addNoteText() action creator defined in the code editor. We first have to finish the body of the addNoteText() function so that it returns an action object with a type propertywith a value ofADD_NOTE. As well as, a text property set to the note data that's passed into the action creator.
After that we gotta finish writing the switch statement in the notesReducer(). We need a case that handles the addNoteText) actions. The case should be executed whenever there is an action of type ADD_NOTE and it should return the text property on the incoming action as the new state.
Answer:

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    case ADD_NOTE:
    return action.text,
    default:
      return state;
  }
};

const addNoteText = (note) => {
  return {
  type: ADD_NOTE,
  text: note
  }

};

console.log(store.getState()); // Initial State
store.dispatch(addNoteText('Hello!')); // Hello!
console.log(store.getState()); // Initial State