3 Things I wish I'd known when starting with React

React has became one of the most used frameworks in the Javascript community. For beginners, learning React can seem overwhelming as it involves trying to navigate a world of libraries, plugins, dev tools, new features. But don't stress. To help you get started, Kitze joined us in the Prismic studios to share his most useful tips for beginners.

This is the transcript of the Interview: 3 Things I wish I knew when starting with React. Kitze (Web Developer, React Teacher, and vloger) and Sadek (Prismic's CEO) discuss the things that it's helpful to know before getting started with React: should you use Redux? Create-react-app? react-scripts? Hooks? JSX? Diving in and working on things yourself is the best way to learn, but a little help and guidance can only make things easier.

So whether you're going to watch the full video or just going to read the transcript, if you're interested in React, you should definitely have a look.

Don't forget to subscribe to our channel to get all of our latest interviews and tutorials.

Highlights:

• Don't start learning React with Redux, you can still create a production ready app.
• Tooling: Start with create-react-app and react-scripts. Don't start from a boilerplate. Delete the service worker.
• Classes are confusing. Don't use them. Hooks make components more readable.
• JSX can be difficult to understand when you're used to the traditional separation of concerns. Babel repl allows you to convert JSX to traditional functions so that you have a better understanding of what JSX is doing.

Sadek: I'm here at Prismic Studio with Kitze, and I want to ask you a question: Often, some of our users or people on the web, they start with a technology like React. And the thing is, when you start learning, there are these things that bug you, in this process. And sometimes it's a small thing that take an hour to unblock. And then you wish you knew before how to solve this these kind of things.

Kitze: Yeah, yeah.

Sadek: Do you have these kinds of situations?

Kitze: So we're diving in straight ahead. I thought there was gonna be like, Hi Kitze, how are you? How was your flight? Nothing.

Straight into React. All right so, yeah. I had a couple of these experiences myself when I was first starting to learn React myself. And then I'm seeing them all the time when people are asking me about advice around React, and at my workshops I get these kinds of questions. Like, number one, and the funniest one to me is someone starts like I had a friend. He starts learning React. And he like, messaged me the other day. And he's like, "Uh, I started with React today, but this Redux part is too confusing." Like, what Redux part? Like, Redux is a separate thing. React is a separate thing. So, I think, like the confusion around the entire, like, ecosystem and, like, we have like millions of libraries surrounding React. Could be a little bit confusing, especially for beginners. So, when a beginner starts with React, first thing they pick up is Redux, and that's not even needed. But when you like Google 'React tutorial' the first 10 things that pop up are like combination of React-Redux, React-Redux. So, all the beginners think that like

Sadek: Yeah tell me about it.

Kitze: If you don't use Redux, your apps cannot scale, and you cannot make a production ready app. So once they fall into that trap. Once you go down into that rabbit hole, and then you're basically learning and solving Redux problems instead of learning React, and a lot of people get, like, turned off, and they're like, "Oh this is too complex. I'm just gonna go with some auto-template-based language." So yeah, number one would be Redux

Sadek: Yeah, okay. Second one, now.

Kitze: Second one. Um, tooling was interesting until not so long ago, like we had problems with tooling. There was this funny image. There was a person standing in front of a white board. And it had a bunch of scribblings and stuff, and it says, "Mark is ready to start with his Hello World project in React." Because, like, starting with a simple Hello World project was so complex before Facebook like released Create React app, which is a tool. And even with Create React app, like. Now when I'm teaching my workshops, I'm telling people that you should use Facebook's tool, React scripts, and Create React app to bootstrap your apps. But eventually you might want to eject if you want to customize your set-up and so on. And then, once you eject, and once you enter the world of Webpack. You're lost. Then, it's like what the hell is going on here?

Sadek: Yeah.

Kitze: Where do we start? So, it's still, like Create React app and React scripts don't support plugins. So, beginners who want to add something, like I want to add Sass or Less, or these couple of other things, customizations for Babel or Webpack and so on. They cannot do them easily unless they eject or they are using one of the rewired projects. So, there are a couple of rewired projects. So, I still think that there's a space for improvement of the React tooling and setup for beginners. So, they can start with Facebook's tool, and eventually add plugins and stuff to just expand the tool, instead of ejecting. So, I still think that's like a problem.

Sadek: Oh, you still think that they should start with Create React app?

Kitze: Yeah definitely. I'm starting all of my apps with Create React app, and eventually, I'm just using React Rewired or some other app for rewiring the set up if I need to modify something. I'm usually modifying one to two things. So it's not like I need to modify the entire Webpack setup. I don't want to touch that thing, like-

Sadek: So, it's only a good idea to start from nothing, without the Create React app?

Kitze: No, it's, it's a bad idea. I do it in my basics workshop just so I can tell people, like hey. Don't worry. React doesn't require all of this custom tooling, and this like complex setup. But you can start with index.html file and pull the libraries from CDN. But eventually, you want a setup. You want a bundler. You want a minifier. You want Babel. You wanna compile things, and so on. Eventually you want the setup, and when you want it, you don't want to write it from scratch, number one. 'cause it's like a huge pain in the ass. Number two, you don't wanna use a boilerplate, because the boilerplates are like they include everything. Like literally every library that you can think of. Router, forms, all kinds of crazy things. So when you start from a boilerplate, as a beginner, you're maybe like, whoa.

Sadek: What do I think here?

Kitze: Yeah. And the only weird thing that Create React app gives you from the start is just a service worker. Thank, like, thankfully now, it's disabled. But until some time ago, they had like service workers shipped with your app, and people are like "Why do we even need this?" First thing you do, you create your- your app and then you delete the service worker. I still do that here. So, did we say two things?

Sadek: Two, yeah.

Kitze: So, number one was Redux, and number two was the setup.

Sadek: And the other thing was the setup.

Kitze: So, thing number three that, thankfully is going away now, is classes. So, like in the beginners workshop, when we start speaking about React and everything. Like everything is good. Everyone understands everything. Then, when we reach the part about classes, you can see people like "uhhhh what is going on now? This is not a Java workshop. Why did you put classes in Javascript? Why did you ruin the language?" So, usually people who are coming from other languages or frameworks. Like, let's say someone is front-end developer. He's just started with some template language, and now you tell them, "Hey! Now we need to learn classes." And they haven't started, like computer science. They don't know like object oriented programming. So-

Sadek: Personally, I moved to Javascript because of functions.

Kitze: You're spoiling it with classes, right?

Sadek: Everything's simpler with functions.

Kitze: Yeah, yeah. So, basically, they added classes to React because they wanted to push the entire ecosystem forward. So, they have classes because they were like, "Hey how about we push every ES6 feature forward." So people started adopting all of the ES6 features. And then, they realized this might have been a mistake, because now, we have so many other problems. Like you have to teach people how, like, this key word works, and the scoping is different. And you need to bind the methods. And then you see all kinds of, like, crazy things. Like you would see someone do like, uh, I don't know. Class header extends app. And you're like, no no no, but this is not object-oriented programming. And their intention was like, I just wanted to pass the props, and I don't blame them. It could be, like, pretty confusing when you start with it, at first. And then that was the major roadblock in all of my workshops. And it's a major roadblock for people who are starting with React.

Sadek: But you still can avoid using classes now?

Kitze: So now, finally, with Hooks, like they were released I don't know a couple of months ago. You can completely avoid using classes. I mean, if you If you work on a project that already has classes, you kinda have to know about classes. So, you can not completely escape them, and be like, "We're gonna, just, we're just gonna with Hooks, and nothing else." So, unfortunately, you cannot do that. But now, what I see is people who are starting with, uh, with Hooks, before knowing like, how anything look like with classes. They have an easier time adopting React. So, previously when I was explaining classes, and the craziness going around them, you would see people like, pulling back. You would see like, four or five people sneakily, like leave the workshop and be like, "Nope. I'm out of here. I don't like this." Now with Hooks, it's like super smooth. And they're like, okay I get it what's going on. If we wanna use state, we call the useState Hook. If we wanna use a side effect, we call the useEffect Hook. So I think-

Sadek: This makes also the component look like a simple function. Very easy.

Kitze: Yeah. It's just a function. It's more readable. You can like, follow what's going on. Now we have state. Now we have a certain effect, and so on. So I think that was like, uh the best thing that happened for React. Like in the last couple of-

Sadek: At last

Kitze: Yeah, yeah. And the fourth thing that like beginners are struggling with when they, especially when they start with React, is JSX. Because previously, they were told like we should have this traditional separation of concerns. You have presentation logic. You have view logic. You have styling logic. Like everything should be separate. In different files and so on. And now, you're teaching them the opposite. And you're like, nope! Everything should go in one file. And a lot of people are turned off by this idea initially. Also, when I saw like the React and JSX for the first time, I'm like, what the hell is going on? This looks like some weird DHP spaghetti, jQuery code. I don't wanna write this. I want my traditional separation of concerns. But when you start writing it, when you realize it is just Javascript, it's just a small, like, flavor on top of it. And then, when you see all the powerful things you can do with it, because it's literally just Javascript. Then you start appreciating more. But to talk about the problem. Like how can beginners like ease into JSX without like just learning JSX. And for them, it's going to be like this magic thing, and they don't know how it works. My advice would be just go to the Babel repl. If you go to the Babel website, they have this repl conversion thingy, where you put your JSX code, and it's gonna convert it to like function calls. And any time you're confused about, Will this index work in JSX? Or how is this itinerary working in JSX, and why is weird thing in a very specific way in JSX. Just take it to the Babel repl, convert it to normal Javascript, and then what you're gonna see is, oh, it's just function calls. It's gonna click for you, and any time you have a problem, just convert it, and then you're gonna see okay. So now that makes sense.

Sadek: Do you learn what's behind actually JSX

Kitze: Yeah, yeah, yeah. So, you can even write a small app, just to see the torture that you have to go through and write a React app without JSX, and just write it with just like normal React function calls. And then you realize, okay so this is basically I need something else that's gonna convert to these function calls, and is good

Sadek: You're gonna factor it back to JSX. Okay thanks. Well next video, we'll talk about GraphQL

Kitze: GraphQL, all right.