Let's React. Learn React in 30 days
Tags: beginners, javascript, react
Published: 2020-10-26 16:12:26

Do you want to learn React and you don't where to start? Don't look for any other curated list of resources. Let's React!

React is an user-interface library. It doesn't do a lot of things. It renders elements. Period. React isn't a Swiss-army knife framework full of functionalities.

From [2020 StackOverflow developer Survey](https://insights.stackoverflow.com/survey/2020#technology-web-frameworks), React is the second most popular Web Framework. 

> _"React is a JavaScript library for building user interfaces"_ [reactjs.org](https://reactjs.org/)

One of my takeaways from the [Ultralearning book](https://dev.to/canro91/ultralearning-takeaways-3n67) is you should learn a new skill in the context where that skill will be applied. So, it's better to learn by doing, instead of reading a book from cover to cover or passively watching videos. No copy and paste!

<figure>
<img src="https://images.unsplash.com/photo-1485783522162-1dbb8ffcbe5b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=400&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="Building a rocket ship" width="800">
<figcaption>Building a rocket ship. <span>Photo by <a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Kelly Sikkema</a> on <a href="https://unsplash.com/s/photos/blocks?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
</figcaption>
</figure>

These are some resources to learn React, its prerequisites and related subjects.

## Prerequisites

### CSS

* [CSS Layout tutorial](https://daveceddia.com/implement-a-design-with-css/)
* [Build a Professional Website](https://www.youtube.com/watch?v=5bMdjkfvONE)

### JavaScript

* [A re-introduction to Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) or [Learn JavaScript in an hour](https://www.youtube.com/watch?v=W6NZfCO5SIk)
* [ES6 Tutorial](https://www.youtube.com/watch?v=NCwa_xi0Uuc) or [Coursera ES6 Basics](https://www.coursera.org/projects/modern-javascript-es6-basics?edocomorp=freegpmay2020)
* Follow some Vanilla projects:
  * [Music Box](https://www.youtube.com/watch?v=2VJlzeEVL8A)
  * [Todo App](https://www.youtube.com/watch?v=Ttf3CEsEwMQ)
  * [Tetris Game](https://www.youtube.com/watch?v=HEsAr2Yt2do)
  * [Twitter clone](https://www.youtube.com/watch?v=JnEH9tYLxLk)
  * [Product catalog](https://www.youtube.com/watch?v=aql62xliRzE)
  * [E-commerce site](https://www.youtube.com/watch?v=023Psne_-_4)
  * [YouTube API Proxy server](https://www.youtube.com/watch?v=Q4RiI7bvpso)

Some of these projects include the backend side using Node.js. You can find more vanilla projects without any backend code on [15 Vanilla Project Ideas](https://dev.to/nerdjfpb/15-vanilla-javascript-project-ideas-beginner-to-expert-with-free-tutorial-3c7a) and [20+ Web Projects With Vanilla JavaScript](https://github.com/bradtraversy/vanillawebprojects).

Don't mess your environment with different versions of Node. Follow [Don't Install Node Until You've Read This](https://youknowfordevs.com/2018/07/01/dont-install-node-until-youve-read-this.html) and [Your Development Workflow Just Got Better, With Docker Compose](https://youknowfordevs.com/2018/07/02/your-development-workflow-just-got-better-with-docker-compose.html).

## React and Stuff

### Other Study Plans

* [4-Week Plan: A Study Plan To Cure JavaScript Fatigue](https://www.freecodecamp.org/news/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1/)
* [How to Learn React — A roadmap from beginner to advanced](https://www.freecodecamp.org/news/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6/)
* [Resources for Learning React](https://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-react/)
* [How to learn React.js in 2020](https://www.robinwieruch.de/learn-react-js)
* [A simple guide to learning React from scratch](https://medium.com/thetiltblog/simple-guide-to-learning-react-from-scratch-c11fcccd3e76)

### React: First steps

* [What React Does (and Doesn't Do)](https://daveceddia.com/what-react-does/)
* [React Tutorial: An Overview and Walkthrough](https://www.taniarascia.com/getting-started-with-react/)
* [React: Getting Started - The Complete Tutorial for 2020](https://daveceddia.com/react-getting-started-tutorial/)
* From React official docs:
  * [Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)
  * If you prefer learning concepts first, [Hello World](https://reactjs.org/docs/hello-world.html)
  * [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)
  * [Composition vs inheritance](https://reactjs.org/docs/composition-vs-inheritance.html)

### React Hooks

* [A Simple Intro to React Hooks](https://daveceddia.com/intro-to-hooks/)
* [How to fetch data with React Hooks?](https://www.robinwieruch.de/react-hooks-fetch-data)
* [Fix useEffect re-running on every render](https://daveceddia.com/useeffect-triggers-every-change) 
* [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)
* [Examples of the useReducer Hook](https://daveceddia.com/usereducer-hook-examples/) and [How to useReducer in React](https://www.robinwieruch.de/react-usereducer-hook)
* [React Context](https://www.robinwieruch.de/react-context) and [How to useContext in React?](https://www.robinwieruch.de/react-usecontext-hook)
* [React State Hooks: useReducer, useState, useContext](https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext)
* [Five common mistakes writing react components (with hooks) in 2020](https://www.lorenzweiss.de/common_mistakes_react_hooks/)

### Walk-throughs

#### Basic & Intermediate

* [Game of live](https://www.freecodecamp.org/news/create-gameoflife-with-react-in-one-hour-8e686a410174/)
* [Markdown preview](https://www.freecodecamp.org/news/how-to-build-a-markdown-previewer-with-react-js/)
* [Recipe App](https://www.youtube.com/watch?v=U9T6YkEDkMo)
* [Bookmark app](https://www.youtube.com/watch?v=Ev9YLaLvAJM)
* [Quiz app](https://www.youtube.com/watch?v=aq-fCtg_gG4)
* [Calculator](https://www.youtube.com/watch?v=KzYUuTiHdiY)
* [Build a website](https://www.youtube.com/watch?v=tOK9l5uP06U)
* [Weather app](https://www.youtube.com/watch?v=IxuqmfO6p28)
* [Movie list app](https://www.youtube.com/watch?v=sZ0bZGfg_m4)
* [Multi Step Form With React & Material UI](https://www.youtube.com/watch?v=zT62eVxShsY)
* [YouTube clone](https://www.youtube.com/watch?v=VPVzx1ZOVuw)

#### Advanced

* [Expense tracker](https://www.youtube.com/watch?v=XuFDcZABiDQ) and its [backend](https://www.youtube.com/watch?v=KyWaXA_NvT0)
* [Chat with Chatkit](https://www.youtube.com/watch?v=jFNHerJqvFw) or with [Socket.io](https://www.youtube.com/watch?v=ZwFA3YMfkoc)
* [Firebase Authentication in React Tutorial for Beginners](https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial)
* [Yelp clone](https://www.newline.co/fullstack-react/articles/react-tutorial-cloning-yelp/). To start with TDD in React, [Getting Started with TDD in React](https://daveceddia.com/getting-started-with-tdd-in-react/)
* [Travel Log](https://www.youtube.com/watch?v=5pQsl9u_10M)
* [Todoist clone](https://www.youtube.com/watch?v=HgfA4W_VjmI)
* [Building a Newsreader](https://www.youtube.com/watch?v=7DLRJj1YjvQ)
* [eCommerce site](https://www.youtube.com/watch?v=Fy9SdZLBTOo)
* [Reservation app](https://www.youtube.com/watch?v=LXJOvkVYQqA)
* [Netflix clone](https://www.youtube.com/watch?v=x_EEwGe-a9o)

### React & Redux

Redux could be the most challenging subject. _store, actions, reducers, thunks, sagas, dispatching_. Start by learning how to use `useState` hook, then `useReducer`, then `useContext`, and last Redux. It feels more natural this way.

Make sure to understand what to put into Redux store and where you should call your API calls. Be aware that [you might not need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)

#### Tutorials

* [8 things to learn in React before using Redux](https://www.robinwieruch.de/learn-react-before-using-redux)
* [What Does Redux Do?](https://daveceddia.com/what-does-redux-do/), [A Complete React Redux Tutorial for Beginners](https://daveceddia.com/redux-tutorial/) and [Immutability in React and Redux: The Complete Guide](https://daveceddia.com/react-redux-immutability-guide/)
* [Redux vs. The React Context API](https://daveceddia.com/context-api-vs-redux/)
* [React Redux Tutorial for Beginners](https://www.robinwieruch.de/react-redux-tutorial) This is a complete Redux tutorial. It covers almost everything you need to know, from creating an store to testing your reducers.
* [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/)
* [Redux Tutorial - Learn Redux from Scratch](https://www.youtube.com/watch?v=poQXNp9ItL4)

#### Walk-throughs

* [Simple Notes app](https://www.youtube.com/watch?v=WpvIihorarA)
* [Shopping Cart Checkout Summary](https://www.youtube.com/watch?v=KLCnTjB0w_o) An interview process exercise. Try to add Redux on your own
* [Movie app with Redux](https://www.youtube.com/watch?v=Ia0WWc5dyLE&list=PLG3RxIUKLJlbDDGeeoUCkinS2DUybp_1o) Again try to add Redux on your own. 
* [Developing Games with React, Redux, and SVG](https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/)

### Courses

#### Paid

* [Pluralsight React.js Getting Started](https://www.pluralsight.com/courses/react-js-getting-started)
* [Coursera Full Stack React](https://www.coursera.org/specializations/full-stack-react)
* [Udemy Instagram clone](https://www.udemy.com/course/mern-stack-master-course-building-your-own-instagram/?couponCode=FREEFREEFREE)

#### Free

* [The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
* [The Free React Bootcamp](https://ui.dev/free-react-bootcamp/)
* [Learn React for free](https://scrimba.com/g/glearnreact)
* [30 days of React](https://www.newline.co/fullstack-react/30-days-of-react/)
* [Learn Building Applications with React and Redux](https://www.youtube.com/watch?v=4lF7IiIHliU)

### Practice & Project Ideas

* [Cheat to Win: Learn React with Copywork](https://daveceddia.com/learn-react-with-copywork/). Two projects to copy: [React Snake](https://github.com/taming-the-state-in-react/react-snake), [GitHub issue viewer](https://github.com/dceddia/github-issues-viewer)
* [Hands-on projects to learn the basics of React](https://hackernoon.com/hands-on-projects-to-learn-the-basics-of-react-3a06726514a8)
* [6 Fun React Project Ideas](https://daveceddia.com/react-practice-projects/)
* [5 React Projects You Need In Your Portfolio](https://codeartistry.io/5-react-projects-you-need/)
* [10 React Starter Project Ideas to Get You Coding](https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831)

## Misc

* [How to Structure Your React Project](https://daveceddia.com/react-project-structure/) or [React directory structure](https://marmelab.com/blog/2015/12/17/react-directory-structure.html)
* [How to build Chrome extensions with React + Parcel](https://www.freecodecamp.org/news/building-chrome-extensions-in-react-parcel-79d0240dd58f/)
* [React internals](https://youtu.be/f2mMOiCSj5c)
* [Build Yourself a Redux](https://zapier.com/engineering/how-to-build-redux/)
* [Frontend Framework Showdown](https://www.youtube.com/watch?v=1GNPzfcElyo)

> _You can find my own 30-day journey following the resources from this post in [LetsReact](https://github.com/canro91/LetsReact)._
> 
> _You can read about my progress and takeaways on [Let's React. Day 18 of 30](https://dev.to/canro91/let-s-react-learn-react-in-30-days-day-18-2604) and [Let's React. Day 27 of 30](https://dev.to/canro91/let-s-react-learn-react-in-30-days-day-27-3412)_

[![canro91/LetsReact - GitHub](https://gh-card.dev/repos/canro91/LetsReact.svg)](https://github.com/canro91/LetsReact)

_Happy React/Redux time!_