React - Need Help with Project 👨‍💻

1

What is Going On?

  • I am putting together a side project, mostly just to learn some new parts of the React Ecosystem, but my goal is to make a learning tool.

What I Would Like From You

  • If you have the time list the top 5 FUNDAMENTALS of React in your opinion
  • If you have more time, list 5 Popular Tools that you like that are part of the React Ecosystem
  • If you still have more time, list 5 Advanced Topics surrounding React, in your opinion.

HUH???

  • This will help me break down React into smaller parts
  • I figure community feedback is a good idea, rather than me just putting in what I think is best

Thanks! :sunglasses: :monkey: :heavy_dollar_sign: :heavy_dollar_sign:

  • Thank for taking the time, I don’t expect in depth stuff. An example could be.
  • state, props, jsx, array methods, etc - again not looking for a novel, but feel free to write one.
2

Well, I don’t really have time to go through your list. I will say a few things.

A big step for me was when it was explained to me that each component has it’s own state. I’d thought that state was common to the program, but it is not. You have to wisely decide in which component to put your state.

The other big thing for me was youtube videos, especially a few by Brad Traversy. I would code along as he coded and that really helped.

1 Like
3

right on. state is for sure a central topic! i am by no means an expert on it. I like the Brad Traversy Videos as well. Maybe I will include some basic code along examples. I am at the stage where I want to try and combine all the skills I have learned here and produce something cool, so thanks for the input.

4

Huh?

Hey look. I’m normally supportive of people doing whatever with their projects but…

Imagine I told you that I want to design a course to teach Arabic to learn Arabic. That doesn’t make any sense, does it?

I mean, I could tell you about the grammatical structure, the syntax, the inflections when saying different words, but it’s all kind of meaningless unless you’re actually fluent first.

You should really do the basics first. Go through the React tutorials provided by Facebook, then do the projects recommended by FCC, THEN do your teaching React project.

When you have enough skill, do your project, post it here, and ask if you did it right. I’ll be happy to give you feedback when you do so.

5

  1. Modules /components make your code easier to reason about and reuse.

  2. Mutating state should be avoided.

  3. JSX (although controversial to some) makes your code easy to reason about in terms of the DOM layout.

  4. React is just JS. Don’t be afraid to apply your usual techniques, just avoid interacting with the DOM directly and avoid mutating state.

  5. Tooling takes time to setup, but is essential. Try Create React App if you don’t want to do this all yourself.

  1. create-react-app

  2. glamorous - CSS in JS option

  3. Redux - state container

  4. Axios - fetch alternative

  5. Jest - for testing

I’m not sure I can help with advanced topics, instead I’ll bullet point what has really made a difference to my understanding.

  • Atomic design principles - this was my single most important factor in learning React

  • Higher order components - help you to stay DRY, but can be confusing at first

  • componentDidMount is a good lifecycle event for asynchronous requests (like AJAX)

  • componentWillUnmount should be used to cancel any timers or similar processes that are running

2 Likes
6

thanks for taking the time to reply. i have never heard of glamorous, sounds interesting.
your thinking on the advanced stuff actually lines up with what i jotted down, HOC and lifecycles.

7

Mr. Positivity. Been there done that but thanks for taking the time to tell me what to do. I Said I was making a learning tool, not teaching react to people, so maybe next time don’t assume so much. you know how the rest of the saying goes.

8

no probs. Glamorous. It’s more of a JS approach. If you prefer working with CSS then Emotion is supposed to be really good, I haven’t got round to trying it yet.
Yup, you really have to admire the people who don’t have time to help, but somehow manage enough time to snark about you wasting their precious time. Why bother writing anything at all, if you are just going to be a dick.

1 Like
9

Element, props, children, state, modularity.

Babeljs.io, Eslint, React Developer Tools, that’s all I can think of right now.

1 Like
10

babel. yes i had overlooked that, and its crucial. thanks for the reply.

11

I suggest you to take a look at Gatsby (a React Static Site Generator) and Styled Components which is another CSS in JS alternative that I found very cool.