diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index adcf7989f..e3ba35d76 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -1,37 +1,70 @@ ## Tech Stacks ### React Overview -React is a Javascript library used to build user interfaces. As such, you're going to have to know HTML, CSS and Javascript in order to learn React. -It's ease of use and popularity comes from how little you actually have to code. Easily applicable for any frontend interface, if you're going to use any library/framework for frontend development, React is the safest option. +React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, whilst boasting a large user base full of freely available component libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and a full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). -### React Resources +To help ease the learning curve, below you'll find a variety of resources to reference while learning and components and libraries to use with React. -These frontend challenges for HTML, CSS and JavaScript will help you review core skills while also making interesting projects as well. \ -https://www.frontendmentor.io/ +### React Learning Resources +[Full-Stack Open](https://fullstackopen.com/) +A full, free course provided by the University of Helsinki that teaches the MERN (MongoDB, Express, React, NodeJS) stack. It also covers TypeScript, GraphQL, React Native, and some CI/CD. An excellent resource for React beginners. -Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser. \ -https://reactjs.org/tutorial/tutorial.html +[React Documentation](https://react.dev/) +The official React documentation is a great way to get started with the library, but also indispensible to have bookmarked for reference. +[Coursera Learn React Basics](https://www.coursera.org/learn/react-basics) +A free course provided by Coursera that covers the basics of React, including State, navigation, and taking user input via forms. -React tutorial by MDN Web Docs. Useful readings for if you have time, but not necessary by any means.\ -https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +[Free Scrimba React Course](https://scrimba.com/learn/learnreact) +A free course provided by Scrimba that teaches React fundamentals through the creation of various applications including an AirBnB clone, a meme generator, and a notes app. +[Official React Tutorial](https://reactjs.org/tutorial/tutorial.html) +Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser. -Javascript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React. \ -https://learn.microsoft.com/en-us/windows/dev-environment/javascript/ +[React JS Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) +[One Hour React Tutorial](https://www.youtube.com/watch?v=b9eMGE7QtTk) +One hour quickstart tutorials about React. These YouTube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason. +[Front-End Mentor](https://www.frontendmentor.io/) +These frontend challenges for HTML, CSS and JavaScript will help you review core skills while also making interesting projects. -1 hour in depth tutorials about React. These Youtube crash course provides a great in depth look at React and the various important components that you will be using most often. Very useful if you are learning React under a strict time limit for whatever reason. \ -https://www.youtube.com/watch?v=w7ejDZ8SWv8 \ -https://www.youtube.com/watch?v=b9eMGE7QtTk +[Mozilla React Tutorial](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) +React tutorial by MDN Web Docs. Useful readings for if you have time. +[Microsoft JavaScript Tutorial](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/) +JavaScript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React. -Online development environment to try React out in (Among other frontend tools). Great for testing the waters with React to see if it will be something you want to learn or not. \ -https://codepen.io/ +### Useful React Tools and Libraries +[Create React App](https://create-react-app.dev/) +Allows you to set up your React applications using a single command without having to configure many build tools. Provides a lot of useful functionality like instant reloads and optimizations for deployment; is the "official" React solution. -Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment. \ -https://pages.github.com/ +[Vite](https://vitejs.dev/) +Another quickstart build tool for setting up your environment; an alternative to Create React App, [Vite is generally faster than Create React App](https://www.dhiwise.com/post/react-build-tools-create-react-app-with-vite-vs-cra-tool). +[Next.js](https://nextjs.org/) +A popular and robust framework that allows server-side rendering and static website generation. +[usehooks-ts](https://usehooks-ts.com/) +A React library of useful hooks that go well beyond those built into React. Don't reinvent the wheel! usehooks offers over forty ready-to-use hooks such as [useEffectOnce](https://usehooks-ts.com/react-hook/use-effect-once) and [useInterval](https://usehooks-ts.com/react-hook/use-interval). + +[Redux](https://redux.js.org/) +The official React solution for state management. Redux provides functionality for reducers, advanced debugging tools, and more that will simplify the state management for your app. + +[Material UI](https://mui.com/material-ui/) +A fully-featured UI library that offers a huge range of common components that are easily styled and based on Google's Material Design. + +[Bootstrap](https://getbootstrap.com/) +Another responsive UI library that allows you to focus on development by handling the design logistics for you. + +### Miscellaneous + +[GitHub Pages](https://pages.github.com/) +Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. Head over to the [Development Process](https://learning-software-engineering.github.io/Topics/Development_Process.html#resources-for-development-process) page for a tutorial on GitHub pages and more. + +[Codepen](https://codepen.io/) +Online development environment to try React out in (among other frontend tools). Great for testing the waters with React and other libraries or languages. + +[Stackblitz](https://stackblitz.com/) +An online development environment for frontend, Node.js, and JavaScript.