Hello, I'm Fajar Satria! Welcome to this comprehensive guide on learning React from the very basics. This guide includes an introduction to JavaScript ES6, TypeScript basics, Yarn, and Vite as well.
Before diving into React, it's important to familiarize yourself with some fundamental JavaScript (ES6) concepts and TypeScript basics. This guide will help you understand these concepts, and then it will introduce you to Yarn and Vite for managing and running your projects.
Understanding JavaScript ES6 is crucial before diving into React. Here are some of the key ES6 topics you should understand:
- Let and Const
- Arrow Functions
- Template Literals
- Destructuring Assignment
- Default Parameters
- Rest and Spread Operators
- Promises and Async/Await
- Modules (Import/Export)
- Classes
- Map, Filter, Reduce
Please check out the JavaScript ES6 file for more detailed explanations and examples on these topics.
TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. Here are some fundamental TypeScript topics:
- Basic Types
- Enum
- Any
- Functions
- Interfaces
- Classes
- Generics
- Modules
Please check out the TypeScript Basics file for more detailed explanations and examples on these topics.
Yarn is a fast, reliable, and secure dependency management tool. You'll learn about:
- Installation
- Adding/Removing Dependencies
- Updating Dependencies
- Running Scripts
Please check out the Yarn Cheat Sheet file for more detailed explanations and examples on these topics.
Vite is a modern front-end build tool created by Evan You. It offers a faster and leaner development experience for modern web projects. You'll learn about:
- Installation
- Creating a New Project
- Running the Development Server
- Building for Production
- Serving the Production Build
Please check out the Vite Cheat Sheet file for more detailed explanations and examples on these topics.
React is a JavaScript library for building user interfaces. This guide will provide you with a step-by-step introduction to React, starting from basic concepts and gradually moving to more advanced topics. You'll learn about:
- React Elements and JSX
- Components and Props
- State and Lifecycle
- Handling Events
- Conditional Rendering
- Lists and Keys
- Forms
- Lifting State Up
- Composition vs Inheritance
- React Router
- React Hooks
- Context
Please check out the React Guide file for more detailed explanations and examples on these topics.
I hope you find this guide useful in your journey to learn React. Please feel free to raise an issue or make a pull request if you find anything that could be improved or updated. I appreciate any feedback or suggestions.