I'm trying to build a React-Redux 'Markdown Previewer' in codepen, but am having lots of trouble figuring out what is supposed to be doing what

I'm trying to build a React-Redux 'Markdown Previewer' in codepen, but am having lots of trouble figuring out what is supposed to be doing what
0.0 0

#1

I’m struggling quite a bit with React-Redux. I watched Dan Abramovs intro to redux 3 times, followed along with the coding 1 of those times, read the Redux documentation twice, and went through the React and Redux sections of freeCodeCamp 3 times each but I can’t seem to wrap my head around it. I get the very basics, but when it starts to get more complicated I get lost. I decided to try and build out the markdown previewer challenge to see if I could learn as I go, but I can’t get the preview field to update as I update the editor field. This is what I have so far, I could get it to display basic HTML like “This is the header” a text box that says “This is the editor” and basic stuff like that, but now the next step I’m working on is getting the editor field to dynamically update the preview field. As soon as I started trying to do that, everything went blank and the console stopped giving me any feedback.

const { Component } = React;
const { Provider, connect } = ReactRedux;


const previewReducer = (
  state='DEFAULT_STATE',
  action
) = {
  
};

const Header = () => (
  <p> This is the header </p>
);

const Editor = () => (
  <textarea id='editor' value={this.props.data.value}
    onChange={event => previewReducer(event)} />
);

const Previewer = () => (
  <p id='preview'> This is the Previewer </p>
);

const Footer = () => (
  <p> This is the Footer </p>
);

const MarkDownApp = () => (
  <div>
    <Header />
    <Editor />
    <Previewer />
    <Footer />
  </div>
);

const { createStore } = Redux;

ReactDOM.render(
  <Provider store={createStore(markDownApp)}>
    <MarkDownApp />
  </Provider>,
  document.getElementById('root')
);

I understand well enough to know that what I have right now shouldn’t work, but I don’t know why or how to fix it. I’m not really sure what I should be doing with my reducer which is why it’s empty.

Any help would be greatly appreciated. I’ve been banging my head against a wall for 2 weeks trying to learn react/redux.

Here’s a link to the codepen: https://codepen.io/chase-hippen/pen/KeOXLq


#2

Please comrade, be patient. No rush. Please take it easy. We all here to help each other.

I’m not a react expert, but already got your work to try understand possible issue.

This is not a answer dear, just wanted to tell and ask you please don’t be worry and be patient.

Just one thing. If something else is here about your work, please provide(such as HTML, and css).

Thank you so much.

Edit:
@wedge Hey Nathan, pal. As You kind of expert in react mate, would you please give a hand to our new pal please?
I try to find out, but react is so much for me, I’m not an expert. But hope could find the issue and bug with more code review. Thanks.


#3

Thanks for the words of encouragement. The only thing in html is <div id='root'></div> so I didn’t think that would be too relevant to the issue. There is no CSS.


#4

I suggest you have a try about code sandbox which comes with some dedicated support for react.

Just tried to paste your code, and it marked some places as error, such as lines 8 to 15.

I believe you can do it since you have more clue about react than me dear(I’m not a js/react expert, really sorry I cannot help you explicit).
Some code parts seems correct, such as markdowns like footer (don’t know what are called)

You start coding with this code sandbox(provided the link) and see if you could make it easier and faster.

I indeed reply if I get anything about it.

Keep going on great work comrade, please be patient, no rush, you can do it, it’s easy. Happy coding.


#5

Try this code sandbox pal which is like codepen, but seems come with better support for react.

I’m sorry I cannot help you explicit about it, becasue i’m not a JS/react person.

Since recently you have studied about react, I believe you can start it over with code sandbox, and make it done, as it seems just some parts are faulty in your code.

I will reply if I get any clue about it soon of course, but I believe you can do it.

Please be patient, it’s easy mate, you can do it. Almost done.

Happy programming.


#6

Thanks @NULL_dev but i’m hardly an expert haha. Happy to help though.

@cdhippen i’ve taken your code and tried to rewrite it so it achieves the goal of a previewer. It’s not a markdown previewer yet i’ll leave that to you.

Have a look at the code above and try understand each part. I was exactly where you are only a couple of weeks ago.

I think one big thing to understand is redux is designed for big projects not small ones like this. While i definitely recommend using it as a learning experience, it helps to understand it’s not efficient for these projects and to not expect anything magical at this scale (if anything it just adds more code). I would suggest making sure you understand react at a good level before incorporating redux. Once you understand react enough you will find the redux components quite simple to add on. Also planning is everything, make sure you scribble on paper for a while and get your layout with react/redux before coding. It will really save you a lot of editing in the long run.

Also definitely use codeSandbox and you can port it over to codepen once finished the react/redux parts if you like. It’s a lot better than codepen at picking up errors.

Anyways have a look at the code above (it’s far from good code but it works) and please reach out if you have any questions at all. I remember being so lost a couple of weeks ago trying to grasp these concepts until it clicks bit by bit. Happy coding :slight_smile:


#7

Thank you so much! I’ll keep working at it.