<figure><img alt="React.js + Three.js" src="https://cdn-images-1.medium.com/max/1024/1*Cs5SmQtj151mM_eMMNaEMw.png"></figure>Three.js is a powerful JavaScript library for creating 3D animations and visualizations on the web. It allows developers to create stunning 3D graphics and animations using JavaScript and WebGL, which is a technology that allows for hardware-accelerated 3D graphics in web browsers. In this blog post, we will explore how to use Three.js in a React.js application.
To get started, we need to install the three.js library by running the following command:
<pre>npm install three</pre>
Next, we need to create a new React component that will render our 3D scene. In this component, we will import the three.js library and use its API to create a simple 3D scene that consists of a cube and a camera.
<pre>import React, { useRef, useEffect } from 'react'; import * as THREE from 'three'; const ThreeScene = () =&gt; { const containerRef = useRef(null); useEffect(() =&gt; { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); containerRef.current.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; const animate = () =&gt; { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); }, []); return &lt;div ref={containerRef} /&gt;; }; export default ThreeScene;</pre>
In this example, we used useEffect hook to set up the scene and animation.
This is just a simple example of how to use Three.js in a React.js application, but the possibilities are endless. With Three.js, you can create complex 3D animations, interactive visualizations, and much more. It’s a powerful tool that can help you to create truly immersive experiences on the web.
In conclusion, Three.js is a powerful JavaScript library that makes it easy to create 3D animations and visualizations on the web. It’s easy to integrate into a React.js application using hooks, and the possibilities are endless. Whether you’re building a game, a scientific visualization, or just a fun 3D animation, Three.js is definitely worth checking out.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=bfb3e0969fea" width="1" height="1" alt="">

Creating Stunning 3D Animations with React.js and Three.js: A Step-by-Step Guide

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BP3ydLKiIvYPc7KTXdh46Q.png"></figure>Next.js is a popular JavaScript framework for building server-rendered React applications. It provides a powerful set of features that make it easy to build scalable, high-performance web apps with minimal setup. In this blog post, we will explore some of the key features of Next.js and walk through an example of how to build a simple web application using this framework.
One of the key benefits of Next.js is that it allows developers to easily build server-rendered React apps, which can improve the performance and SEO of their applications. Server-rendering pre-renders the initial state of a React app on the server, which allows the browser to display the app’s content more quickly. This can lead to faster load times and better SEO, as search engines can easily crawl and index the app’s content.
To demonstrate this feature, let’s build a simple web app that displays a list of users. First, we need to install the Next.js framework by running the following command:
<pre>npm install next react react-dom</pre>
Next, we need to create a new file called pages/index.js, which will be the entry point for our web app. In this file, we will define a React component that renders a list of users.
<pre>import React from 'react'; const users = [ { name: 'John Doe', age: 32 }, { name: 'Jane Smith', age: 27 }, { name: 'Bob Johnson', age: 42 }, ]; const Home = () =&gt; ( &lt;div&gt; &lt;h1&gt;Users&lt;/h1&gt; &lt;ul&gt; {users.map(user =&gt; ( &lt;li key={user.name}&gt; {user.name}, {user.age} &lt;/li&gt; ))} &lt;/ul&gt; &lt;/div&gt; ); export default Home;</pre>
Finally, we need to start the development server by running the following command:
<pre>npx next</pre>
Now, if you visit http://localhost:3000 in your web browser, you should see the list of users displayed on the page. As you can see, it's very easy to build a server-rendered React app using Next.js.
Another benefit of Next.js is its built-in support for code splitting and dynamic imports. This allows developers to easily break their app’s code into smaller, more manageable chunks, which can help to improve the performance of their app.
To demonstrate this feature, let’s add a new page to our web app that displays a user’s details. First, we need to create a new file called pages/users/[id].js, where [id] is a dynamic parameter that represents the user's ID. In this file, we will define a React component that renders the user's details.
<pre>import React from 'react'; const User = ({ user }) =&gt; ( &lt;div&gt; &lt;h1&gt;{user.name}&lt;/h1&gt; &lt;p&gt;Age: {user.age}&lt;/p&gt; &lt;/div&gt; ); export const getServerSideProps = async ({ params }) =&gt; { const user = users.find(user =&gt; user.name === params.id); return { props: { user } }; }; export default User;</pre>
Next.js automatically splits the code for this new page into a separate JavaScript file, which will only be
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7728e620aaba" width="1" height="1" alt="">

