- React training at Eurofins, Bengaluru
- Nov 9, 2022
https://codesandbox.io/s/peaceful-hodgkin-bm8y1b
We shall build a few of the features in this app. Please revisit this very page as the app will not show up when you refresh the browser.
https://vw-angular.s3.ap-south-1.amazonaws.com/index.html
The backend for the app is here
https://workshops-server.herokuapp.com/
-
Before beginning React
- UI library for building frontend apps
- Free and open-source
- Handles DOM manipulations efficiently
- Generally used to build Single Page Applications (SPAs)
- The Single Page Application (SPA) architecture
- App includes a single web page (HTML page). The content changes based on the route.
- All HTML, CSS, JS assets are fetched on first page load
- Only data is fetched on need basis.
- Advantages
- Page navigation is faster
- Less load on the server
- Disadvantages
- First page load is slow
- Role of Webpack in SPA
- Babel transpilation
- ES2015+ features can be used without issues
- Supports JSX
- Bundling
- Must for SPA. Reduces page load time.
- Hot reloading
- Faster development
- Babel transpilation
-
Introduction to components
- Component-based architecture for front-end apps
- A component is a small part of the UI. Example: A button, a dialog box
- Features
- Declarative
- Reusable
- Composable
- Scaffolding a React application using boilerplate code (create-react-app)
npx create-react-app project-name
- Understanding the Project Structure and build process
- Start the server
npm start
- Component-based architecture for front-end apps
-
JSX
- Easy way to create "React element" (UI definition)
- A HTML like-syntax (but is actually a non-standard extension to JavaScript) and hence succint
- Features
- Conditional expressions and hiding and showing elements conditionally
- Rendering an array of React elements
- Setting a key for efficient DOM re-rendering
- Styling React elements
-
React Bootstrap
- UI library that offers useful UI components
- Create good-looking and functional UI with less effort
-
Component Basics
- Defining Components
- Function syntax
- Class syntax
- Which syntax to use?
- We prefer function syntax in modern React
- as capable as class components
- simpler to set up use
- most importantly, it is easy to share functionality between different components ("custom hooks")
- We prefer function syntax in modern React
- Props
- Taking input from outside the component using props
- Used to customize an instance of a component
- Composing components
- JSX makes it easy to put together components to form larger components. This way we build the UI incrementally.
- Defining Components
-
State
- Data the component maintains
- Data that changes with time and affects the UI
- Example: Page number in a list of search results, the results for the selected page etc. These change as the user interacts. – Managing state in function components
- The useState hook
- equivalent in class components - setState() method
-
Hooks
- A set of methods in React available only to function components
- They provide capabilities to function components, which previously (before v16.8) only class components had.
- They throw an error if used within a class component, or outside of a function component (i.e not during the rendering of a function)
- They were introduced to simplify implementing components that share common functionality.
-
Side-effects - Logic in a component apart from generating and returning the UI
- Handling asynchronous operations during the lifetime of a component like fetching and displaying data from the backend
- Managing side-effects
- Function components: The useEffect hook
- Class components: lifecycle methods (componentDidMount, componentDidUpdate etc.)
-
Basics of event handling
- A separate handler - receives event object as argument
- Online handler - to pass custom arguments
-
Parent-child upstream/downstream communication
- Shared state is maintained in the common ancestor
- State and callback functions are passed as required to children
- Communication from child to parent component using callback function passed as prop
-
Working with forms and validating inputs
- Using react-hook-form for handling forms and validations
-
Routing
- Handle navigation between "pages" - changes UI according to the "address" (path)
- React Router
- Popular router library
- v6
- Using React router
- BrowserRouter
- Refreshes child (usually App) when path changes ("address")
- Routes, Route
- Used for conditionally rendering components based on path – Link
- Render links that does not cause browser to reload pages
- NavLink
- Same as Link but highlights link if it matches page path ("address")
- Handling dynamic path params
- Parts of the path used to match a component can be dynamic
- /path/to/:dynamic/:part/in/the/route
- useParams() helps extract the dynamic parts from within the matched component
- Parts of the path used to match a component can be dynamic
- BrowserRouter
-
Deployment
- Configuration management in a create-react-app application
- Creating a production build
npm run build
- Deployment on Netlify
- General reference
- You Don't Know JS, Book Series by Kyle Simpson
- The Event Loop and Asynchronous Operations
- Promises - good article explaining its workings
- Functions including how the function context ("this") works
- Reactiflux - Curated list of references created by experts
- This is a very extensive roadmap for further exploration. Too vast, but comprehensive - can be quite intimidating
- React
- React - Community resources and Support - includes references to tools
- Create React app
- React router
- Redux
- React Redux
- Redux Thunk
- Redux Saga Introduction
- Redux Thunk
- Quick introduction to Mobx
- Mobx
- Redux vs Mobx
- Immutable JS
- Webpack - Step-by-step guide
- Resources on Webpack
- Jest
- Enzyme
- List of CSS in JS libraries for React
- Axios Cheat Sheet