React & Remix
Learn to build Single Page Applications (SPA) using the Reactjs library. Along the way, use the Remix framework for building maintainable reactjs projects!
20 topics
42 hours
Intermediate
Certificate
The course
In this course we learn the ropes for building Single Page Applications (SPA) using the Reactjs library. Directly start with modern day reactjs using functional components. Play with JSX UI templating. Learn how to build easy forms in reactjs. Get into some advanced UI design patterns for building maintainable components. Dive into the world of the Remix framework for structuring and building maintainable react applications.
While doing all this, learn to write tests to verify the working of the software!
Pre requisites : Javascript, HTML, a little bit of CSS, web fundamentals, optimism
The journey
- Introduction to Single page Applications and how they are different from existing web applications architecture
- Introducing Reactjs
- Creating a new react project using create-react-app
- Chrome developer console Reactjs extensions installation
- VSCode IDE
- ES6 programming
- Basic building blocks of the GUI
- Functional components
- JSX syntax
- Passing inputs to components using props
- Type checking of props using prop types
- Difference between state and props
- Building stateful functional components using hooks api
- Lifecycle of a functional component
- Events
- Error management
- Using ternary operators in JSX
- Using simple if-else operations in JSX
- Repeating GUI elements using the map operator
- React fragments
- Controlled form components in React
- Uncontrolled form components in React
- Formik library for building easy forms in React
- Render props
- Higher order components (HOC)
- Custom hooks
- Purpose of React portals
- Implementing modals using react portals
- Introduction to context api and how it helps in global state management
- Provider and Consumer
- Installing axios
- GET, POST calls using Axios
- useState
- useEffect
- useLayoutEffect
- useRef
- useMemo
- useCallback
- Building custom hooks
- Introduction to React testing library (RTL)
- Testing components
- Mocking collaborators
- Testing components with Redux
- Features of the Remix framework
- Installation using starter templates
- Why a framework ?
- Typical Remix project structure
- Defining routes in Remix
- Root route
- Index routes
- Routes with multiple path segments
- Dynamic segment routes
- Nested routes and various patterns around it
- Optional segments
- Defining folders for organization in route hierarchies
- Links, navigation and redirection
- API routes
- Defining loader() in a route to fetch data
- params, request and context objects
- Returning and throwing response from a loader()
- Defining action() in a route to perform data mutations
- Handling data revalidation in a route
- Client side loaders and actions
- .server modules
- .client modules
- Entry client and server files
- Form component for submitting form data
- Form vs fetcher
- Managing form resubmissions
- useFetcher, useFetchers, useSubmit
- useLoaderData, useActionData, useRouteLoaderData
- useNavigate
- useParams
- useRouteError
- Integrating tailwindcss in a remix application
- Cookies and session management
- defer
- Environment variables management in remix
- Using Vitest for unit testing the loaders and action functions
- Using @remix-run/testing module for testing routes
The skills
ES6
JSX
Unit tests
Integration tests
Remix
State management
Api calls
HTML
UI composition
Design patterns
The projects
Project 1Library management
During the course code along, build a nice, almost functional library management system for managing books, authentication, issuing/returning books
Project 2Movie ticket booking
As part of the capstone project, build a movie ticket booking system using Reactjs and Remix