Render Shadertoy in Three.js – Mushroom

771

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

565

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

530

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

568

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

547

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

650

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

590

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!

550

React.js

admin

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