- Resources
- Setup
- What is React?
- Basic React Tutorial
- Learning Outcomes
- Advanced React Tutorial
- What is TypeScript?
- React TypeScript Tutorial
- React Unit Testing
- React Docs Official Documentation
- Awesome React A collection of awesome things regarding the React ecosystem.
React is a library created by Meta (previously Facebook) and has gained popularity as one of the big three popular web frameworks (the others being Angular and Vue). It follows a declarative, component-based approach and doesn't make assumptions about the rest of your technology stack, furthering a learn once, write anywhere learning mindset.
In recent years, the industry has pivoted from the older and more traditional class-based components to the newer functional-based components with hooks. This newer way of writing components is easier to read, test and implement best practices, because they are simply plain Javascript functions calling other functions.
One of its most significant advantages is that it is relatively tech agnostic and allows teams to compose their applications with technology choices that make sense for the application they are building.
One of the most useful features introduced by React 16 is Fragments because React components are required to have only one root element. React 16 introduced the React. Fragment wrapper allows child component wrapping, meaning that an element can have multiple child elements at its root, with one parent element, the Fragment, which does not get rendered to the DOM. React. Fragments help alleviate the DOM nesting that React < 16 was prone to due to having to wrap the contents of an element with multiple root elements in something else, like a div.
Facebook's React Tutorial is an excellent starting place, as it covers theoretical and practical aspects of React. Completing Facebook's React tutorial shouldn't take more than a day.
After going through the practical, you should be familiar with the following concepts:
- ES 6
- JSX
- React application State and Lifecycle
- Handling events
- React functional components
- Hoisting State
- NPM
Just for extra informational purposes.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Learn more
Do Lab 1 - 22