React and Redux - Moving Forward From Here

JavaScript
1

Tell us what’s happening:

Sorry I know it is dumb and stupid, but could anyone explain more about how to use React and Redux in a webpage?

Let’s say I had the code which is copy from the tutorial Extract Local State into Redux
In the tutorial, I can see the HTML elements such as input box, button, etc., but, what should I do to display all of them in the actual HTML file?

So far from the freecodecamp curriculum I have learned is using

  1. using script.js file
    <script src="./script.js"></script>
  2. Adding import at the beginning of the code
    import React from 'react'
    import ReactDOM from 'react-dom'

When I open the html file in the web browser, it displays as a blank page, with no input box or button can be interacted with. May I know anything I am missing?

Your code so far

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
  </main>
   <script src="./script.js"></script>
</body>

</html>

script.js

import React from "react";
import ReactDOM from "react-dom/client";

// Redux:
const ADD = 'ADD';

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

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

const store = Redux.createStore(messageReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    
    // Remove property 'messages' from Presentational's local state
    this.state = {
      input: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
  
    // Call 'submitNewMessage', which has been mapped to Presentational's props, with a new message;
    // meanwhile, remove the 'messages' property from the object returned by this.setState().
    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>
           {/* The messages state is mapped to Presentational's props; therefore, when rendering,
               you should access the messages state through props, instead of Presentational's
               local state. */}
          {this.props.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};
// Change code above this line

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

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

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

React and Redux - Moving Forward From Here

2

Hi there,

It is not dumb and it is not stupid. Feel free to ask questions. I tried the exercise out myself and it seems like what you have provided should work except that I did not modify anything above the following line:

// Redux

The code you provided has extra import statements at the top which is probably why the tests might be failing.

One thing that is not clear to me here is “Where do you see index.html?” I do not see that anywhere in the exercise. So please let me know in case I am missing something here.

Now, regarding your HTML in case you are doing this outside of the freeCodeCamp editor. You can add a div in the body and give it an id of “app”. Then, you need to call ReactDOM.createRoot method passing in the div element from above.

<div id="root"></div>

Inside script.js, do the following.

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<AppWrapper />);

I believe that should work. By the way, it also seemed like you were missing imports for Redux in case you run into that issue. In such a case, you would need to make sure you are using the Redux library in one way or another by having it installed or using a CDN or the like.

3

Thanks for reply.

Yep, the index.html isn’t part of the exercise. I’m trying to turn the exercise into a webpage on my own, which the previous curriculum, such as Responsive Web Design and JavaScript Algorithms and Data Structures allows me to do such things easily…

Updated :
I found this is what exactly I am looking for although I am not sure it is an ideal way to include react in a webpage?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.