Pinterest Stumbleupon Whatsapp
Advertisement

Right now, not only is React at the height of its popularity, but its popularity is accelerating. As far as JavaScript web development is concerned Programming vs. Web Development: What's the Difference? Programming vs. Web Development: What's the Difference? You might think application programmers and web developers do the same job, but that's far from the truth. Here are the key differences between programmers and web developers. Read More , React is one of the easiest frameworks to learn and one of the most effective for rapid and robust development.

So if you’ve decided to learn it, pat yourself on the back: you’ve made a smart choice.

The only problem is that most worthwhile React courses come with a hefty price tag. For example, the highly-acclaimed React for Beginners course is $89 (starter version) and $127 (master version). Free courses are rarely as comprehensive and helpful — but we’ve found several that are excellent and will get you started on the right foot What Makes a Good Programming Tutorial? What Makes a Good Programming Tutorial? Not all programming tutorials are made equal. Some benefit you and others end up wasting your time. Here's what to look for in a quality programming tutorial. Read More .

1. React Training’s Fundamentals Course

7 Best Free Tutorials for Learning React and Making Web Apps react tutorial fundamentals course

Tyler McGinnis is a well-known React developer and instructor who has been teaching and writing about React for years now. He currently has four courses available on React Training, the first of which is completely free and serves as an entry point for the others.

React Fundamentals is divided into 32 video lessons that add up to three full hours of education. You’ll learn everything you need to get a basic React app up and running (i.e. React ecosystem, NPM, Babel, and Webpack), the core concepts and lifecycle that drive React apps, how to write components properly, and how to pass data around.

Advertisement

It’s dense. It’s informative. It’s the perfect introduction, and the fact that McGinnis offers it for free is pretty awesome. This should be your first stop when learning React.

WebsiteReact Fundamentals Course

2. Hacking With React

7 Best Free Tutorials for Learning React and Making Web Apps react tutorial hacking ebook

Hacking With React is an ebook that’s completely free, cover to cover, if you read the web-only version. You can grab a downloadable PDF, EPUB, or MOBI version of it for $10 if you’d rather take it with you and learn offline. Either way, it’s an awesome resource for starters who don’t like videos.

It starts at the very beginning, explaining basic concepts like JSX and components and props, and holds your hand while graduating to intermediate topics like states, routing, tests, linting, and more. It’s written in ES6 start to finish and you’ll learn best practices along the way, including Babel, Webpack, and ESLint.

Will it make you a React expert? No, but it will get you comfortable enough to feel confident and keep learning. At the very least, you’ll know more than enough React to decide whether to spend money on an advanced premium course elsewhere.

WebsiteHacking With React

3. The Official React Tutorial

7 Best Free Tutorials for Learning React and Making Web Apps react tutorial official documentation

You’d think that the official tutorial should be the first place to look to learn React, but I personally found it a bit too fast for complete newbies — it assumed a lot more knowledge than most newbies have. It’s perfect if you’ve had previous experience with another JavaScript web framework.

That being said, the official React tutorial is fantastic once you’ve learned the core concepts of React and are struggling to put them into practice. It takes you through the creation of a tic-tac-toe web app using nothing more than components, props, and state. It bridges the gap between abstract theory and practical application.

I also recommend checking out the official React documentation, which explains every bit of React in surprising amount of detail. In particular, the Thinking in React page is like a mini-tutorial on grasping the idioms that drive React. Don’t be afraid to refer back to the React documentation over and over again as you learn and create your own apps.

WebsiteThe Official React Tutorial and Thinking in React

4. Egghead’s React Fundamentals Course

7 Best Free Tutorials for Learning React and Making Web Apps react tutorial egghead courses

Egghead offers dozens of courses (hundreds of lessons) on various web development topics: JavaScript, Angular, React, RxJS, Node, TypeScript, etc. React is the third largest topic on the site, and although most of the courses are for premium users, there are five available for free:

The first two are the most important, but you will probably want to take all of them at some point (optimally in the order listed). The courses assume you already know JavaScript, so check out Egghead’s JavaScript courses if you aren’t comfortable with the language yet 7 Useful Tricks for Mastering a New Programming Language 7 Useful Tricks for Mastering a New Programming Language It's okay to be overwhelmed when you are learning to code. You'll probably forget things as quickly as you learn them. These tips can help you to better retain all that new information. Read More .

