Render Shadertoy in Three.js – Mushroom

802

code, React.js, webgl

admin

Today I imported a shader created by "iq" from shadertoy, and rendered it into a beautiful mushroom ever in Three.js. The shocking thing is that it made with only programming codes. You can look through the source code here - https://codesandbox.io/s/threejs-shadertoy-mushroom-eyqel Here is my https://linktr.ee/maapps

`Recoil` – Asynchronous

583

React.js

admin

Let’s continue to learn Recoil for async usage. Please see the comments on important lines. For me, useRecoilCallback didn’t work. With this article, I will stop sharing Recoil examples, of course temporarily. After a couple of days of investigating, I found some result: Yes, it’s interesting, and it’s obviously new way to manage store. Yes, it’s worth to learn, and you can use Recoil along with Redux. Yes, it’s simple more than Redux, you don’t need to structure store files in a complex hierarchy. The learning curve is low. Recoil is being improved actively, there are things to do more. You can find the whole source code here: https://github.com/maAPPsDEV/recoil-async

`Recoil` – Todo List

547

React.js

admin

I continued to study Recoiljs, so I made a Todo list this time. Here is the screenshot: Todo List has features as following: Display List Stats Filter Todos Add Todo item Complete/Uncomplete Todo item Delete Todo item I still feel that it is uncomfortable to type key same as variable name whenever defining atom or selector. I can’t remember that there were duplicated typing in Redux. Okay, let’s get started! You can download the full source here: https://github.com/maAPPsDEV/recoil-todo React.js - 17.0.2Recoil - 0.1.3 Please pay attention to the comments – // @ RECOIL: XXXXX Thanks!

My first `Recoil` experience

585

React.js

admin

I was a Redux fan, and until now, I thought that I could not make any app without it. Of course, there were various kind of state management libraries in JavaScript history, but Redux was the one of bests obviously. Today, I found Recoil by chance, and felt a fresh that could not be told explicitly. Anyway, with a bunch of questions behind, I wrote the first Recoil app. React.js - 17.0.2Recoil - 0.1.3 Since React.js 17.0.2, you don’t need to import React explicitly. Amazing! I recommend to write key by key instead of copy and paste, when trying to learn something. Please pay attention to the comments – // @ RECOIL: XXXXX Still I got questions, such as how to make network request and handle the response? I will keep investigating. You can download the full source code here. https://github.com/maAPPsDEV/recoil-tutorial Thanks!

redux-persist

564

React.js

admin

Do you want to persist store across app launch or refresh (⌘+R)? redux-persist is one of the useful libraries, and it’s introduced in redux official site. https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist Let’s see how it is used for React Native. Oh, awesome, but I don’t want to keep some of individual stores. No problem! Woo! backlist! What a moment, I can smell of whitelist. Yes, you got it. ?

Memorized useSelector() in TypeScript

667

React.js

admin

Sometimes, I needed to make selectors memorized for the performance, while working with Redux. Yeah, performance, you should probably think about it at least once. React.js looks very easy, JavaScript, Components, Virtual DOM, bla bla bla… But actually, it isn’t such easy. If you write codes with empty brain, then the app works, but it won’t be fast never. There are many cases where we can optimize codes. Here is an example to memorize useSelector() hook. And as always, I prefer the way in TypeScript. If you need a JavaScript version? oh, come on, should I put that as well? ? Oh!, I forgot to put an example of usage. Here you go! Thank you!

Create Store with Redux toolkit

608

React.js

admin

I use a pattern to create an application store with Redux. Of course, redux-toolkit will be used as usual. In addition, some useful middlewares will be good receipts.

Hello world!

567

React.js

admin

Welcome to MAAPPS. This is a simple React.js example. Yeah! Let’s start with “Hello World!”