Guide: Javascript/React - Fundamentals
Description
👉 This guide is part of the Javascript/React Guides. Please follow the order:
- Fundamentals
- SPAs
- SSR & Performance
React is, for years, one of the most widely used Javascript frameworks out there, along with Vue.js and Angular. Granted, the landscape of popular frameworks changes by the week, so it is likely that React (and all the others) will be replaced with newer, shinier options in the future. But that does not mean we shouldn't spend time learning these tools.
First, because they will indeed improve our productivity. Second, because they will increase your chances of getting work you want. And third because learning a new framework is not only about learning tha framework itself, but also about the process of learning a new Javascript tool and related concepts, which is the single most important ability you will develop in this course.
In this Guide you will explore the fundamental aspects of React.
Knowledge
- Understand what is a Javascript Framework
- Understand what is React
- Understand what is JSX
- Understand what is State Management
- Understand what is a side-effect
Skills
- Be able to create a React application
- Be able to use state management in React
Topics
- React setup
- JSX
- Functional Components
- Functional Components vs Class Components
- Styled Components & CSS Modules
- State
- State control with Forms
- Effects
Action Points
- Take on a React Crash Course
- Learn what are the differences between Functional and Class-based components
- Discover how to use Styled Components (or similar) in React
- Read up on Side effects in Javascript
- Find out how to use the state and effect Hooks
Deliverable: Interactive React App
- Submit:
- Glitch Project URL or Github Repository + Github Pages URLs
- Project description and details in the README.md file
- Minimum requirements:
- Create a React application that allows the user to interact by modifying state data
- Use State Hooks
- Use API to fetch information from a public API and use it in the application
- Use Effect Hooks
- Possible to use your own API created at https://www.mockaroo.com/ or https://airtable.com/
- Make use of Styled Components or CSS Modules to style the application
- Create a React application that allows the user to interact by modifying state data
- Theme ideas:
- Memory game
- (Random?) Meme generator
- Color scheme generator with history
- Search/Filter data from an API (photos, weather information, etc)
- Instagram client/search engine