Request: I need to improve my “thinking in React” in terms of componentizing/composing everything. I also want to start organizing my CSS in a way that’s scalable for larger projects when they come. Critiques in these two veins, especially from those with experience in those two arenas, are highly and humbly requested.
Functionality:
- type in markdown, watch html come out.
- You can copy the HTML to the clipboard by pressing a button.
- You can resize either window to maximize or restore it.
Background: I came back to FCC after a few months away. Since the Beta had expired, I had the choice of cut/pasting all my prior work, or redoing the challenge waypoints. Things which I didn’t use out of unfamiliarity (ES6 syntax, array functions) became my primary purpose to master. It was great to see if I could outhack myself. In a similar vein, I am re-submitting my Front End projects after forcing myself to understand the Redux lessons, and having spent a lot of time reading the React documentation / Dan Abramov’s posts.
This Project: My Markdown Previewer I made in pure React (no Redux), and I initially had one Container component that was controlling all the JSX because I couldn’t see how to componentize it. This is a refactoring of that initial submission for the Beta. I’ve added comments to develop good habits for myself and to make your lives easier. Please tell me if the comments are lacking.
Update: Calling out mods I think I remember talking about working with React in a professional context for help. If I missed the mark, but you know someone who can guide me better, please do. @kevinSmith, @DanCouper. @others?
Just taking a quick look, it looks fairly logically put together.
“Thinking in React” I think is just something you learn by doing. You have to struggle through it. And work through some other people’s code. There are a lot of great tutorials on youtube where you can code along.
As you scaling projects, you’ll have to get beyond codepen. It’s great for small projects like these, but will get unmanageable pretty fast. Webpack makes is so you can break things into separate files and folders, and create-react-app is a great way to get started with that. I would find some video tutorials that use create-react-app.
There are different ways to organize your code. I like a folder structure that mimics the component tree structure. I often use a container/presentations structure so those both go in the same folder along with the style folder for that component. If I need a component that gets used in a lot of places I’ll have a folder for them. There are different ways to deal with the CSS/SASS/etc. I like putting them with their components but if there are some universals I will put them in their own common file. Really, there are a lot of different ways to handle it. I think it’s just a matter of experience.
1 Like
you’ll have to get beyond codepen … I would find some video tutorials that use create-react-app.
I felt that limit during the Front End projects, and installed VS Code and create-react-app on my local machine. I’ve played with it a bit, although I’m not fully sure how to use node, but I figure I’ll learn that later in the curriculum. I don’t know why I didn’t consider finding a tutorial that guides me through the process to see what I’m missing. Thanks!
I often use a container/presentations structure so those both go in the same folder along with the style folder for that component. If I need a component that gets used in a lot of places I’ll have a folder for them.
I’m not sure I understand the second sentence in the context of the first. Do you mean that if you re-use a component a lot like <GenericModalWindow /> in many different projects, you’ll put those in a folder outside the project’s folder hierarchy? (/common-components/GenericModalWindow/, e.g.)
I like putting them with their components but if there are some universals I will put them in their own common file.
Do you mean universals for the application, like basic color scheme in a top-level .css file in /common-styles/?
Really, there are a lot of different ways to handle it. I think it’s just a matter of experience.
I keep getting a similar unsatisfying answer about CSS organization in every place I look. I guess I’m just a wannabe anarchist who craves dogma.
Seriously, though, thanks for taking the time out. It definitely informed my thinking and pointed me in the direction of resources for which I hadn’t considered searching.
I’ve played with it a bit, although I’m not fully sure how to use node
Well, you’re not using node so much as using the node environment. It allows you to develop your react app split apart into different files and managing your libraries and then compile it into a front end friendly bundle when you’re ready.
Do you mean that if you re-use a component a lot like <GenericModalWindow /> in many different projects, you’ll put those in a folder outside the project’s folder hierarchy? ( /common-components/GenericModalWindow/ , e.g.)
Basically, yes. It is still in my src folder, but I usually create a folder called “common” where these go. There are different approaches, though.
Do you mean universals for the application, like basic color scheme in a top-level .css file in /common-styles/?
Yes. If I have a style like “subheader” that I need for more than one thing (and for some reason I can’t have a component for it) then I’d put that in it’s own file. I do similar things with constants. For CSS, SASS will often let me do that, but for React Native (where I don’t have SASS) I’ll put them in a constants file.
1 Like
Thanks for your answers. This is the next big step in my practical learning.