# If you don't know JavaScript, checkout the JavaScript tutorials first
# Learning React
## React
## Lynda Tutorials [Free for USF students]
## Best UI Frameworks for React.js
### Other React Tutorials
# Popular React UI Component Libraries
# Learning Redux
## These websites have great articles. Pretty much anything you read here will be great:
## Free books
## TypeScript
## Setup a React app with an API
## Top Paid Courses
## Gatsby: Fastest Static-Site Generation Web Framework
## CSS Tailwind
## CSS
## Next.js
## Other
# Learning React
- A great place to start is the [official React documentation](https://facebook.github.io/react/docs/getting-started.html). It's worth reading everything under *QUICK START* and working through the tutorial
## React
- [React Fundamentals](https://egghead.io/courses/react-fundamentals) (video series)
- [9 things every React.js beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know)
- [Container Components](https://medium.com/@learnreact/container-components-c0e67432e005#.cy4jlttir)
- [A Quick Look at the React and Redux DevTools](http://mediatemple.net/blog/tips/a-quick-look-at-the-react-and-redux-devtools/)
## Lynda Tutorials [Free for USF students]
## Best UI Frameworks for React.js
- https://raftlabs.medium.com/best-ui-frameworks-for-react-js-736e2aa89770
- Build component driven UIs faster
### Other React Tutorials
- https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2
- https://hackernoon.com/simple-react-development-in-2017-113bd563691f
- https://reactarmory.com/guides/learn-react-by-itself/react-basics
- https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17
- http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
- https://github.com/enaqx/awesome-react
- https://github.com/markerikson/react-redux-links
- https://github.com/petehunt/react-howto
- https://reactjs.co/tutorials/react-convention/
- http://buildwithreact.com/tutorial
- https://survivejs.com/react/introduction/
- https://egghead.io/courses/the-beginner-s-guide-to-reactjs
- https://egghead.io/courses/advanced-react-component-patterns
- http://todomvc.com/examples/react/#/
- APIs in React Tutorial: Recipe App using React Router
- React Tutorial – How to Build the 2048 Game in React
- How to Build a Card Match Up Game using React
- Fullstack React GraphQL TypeScript Tutorial
- Learn React and the Material UI design library in this crash course. You can code along at home and use the Google Dictionary API to build your own dictionary website. You'll get plenty of practice with Progressive Web App concepts as well. (2 hour YouTube course): https://www.freecodecamp.org/news/code-a-dictionary-with-react-and-material-ui/
- The popular React front end development JavaScript library has a ton of new features coming soon. Learn what's new in React 18 Alpha: Concurrency, Batching, the Transition API, and more. (12 minute read): https://www.freecodecamp.org/news/whats-new-in-react-18/
- This in-depth React course will teach you all about front end development with one of the most popular JavaScript libraries. You'll learn Styled Components, React Router, State and Props, Hooks, and even some TypeScript. You'll also deploy your app to the cloud. (7 hour YouTube course): https://www.freecodecamp.org/news/learn-react-js-in-this-free-7-hour-course/
- With this in-depth React course, you'll build your own e-commerce website. You'll learn about components, event handling, life cycle phases, error handling, two-way binding, and other key React concepts. (6 hour YouTube course): https://www.freecodecamp.org/news/learn-react-by-building-an-ecommerce-site/
- React is a popular JavaScript front end development library. This course will teach you React for beginners. Learn about props, state, async functions, JSX, and more. Along the way, you'll build 8 real-world projects, and solve more than 140 interactive coding challenges. (12 hour YouTube course): https://www.freecodecamp.org/news/free-react-course-2022/
- Expand your JavaScript skills by coding along with this course on building your own Instagram app. By the time you finish, your app will look like Instagram's dashboard, with the ability to sign in and update a profile, and even comment on photos. You'll learn how to use React, Tailwind CSS, Firebase, Cypress E2E, and other modern tools. (12 hour YouTube course): https://www.freecodecamp.org/news/learn-how-to-create-an-instagram-clone-using-react/
- How to build your own online store in just one day using AWS, React, and Stripe. You'll design the architecture, add the plugins, and even create some serverless functions. (1 hour video course): https://www.freecodecamp.org/news/how-to-make-a-store-in-one-day-aws-react-stripe/
- Learn React and TypeScript by building your own quiz app. You'll learn the popular create-react-app tool, design your own styled components, and use TypeScript to integrate with a quiz API. (80 minute video course): https://www.freecodecamp.org/news/how-to-build-a-quiz-app-using-react-and-typescript/
- Learn React, one of the most popular web development tools. This beginner-level course will teach you how to use the React JavaScript library. It will also teach you how to use React Hooks, React Router, and the context API. (10 hour YouTube course): https://www.freecodecamp.org/news/react-10-hour-course/
- React is a powerful JavaScript front end development library. But how do you link your React app to a back end? Through APIs. This in-depth tutorial will teach you how to use the useEffect() hook and the useState() hook. You'll learn the built-in JavaScript Fetch API, along with the Axios HTTP client. (20 minute read): https://www.freecodecamp.org/news/how-to-consume-rest-apis-in-react/
- React is a powerful JavaScript library for coding web apps and mobile apps. This course will teach you the newest version of React – React 18 – along with the popular Redux Toolkit. This freeCodeCamp course is taught by legendary programming teacher John Smilga. You can code along at home as he teaches you all about Events, Props, Hooks, Data Flow, and more. (13 hour YouTube course): https://www.freecodecamp.org/news/learn-react-18-with-redux-toolkit/
- Learn React Router 6 in Ten Hours
- This new freeCodeCamp course will walk you step-by-step through coding 25 different front-end React projects. I've always said: the best way to improve your coding skills is to code a lot. Well, this course will build up your JavaScript muscle memory, and help you internalize key concepts through repetition. Projects include: the classic Tic Tac Toe game, a recipe app, an image slider, an expense tracker, and even a full-blown blog. Dive in and get some reps. (10 hour YouTube course): https://www.freecodecamp.org/news/master-react-by-building-25-projects/
- Learn to build apps with the popular Nest.js full-stack JavaScript framework. In this intermediate course, you'll code your own back end for a Spotify-like app. You'll learn how to deploy a Node.js API to the web. And you'll build out all the necessary database and authentication features along the way. (Note that Nest.js is similar to Next.js, but Nest.js uses TypeScript and is heavily inspired by Angular. freeCodeCamp also has comprehensive Next.js courses if you want to learn that as well.) (12 hour YouTube course): https://www.freecodecamp.org/news/comprehensive-nestjs-course/
- Kanban task management boards were invented at Toyota way back in the 1940s. I speak Chinese and a little Japanese, and I can tell you that the Chinese characters in the word “Kanban” translate to “look board” – something you can look at to quickly understand what's going on with a project. You may have used popular Kanban tools like Trello. But have you ever coded your own Kanban? Well, today's the day. This project-oriented tutorial will teach you how to use React, Next.js, Firebase, Tailwind CSS, and other modern webdev tools. (90 minute read): https://www.freecodecamp.org/news/build-full-stack-app-with-typescript-nextjs-redux-toolkit-firebase/
# Popular React UI Component Libraries
- https://mui.com/
- https://react-bootstrap.github.io/
- https://ant.design/
- https://react.semantic-ui.com/
- https://chakra-ui.com/
# Learning Redux
- The [official Redux documentation](http://redux.js.org/) is also very helpful.
- [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) (video series by the author of Redux)
- [Managing data flow on the client-side](https://blog.madewithlove.be/post/redux/)
- [Mixins Considered Harmful](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html)
- [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) (video series by the author of Redux)
- [Introduction to thunks in Redux](http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559)
- Redux is a popular open source tool for managing JavaScript state. And the team behind it created the Redux Toolkit to make it easier to follow Redux best practices. In this course, long-time freeCodeCamp contributor John Smilga will teach you about Setup Store, createAsyncThunk, and other key concepts. (2 hour YouTube course): https://www.freecodecamp.org/news/learn-redux-toolkit-the-recommended-way-to-use-redux/
## These websites have great articles. Pretty much anything you read here will be great:
## Free books
- https://www.fullstackreact.com/assets/media/sGEMe/MNzue/30-days-of-react-ebook-fullstackio.pdf
- https://www.fullstackreact.com/30-days-of-react/
- This beginners' handbook will show you what React is, why so many developer jobs require it, and how to install it. You'll also learn how to use the fundamental building blocks of a React app: Components, State, and Props. (30 minute read): https://www.freecodecamp.org/news/react-beginner-handbook/
- The React Handbook – Learn React for Beginners
- Prolific freeCodeCamp author Nathan Sebhastian just published his React for Beginners Handbook. You can read the full book and learn how to code React-powered JavaScript apps. Along the way you'll learn about Components, Props, States, Events, and even Network Requests. (full-length handbook): https://www.freecodecamp.org/news/react-for-beginners-handbook/
## TypeScript
- What is TypeScript?
- TypeScript is a popular statically-typed version of JavaScript
- Video Tutorials
- Book Tutorials
## Setup a React app with an API
## Top Paid Courses
- React - The Complete Guide (incl Hooks, React Router, Redux) (https://www.udemy.com/course/react-the-complete-guide-incl-redux/)
- Frontend Masters - Build a Fullstack App from Scratch
## Gatsby: Fastest Static-Site Generation Web Framework
- www.gatsbyjs.com/
- Learn Gatsby, a Static Site Generator
- Build a Blog with React and Markdown using Gatsby
## CSS Tailwind
- Tailwind (https://tailwindcss.ctailwindcss.com/om/)
- https://www.freecodecamp.org/news/html-css-11-hour-course
- Tailwind CSS has quickly become one of the most popular Responsive Design frameworks for coding new projects. This beginner's course will teach you how to harness Tailwind's power. By the end of it, you'll know a lot more about CSS. You'll learn about colors, typography, spacing, animation, and more. You'll even build your own Design System, which you can use for your future websites and mobile apps. (4 hour YouTube course): https://www.freecodecamp.org/news/learn-tailwind-css/
## CSS
- Flexbox is a powerful responsive web design tool that's built right into CSS itself. And this crash course will teach you how to harness its power. You'll learn core Flexbox properties like flex-direction, flex-wrap, flex-flow, justify-content, align-items, and more. (35 minute YouTube course): https://www.freecodecamp.org/news/learn-css-flexbox/
- https://egghead.io/playlists/css-fundamentals-238ce697
- https://medium.freecodecamp.org/learn-css-flexbox-in-5-minutes-b941f0affc34
- https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849
- http://flexboxfroggy.com/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
## Next.js
- nextjs.org/
- Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
- Next.js Crash Course for Beginners 2021 (https://www.youtube.com/watch?v=MFuwkrseXVE)
- Todo app in 10 minute using nextjs (https://www.youtube.com/watch?v=yglkCznd7rg)
- Next.js is a React framework that describes itself as "unopinionated" and "batteries-included". It combines simple tools like Create React App with more advanced features. This tutorial will show you how to build a Next.js app. You'll learn about pages, routes, data requests, SEO considerations, and more. (20 minute read): https://www.freecodecamp.org/news/nextjs-tutorial/
- Free Next.js Courses on EggHead.io
- Fullstack React Framework built on Next.js
- This course will teach you how to code your own fully-functional Reddit clone. Along the way, you'll learn some React, Firebase, Next.js, Chakra UI, and TypeScript. You'll code a lot of key business logic, including how to handle post deletion, community image customization, voting on posts, and more. (12 hour YouTube course): https://www.freecodecamp.org/news/code-a-reddit-clone-with-react-and-firebase/
- This course will help you learn full-stack web development using the popular Next.js React framework, TypeScript, and AWS. You can code along at home and build your own full-stack quote app, which will share wise quotes from historical figures. (6 hour YouTube course): https://www.freecodecamp.org/news/full-stack-development-with-next-js-typescript-and-aws/
- You may have heard of LeetCode, a site a lot of developers use to practice common coding interview questions. Well, you're about to code your own LeetCode-like website using cutting edge tools: TypeScript, Next.js, Tailwind CSS, and Firebase. Software Engineer Burak Orkmez will walk you through building the website step-by-step, teaching you how to implement lots of features like authentication, saving code submissions in local storage, and even challenge completion modals. (7 hour YouTube course): https://www.freecodecamp.org/news/build-and-deploy-a-leetcode-clone-with-react-next-js-typescript-tailwind-css-firebase
- Learn to code your own Threads clone. Oops. I mean Twitter clone. Mastodon, Blue Sky, everyone's building their own Twitter. And now you can, too. Of course, the real goal is to learn new tools. And learn you shall. You'll get hands-on practice with powerful new tools like Next.js, Supabase, and Tailwind.css. (5 hour YouTube course): https://www.freecodecamp.org/news/learn-full-stack-development-with-next-js-and-supabase-by-building-a-twitter-clone/
## Other
- https://expo.dev/
- Create universal native apps with React that run on Android, iOS, and the web. Iterate with confidence.
- Create universal native apps with React that run on Android, iOS, and the web. Iterate with confidence.
-