LUKI NOTES

One library that is quite popular to allow our application to interact with the GraphQL server is Apollo Client ( @apollo/client ). It has support for several popular client libraries including React. It also provides cache management functionality to improve the performance of the application when interacting with GraphQL. Rather than integrating another library to manage our application state, we can leverage what Apollo Client already has to maintain the state. The solution is achieved by creating a customised query to load the result from a local variable or storage. Then, the query is executed like other queries using useQuery() . The steps are as follows. Create a local query that will read data only from the cache. Create a cache that defines a procedure for the query to read data from local values. Call the query anytime we want to read the state value. For instance, we want to read the information of the current user that has successfully logged in...

Redux Toolkit is one of the libraries that can help us manage our application state which depends on Redux. It allows us to create reducers within our application and separate each reducer from one another based on any criteria that we desired in a specific kind of module. There are some approaches that we can utilize to build reducers in Redux Toolkit. Basic Shape const slice = createSlice({ // ... reducers: { increment: (state) => { state += 1; } } }); On the code above, it seems that we mutate the state, but actually, Redux Toolkit utilizes Immer in the backstage so it will be translated into immutable operation. Then, unlike legacy libraries that require us to manually define the action that will be dispatched to be handled by a specific reducer, Redux Toolkit can generate action creators for us. const { increment } = slice.actions; // "increment" is the action creator Then, we can dispatch the action inside our compone...

When we use create-react-app to generate our application source code, we will be provided with a base code that enables  React.StrictMode by default. This wrapper component doesn't render an HTML element but it performs useful functionality to verify that our application is safe for production. It checks for legacy or deprecated React functions or APIs, unexpected side-effects, and unsafe lifecycle. We can read the details about those functionalities on its documentation page . To help us spot side-effects, React will double-invoking several functions in our application such as render , constructor , functions passed in useMemo or useReducer , and so on. By double-invoking such functions, we can detect if unexpected results will show up. But, this process will be initiated only in development mode. When we ship our application in a production environment with Strict Mode enabled, double-invoking will never happen. This is why when we render a component that contains useEffect ...

For accessing the DOM node of an HTML element or referring a React element, we can utilize the ref attribute. In React, we can utilize React.crateRef() function or React.useRef() hook for generating an object that has access to the referred DOM node. Several cases may be faced while we are developing React application. 1) Referring HTML Element . class RefHtml extends React.Component { constructor(props){ super(props); this.textInput = React.createRef(); } render() { return ( <div> <input type="text" ref={this.textInput} /> <button onClick={()=>{this.textInput.current.focus();}}>Focus</button> </div> ); } } 2) Referring React Element (Class Component) . class ReferredElement extends React.Component { constructor(props){ super(props); this.state = {status: "inactive"}; } setActiveState() { this.setState({status: "active"}); } render() { ...

If you build a single-page application using React while your app only gets backend data through API access, it will be convenient to utilize the Create-React-App toolchain. For serving your app to the public, you actually just need to serve the generated static files. Serving static files can be easier when you utilize a container for shipping a web server. Initiate react project then build the app. npx create-react-app my-app cd my-app npm run build Create Nginx server configuration for your app site.conf . server { listen 80; server_name my-app.localhost; index index.html; root /app; error_log /var/log/nginx/error.log; access_log /var/log/nginx/access.log; try_files $uri $uri/ index.html =404; } Create a Dockerfile for building containerized web server. # syntax=docker/dockerfile:1 FROM nginx:latest WORKDIR /app COPY ./build . COPY ["./site.conf", "/etc/nginx/conf.d/"] Build the image and run the container. docker build -t my-servic...