Note that the premium courses are pretty good too, and they’re worth checking out if you can afford the Pro subscription: $40 per month or $200 per year.

WebsiteEgghead’s React Fundamentals Course

5. Learn React and Redux With Cabin

7 Best Free Tutorials for Learning React and Making Web Apps react tutorial cabin social network

Though Redux isn’t part of the core React framework, they’re so often used together that you really should learn it. And even if you eventually move away from Redux, you can take the concepts with you and apply them to whatever you end up using in its stead.

Cabin is a 10-part tutorial series that will teach you how to create a simplified social network app from scratch: installing Node/React/Webpack, understanding how React works, incorporating Redux, dealing with social network features like feeds and notifications, processing images and filters like Instagram, and more.

The last part is an overview of “best practices” that not only teaches you the most effective way to use and organize React/Redux, but also common mistakes to avoid, how to design a scalable app, and how to use third-party tools to ease your development workflow.

WebsiteLearn React and Redux With Cabin

6. LearnCode Academy’s React Course

Over the last few years, LearnCode Academy has distinguished itself as one of the best programming channels on YouTube The 17 Best YouTube Programming Tutorials The 17 Best YouTube Programming Tutorials In this post, we'd like to point you to some of the best YouTube programming series we've found. All of these are sufficient for getting your feet wet as a newbie programmer. Read More . It specialized in web development and covers all kinds of topics ranging from HTML, CSS, and JavaScript to specific frameworks like Angular and React. And it’s all free.

The course is divided into three sections: eight videos on core React concepts, six videos on using Flux for data architecture, and seven videos on using Redux to manage state. All of this is done using up-to-date practices, including ES6 and Webpack.

Note that this isn’t a comprehensive course, and Flux and Redux are both advanced concepts that aren’t part of the core React framework, so we recommend using this course as a way to revisit and cement concepts learned in the courses above.

WebsiteLearnCode Academy’s React Course

7. The React Convention

7 Best Free Tutorials for Learning React and Making Web Apps react tutorial convention

Some programmers prefer to code by convention — that is, adhering to a certain set of design decisions (“conventions”) from project to project to minimize complexity and speed up the development process, particularly in the early stage of new projects. This online ebook aims to present one kind of convention that React developers can follow.

Before you dive into this, however, you should already be well-versed in ES6, comfortable with the React framework, and understand the basics of Redux. This ebook isn’t for newbies per se. Rather, it’s helpful for intermediates who feel overwhelmed and aren’t sure how to turn their React/Redux knowledge into web apps from scratch.

The tutorial starts off with a starter kit project and shows you how to modify it. By following this convention in future projects, you won’t need to waste time recreating everything.

WebsiteThe React Convention

So You’ve Learned React: Now What?

With these tutorials under your belt, you should be more than knowledgeable enough to start making your own web apps with React. At this point, all that’s left is to practice, practice, practice. And what’s particularly cool is that you can later use React Native to create mobile apps To Build an Android App, You Need to Learn These 7 Programming Languages To Build an Android App, You Need to Learn These 7 Programming Languages Which programming language is right for creating Android apps? It comes down to your programming history and which languages you feel most comfortable using. Fortunately, you have options. Read More — but don’t get ahead of yourself. Stick with web apps until you’re confident.

It’s going to be a tough road, so we recommend checking out our article on learning how to program without stress How To Learn Programming Without All The Stress How To Learn Programming Without All The Stress Maybe you've decided to pursue programming, whether for a career or just as a hobby. Great! But maybe you're starting to feel overwhelmed. Not so great. Here's help to ease your journey. Read More . Just because you’re struggling doesn’t mean you aren’t cut out to be a programmer 6 Signs That You Are Not Meant To Be A Programmer 6 Signs That You Are Not Meant To Be A Programmer Not everyone is cut out to be a programmer. If you aren't completely sure that you're meant to be a programmer, here are some signs that may point you in the right direction. Read More !

Hopefully these free tutorials helped! If you know of any other free React resources that we missed, please let us know in a comment down below.

Image Credit: guteksk7 via Shutterstock.com

Leave a Reply

Your email address will not be published. Required fields are marked *