Building High-Performance Web Apps with Next.js: A Step-by-Step Guide

<h3>React 18 — What’s New, What Changed &amp; Upgrade Guide</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7XX4BvSEtU43g4OYPB1C5A.jpeg"></figure>React version 18 was released. And since it is a major new version of React, it does, as you would expect, introduce some new, exciting features. Thankfully though, it does not break your existing code. What you learned about react still applies. The code you write still is the same. Updating indeed is a piece of cake.
All you have to do is run npm install and install the latest versions of React and React DOM. And then there’s one single change you have to make to your codebase to take advantage of all the new features unlocked and added by React 18.
<pre>npm install react@18 react-dom@18</pre>
You have to go to your route entry file, typically index js. And then in that file, replace the import of React DOM from React DOM with this import where you import from React DOM slash client. So that’s a tiny addition you have to make to this import statement. And replace the line where you call React DOM render to render the root component into some element in the index HTML file with the line below, where you call create root on React DOM instead and you pass the root element in the index HTML file to create root. And then on this root object, which is returned by create root, you call render to render the root component into this root element in index HTML.
<a href="https://medium.com/media/4458d9dd5a5c3125297ee107bfd77800/href">https://medium.com/media/4458d9dd5a5c3125297ee107bfd77800/href</a>That’s the only change you have to make to your code. No other code changes are required. That’s only in one file and only in these two lines of that file, as you see it’s super simple and all the rest you learned still applies. There’s nothing else you have to change. Now, why was this change made? Why was this syntax changed? Because by changing to it, you opt in to a new set of features and into a lot of behind-the-scenes improvements and changes that were introduced by React 18.
The most important new feature introduced by React 18 is a feature called concurrency, and that’s actually rather a concept that is made up of a set of features that were unlocked and added by React 18. Concurrency is all about processing multiple simultaneous state updates. Consider a list that updates as a user types into an input field. If there is a lot of data to be processed or the logic for processing the user input is rather complex, the user interface can get sluggish and slow especially on slower devices.
In the past, prior to React version 18, React always processed all state updates in the order in which they were triggered. And the next state update could only be processed once the previous one was done. With React 18 and the addition of the concurrency concept, you can tell React that a certain state update has a lower priority than another state update. And React is then able to treat the other updates with higher priority.
Now, you tell React about a state update that has a lower priority by using one of the new APIs introduced with React 18.
You can use the useTransition hook or the startTransition function in places where hooks can’t be used. For example, in class-based components to tell React that a certain state update process is about to start and that it shouldn’t wait for this process to finish before processing other state updates. So the rap state update will have a lower priority. In other cases, you might have a value that’s generated by some state update that you maybe don’t directly control, and you can use useDeferredValue to let React know that an older version of the value should be shown until the new value is ready instead of waiting with the entire component and UI update until the new value is available.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1008/1*7bs6TX-GSX3xvzKxnAd3Ow.png"></figure>Now, these functions and hooks are obviously, very new and therefore we will, of course, have to see which patterns and best practices will emerge based on them. You should definitely not start wrapping all your or state updating calls or all your values with those functions and hooks. Instead, you should use them in niche cases were very complex calculations are going on where the interface is sluggish and you have no other way of improving it, or you have no other obvious error that could be causing this behaviour, then these functions and hooks can be helpful.
Now React 18, also introduces a couple of other functions which are primarily intended to be used by library authors. These hooks solve specific problems which may be encountered by specific libraries like CSS and JavaScript libraries and they allow the authors of these libraries to work around any problems they might face and utilize the new concurrency features unlocked by React 18.
As an application developer, you will probably never work with these hooks. Now, besides these new APIs and hooks, you also get some changes for existing features. For example, state batching.
State batching already existed in older versions of React as well and it’s all about grouping multiple state updating calls together so that they are executed as one state update call instead of multiple calls. This ensures that the component to which the state updates belong is not evaluated and executed multiple times unnecessarily, but that at it in status only executed once.
Now, the problem is that with React 17 or older, this feature already existed, but it only worked inside of synchronous React event handler functions. If you, for example, had a function that was triggered because a timer expired, state updates performed in that function were not batched together. This changed with React 18 and state batching now always works no matter where you make your state updates. Now, one note about this state batching example, if you try to reproduce this on your own with React 18, you might still see double log outputs for state changes that should be batched together. And that is related to strict mode, which during development, and only there, renders a component twice to perform some extra checks.
This able strict mode by removing it from index JS, if you have it there, and then thereafter, you’ll see the updated state batch and behaviour.
Another important change affects the suspense component. The suspense component was also already added in older versions of React, and it can be used to be wrapped around lazily loaded components. Lazy loading simply means that you implement code splitting to only load to code for a certain component when it is needed. This can help with performance since less code has to be downloaded initially. This is often used in combination with routing.
Now you could already use the suspense component to show a fallback component, for example, a loading spinner until the code for the lazily loaded component was downloaded. However, prior to React version 18, you could not use the suspense component if you also used server site rendering. Now, of course, many apps might not use that but if you did use it, you were not able to use the suspense component because it would cause an error. With React 18 that changed and you can now use this component as you always were able to use it on the client-side, on the server-side as well.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*VyjoCG-C87eQerURlHKnqw.png"></figure>As a side note, we will probably see more exciting changes to the suspense component in the future now that React 18 is out because the React team does plan to also make the suspense component work with data fetching not just with code fetching for lazily loaded components. The idea is that your components if they’re fetching data, can tell React that they are and tell React when they are done fetching data. And then the suspense component, which is somewhere above the data fetching components in the component tree is able to show a fallback for the components that are fetching data until the data is there. This means that you won’t have to manage the loading state manually inside of your components anymore and you can decouple the logic for doing that from your user interface.
Now, this feature is not there yet, but it’s planned to be added in the future and React 18 also lays the foundation for that.
Another exciting feature, which isn’t there yet but which we’ll probably see in the future now that React 18 was released, is server components. These are components that are not just pre-rendered on the server, as you can already do today with server-side rendering. But instead, these are components that are meant to only execute on the server and yet work seamlessly together with client site components.
<a href="https://medium.com/media/aaa9fca416ed978ff1ac235ca9140c6d/href">https://medium.com/media/aaa9fca416ed978ff1ac235ca9140c6d/href</a>Once this feature is added to React, it will effectively turn React into kind of a full-stack framework or library which allows you to make server site with client site code so that you’re not just limited to building user interfaces but you instead can also perform certain server site only logic in your React app.
This could be used for performing tasks on the server that should not run on the client for security or performance reasons.
This feature is not there yet. You can’t yet use these components. It’s an alpha stage only and will probably change a lot over the next months. But we will probably see it in the future
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=63fcc65943cc" width="1" height="1" alt="">

React 18 — What’s New, What Changed &amp; Upgrade Guide

IMCH

I like to code things from scratch, and appreciate breathing life into thoughts in the program.

Web Development

Voqzi

ANS Jewelry Swarnapuri

Fullsixcarbon

Levels N Curves Creative Studios

Vanni

Vanni Rehabilitation

Jiofi

Custom UI design for Jiofi

I improve applications for clients and often collaborate with product and design teams.

App Development

I esteem basic substance structure, clean plan designs, and thoughtful interactions.

Hello, I’m

Vino Crazy

Full-stack Developer

Software Engineer at Trane Technologies

About Me !

From Lean Design Sprints to Agile Development

1. Research

2. Design

3. Build

Which is why I Never Stop Learning.

Mobile App Development

Web Development

Other Skils

Ways I can help you

Web Application

Mobile Application

What’s cooking in the lab?

Let’s Work Together

Reply time: within 1-2 working days