When is it time for React.js?

Hello,

When it is time while learning JS to start learning React?
What must I know to start React?

And other question, beta part of FCC(react) is only the beginning of it or it is already enough for work?

Thanks in advance

2 Likes

When you have an application built on data that changes frequently. In that case you want your UI to be a function of the data. You don’t have to worry about the complex code needed to keep the UI in sync with the data, React will handle that for you.

React is designed to be built out of trees of many small, easily testable components. So as your application grows, the complexity stays fairly steady. Compare with trying to do the same thing with jQuery, where the complexity explodes as the application has features added.


Think about the Facebook timeline: the timeline is a component, and you have controls for it that are themselves components. You’ve data coming in constantly. Each piece of data sits in a little box, which is a component. That box has its own UI - like, share buttons, the data itself and so on, those are all components as well. The data could be text or a video or a picture, so those will be different components, the outer box will tell the data box which configuration it should render. And so on.

If you were writing something similar, instead of writing lots of JS logic to handle how it all interacts, you’d have a set of files which have the HTML described in them and some minimal JS that describes state etc: Timeline, TimelineControls (with further files for individual controls), TimelineItem, TimelineItemControls, TimelineItemVideo, TimelineItemText, TimelineItemImage, etc etc


Re FCC projects: the first few - portfolio, tribute website etc, these are not good usecases.

For the next few - Twitch leaderboard etc, setting up React is where the complexity lies compared to just simple JS, and you’d find there would be more boilerplate code vs. plain JS. But you’d start to see some advantages, things would become more consistent.

Then for projects like the recipe box, React would be a great fit for the front end. It’s designed for complex single-page apps, anyway. And beyond simple things, most applications you want to be single-page tend to have a level of complexity that makes React (or similar) quite a good fit, just generally makes your life easier - it removes the need for you to implement a whole bunch of painful code yourself


Re what you need to know: how to use JS modules, how to install and use things from NPM, how a React app should be structured. React has a tiny API, what it does is very simple once it all clicks in your head, so go through a bunch of tutorials.

Note that because React is so small, API-wise, there is a huge amount of extra stuff built by the community: a huge number of tutorials will talk about Redux, or React-Router or whatever. Ignore the extra stuff at first, you don’t need it until know you need it and it will make learning more difficult.

Create-react-app makes setting things up nice and easy, I’d advise that if you’re starting.

codesandbox.io is good for prototyping and playing around with things in the browser; it’s designed for prototyping React/Vue/Angular apps, and you’ll have more joy than faffing around with CodePen

8 Likes

I did the react beata … and its was good … but dosent suit my way or learning.
i followed this series of videos https://www.youtube.com/watch?v=JPT3bFIwJYA&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS
and this one to learn about react redux https://www.youtube.com/watch?v=qrsle5quS7A&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_

And after all that i decided to purchase there react course on udemy https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/overview
I got this course on offer for €9.99 … and im working my way through it at the moment … its brilliant and really covers everything extremely well.
So my recommendation would be if you want to learn for free do top two video bundles … but else just get this course as its excellent.

As for what you need to know before you start react … I think you should be comfortable with working with objects and arrays … and manipulating them, sending requests to apis and receiving data … also being used to working with lots of folders in a workspace and importing files …but it shouldnt be a big issue if your not … just go at a slower pace and you will find you can understand it… also remember its not all going to stick in your memory … you are going to need to practice it … start small and then try to do bigger things.

I previously did vue so the react concept wasnt all new to me and im finding it easy to understand … but there is so much you can do its hard to remember it all lol …

If you want to learn React you should probably start learn Redux. In my opinion the best way to learn React and Redux is to read official documentation. Do all freecodecamp projects first on vanila Js and then rewrite them with React. There are some helpful links:

1 Like

After you understand how to use Array.reduce, Array.map, Array.filter…

So as I understand after javascript part of beta curriculum I can go deep in the react?

At my current job, we’re using React and jumping to React Native next week. I would say finish the frontend cert, but while you’re doing things think about using reduce, map, filter, some… After your frontent cert if you’re comfortable with those methods you will do fine in React.

You need to understand JS very well to use React. I would also suggest getting used to some ES6 ideas like arrow functions, spread operators, and object deconstruction - they are not hard to learn, but they get used a lot in React.

2 Likes

Sure, or do it the same time, learning React will help learning JS and vice versa. React is not complicated, but it doesn’t hide the fact it’s just simple (modern) JS. The patterns you use to write React code work just fine in non-React JS.

so I must learn well JS part of the curriculum and then start React
thanks you all for help and advice :slight_smile:

@DanCouper That is as good of an explanation of what React does as I’ve ever read.

1 Like