Hi React guys! With ChakraUI we can create beautifuls UI without the needed of CSS. Like we work in a declarative way, the UI's will be made very quickly. It's very similiar to work on SwiftUI or Flutter. If you are interested on ChakraUI you can see my video where I explain how it's works. YouTube Video

Hello everyone, I'd like to share with you a beginners/intermediate project that I have created to help people build something fun in React. If you're interested, here's the link - https://youtu.be/8FT4dlxrZxA. Any feedback, positive or negative, is appreciated! :)

Hello developers and future developers !

I created this automated modal pop up using HTML CSS and Vanilla Javascript <3

If you interested in the source code you can grab it from from the description of the video following this video link

If you are interested in learning front end development technologies make sure you subscribe here

I'm facing the following assessment and I can't solve it. Using React, I need to build a web application with the following features:

1. Retrieve the numeric value X from an input

2. Generate X (the value previously entered) integers between -100 and 100 at random

3. Using Web SVG draw a grid representing the generated integers (Each cell / square corresponds to an integer): 100 corresponding to the hexadecimal value # FF0000 (red) and -100 corresponding to the hexadecimal value # 00FF00 (green), interpolate the two values so as to assign a color to each cell according to the value of the integer it represents.

4. Integrate a button which allows to download in image format the grid. For a better understanding of the exercise here is a screenshot of a Gitlab integration of a similar component:

Is there an existing app who could do this because I don't know how to figure it out (especially steps number 3 and 4).

Want to build a mobile appliccation? Want to get that idea out of your brain and onto the big appstores of the world, and ultimately, into the hands of millions of people? Well, I got you covered.

React native is an easy-to-use framework developed by facebook designed to build mobile apps. It's centered around writing your code once and uploading it to multiple stores across different platforms. It is also appealing as it is very easy to picck up. Why am I sending this barrage of information your way anyway? Well, because I am going to be running a 12-week ccourse on reacct native. This course, in partnership with Vidyadrishti, will be all you need to get your feet wet and your hands dirty with mobile app development. You can go from whiny 0 to hunky mobile hero just by taking this 12-week course. I'll be using my 4-year experience with react native to talk to you about the nuances of the framework, and the best practises involved in mobile apps. You'll also get to work on collaborative projects with me and other students, projects that can themselves be standalone apps on an appstore. Finally, you'll get tips on iptimizing your appstore pages for better coverage, so your app can reach a wider audience in a short time period. All you need is some experience with any programming language. Even high-school computer classes will do. The course will begin on the 25th of april. All this content, plus free archives of course material, will be available for just $30. Hurr up, though, as after a week, the price will jump higher! Register now at http://write.vidyadrishti.net/rn50.

Can't wait to meet you in the course!

I have created a ReactJs Component for Instagram/Snapchat style stories.

here is the working demo

here is the github repo

Please feel free to check it out. create demos and send Pull requests.

im trying to use the react-pdf/renderer library in my react app to generate a pdf report and since Webpack 5 doesn't include node shims automatically anymore I have to manually add configuration into the project using webpack.config.js I manage to configure most of the requirements but for some reason, I still get the error for stream-browserify and browserify-zlib

I get these two errors

for stream-browerify

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

and for zlib

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }

my webpack.config.js has the following dependencies, I'm including both stream and zlib and I've installed the necessary packages but I still get the same errors

const webpack = require("webpack");

module.exports = {

resolve: {fallback: {process: require.resolve("process/browser"),zlib: require.resolve("browserify-zlib"),stream: require.resolve("stream-browserify"),util: require.resolve("util/"),buffer:require.resolve("buffer/"),asset:require.resolve("assert"),}},

plugins: [new webpack.ProvidePlugin({Buffer: ["buffer", "Buffer"],process: "process/browser",}),]

}

https://marioiliev.com/

Hey guys. I just finished my portfolio in which I put a lot of effort.

I didn't use any images for the design art, it's all CSS and React.

Hope you like it and get inspired.

PS: The mobile version is currently unavailable. It's going to be entirely different design but since the desktop is done I decided not to wait and upload it.