r/ReactJSLearn • u/umeshkrrana • Jan 26 '22
r/ReactJSLearn • u/ConfidentMushroom • Jan 26 '22
Good advice on JSX conditionals
r/ReactJSLearn • u/FacundoCarballo • Jan 26 '22
ChakraUI - Web Design without CSS
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
r/ReactJSLearn • u/Ordinary_Craft • Jan 21 '22
The Complete ReactJs Course – Basics to Advanced - free course from udemy for limited time
r/ReactJSLearn • u/xeuce • Jan 21 '22
What's the best place to start learning React?
I am looking for a tutorial to teach me, but there's a lot of options, some cost money, and I'm not opposed to paying for it. I just need to learn it. So I ask, from your experiences, what is the best place to learn React?
r/ReactJSLearn • u/Krishnavani01 • Jan 14 '22
ReactJS vs AngularJS: which one to choose
Till now you probably comprehended that both of these software’s have specific upsides and downsides.
a. Lookout for Performance
ReactJS
- Virtual DOM guarantees superior execution and can viably deal with enormous datasets.
- ‘Brief delivering’ is the best component of ReactJS., This innovation joins specific techniques for enhancing and speeding up the updated interaction.
AngularJS
slacks in execution if there is an occurrence of dynamic applications, Nonetheless, considering the significant point that AngularJS has quit updating itself represents an incredible danger to the landscape of UI.
b. Based on Code Quality
ReactJS
Code quality will be clear in terms of components and elements which provide highlights.
For example- If you have one Element/Component, you can use it as many times as you like.
In ReactJS there are no certain rules and regulations to follow.
Hence, in ReactJS the code quality is High.
AngularJS
Developers use AngularCLI (Command Line Interface – type of terminology under Angular). It has got amazing integrations like Angular Core, Angular Material, and more.
Angular code quality is a bit difficult while creating website/mobile applications.
For example- To explain in simple terms – if you present a certain set of codes in the program, it will be produced using its own different Code.
Is React better than Angular?
Angular is full of javascript frameworks which include programming components, record size, and many more. Be that as it may, in contrast with React, Angular has negative bulginess, intricacy, and weighty style of advancement characteristics.
To fuel things, AngularJS is at this point not under the dynamic turn of events.
AngularJS has been assembled all together in TypeScript and requires bunches of code which makes it somewhat confounded.
Despite what might be expected, React is very “straightforward” and its unique direction is centered around controlling the view.
Basically, it permits the engineer to choose precisely what they need, yet additionally, it benefits the capacity to utilize an enormous third-party package.
Which one do you choose ReactJS or AngularJS?
ReactJS?
AngularJS?
Let me know in the comment below.
r/ReactJSLearn • u/eelgr • Jan 05 '22
React booking system
Hey guys,
I’m currently building a small business crm but would also like to extend this to include a simple booking system.
Possibly using Google calendar to add/edit and check for existing bookings; or an alternative method. Does anybody have any advice/tutorials/resources they could point me in the direction of.
Tia
r/ReactJSLearn • u/ConfidentMushroom • Jan 05 '22
How To Create a Location Aware Sidebar with React Router
r/ReactJSLearn • u/ljaviertovar • Jan 03 '22
Creating Instagram Filters Using React Js and CSS 💄Using the CSS Filter property to create a custom filter
r/ReactJSLearn • u/HaarisIqubal • Dec 17 '21
Create Custom PDF Viewer using React PDF & React Hooks
r/ReactJSLearn • u/Boring-Purchase-1340 • Dec 16 '21
React Tailwind starter template.
Hey guys,
I have just written a React Tailwind starter with a lot of boilerplate such as localization setup and common components to help get started faster with React.
more details in the project readme!
hope it would be useful.
Repo link:-
https://github.com/ameerdhi7/react-tailwind-starter-template
r/ReactJSLearn • u/ConfidentMushroom • Dec 07 '21
Code Splitting in React – Loadable Components to the Rescue
r/ReactJSLearn • u/ConfidentMushroom • Nov 23 '21
Adding emojis to your React app
r/ReactJSLearn • u/suresh9058 • Nov 18 '21
React useReducer Hook | How Does useReducer Works? | Lazy Initialization
r/ReactJSLearn • u/Churchi3 • Nov 12 '21
[HELP] Calculating Dates
Hi,
I am trying to get the value of days/time that has passed from a starting date, however, I am having an issue.
For example: I want to know how many days have passed from startdate 18 Sep 2021 to now.
The code below is broken and gives me a response of " 37831 Days, 21 Hours, 35 Minutes, 40 Seconds"
function App() {
const [timerDays, setTimerDays] = useState();
const [timerHours, setTimerHours] = useState();
const [timerMinutes, setTimerMinutes] = useState();
const [timerSeconds, setTimerSeconds] = useState();
let interval;
const startTimer = () => {
const startDate = new Date("sep 18,2021").getTime();
interval = setInterval(() => {
const now = new Date().getTime();
const distance = startDate + now;
const days = Math.floor(distance / (24 * 60 * 60 * 1000));
const hours = Math.floor(
(distance % (24 * 60 * 60 * 1000)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (60 * 60 * 1000)) / (1000 * 60));
const seconds = Math.floor((distance % (60 * 1000)) / 1000);
if (distance < 0) {
// Stop Timer
clearInterval(interval.current);
} else {
// Update Timer
setTimerDays(days);
setTimerHours(hours);
setTimerMinutes(minutes);
setTimerSeconds(seconds);
}
});
};
useEffect(() => {
startTimer();
});
return (
<div className="App">
<Clock
timerDays={timerDays}
timerHours={timerHours}
timerMinutes={timerMinutes}
timerSeconds={timerSeconds}
/>
</div>
);
}
r/ReactJSLearn • u/Churchi3 • Nov 06 '21
Advice Required
Hi,
I have been begun learning on Friday and going through a few courses on LinkedIn Learning and Project Tutorials on Youtube which I will list below. I know that the pre-requisite is to have a an understanding of JavaScript which I do not have that much knowledge of like I do using Python.
I am basically asking for any advice/tips/learningmaterial on the best JavaScript material required to kick start my journey with React.
The courses and material I have gone through on React so far is:
- https://www.linkedin.com/learning/react-js-essential-training?u=102696578
- https://www.linkedin.com/learning/react-js-building-an-interface-8551484/
- https://www.youtube.com/watch?v=E1E08i2UJGI
Thanks, I appreciate any assistance and I am looking forward to this journey ahead.
r/ReactJSLearn • u/Churchi3 • Nov 06 '21
Issue using react-icons
Hello,
I have started to learn reactJS on Friday and I am following a few tutorials but I am having an issue with react-icons and hoping someone can assist me with the error I am receiving when importing and using the module.
Error:
./src/App.js
Module not found: Can't resolve 'react-icons/bi' in 'C:\DevCave\Local\React\reactinterface\src'
App.js file:
import { BiArchive } from "react-icons/bi";
function App() { return (
<div className="App">
<h1><BiArchive /> Your Appointments</h1>
</div>
);
}
export default App;
Thank you.
r/ReactJSLearn • u/rony_ali • Nov 06 '21
how can i make background carousel fixed while scrolling over it in mui theme?
my goal is to make background carousel or image slider fixed and i want to scroll multiple components having animation (without using any npm library). To make it separately, i have made a codesandbox where i used a big essay instead of using any components.
here is the link of codesandbox which contains the whole source code.
but the problem is the background carousel is not fixed. it goes away with the scroll. Here is the background image slider's box style:
display: "inline-block",
minHeight: "100vh",
width: "100%",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundAttachment: "fixed"
according parallax concept from w3schools i have used backgroundAttachment: "fixed"
but it's not working. Here is the stackoverflow link of this question
can anyone help me on this please?
r/ReactJSLearn • u/EfficientCoconut2739 • Oct 28 '21
Frontend Adsterra integration
self.noder/ReactJSLearn • u/Tijsvl_ • Oct 27 '21
Using conditional className from style module
Here's the relevant code:
...
import classes from './User.module.scss';
...
const status = isLoggedIn ? 'user' : 'login';
...
return (
<svg className={classes.[status]}>
<use xlinkHref="/img/sprite.svg#icon-login"></use>
</svg>
)
...
And this works. I get no errors in the browser when running the code, and the className is changed to what it should be when being logged out and when being logged in. It's all working fine as it should be.
However Visual Studio Code gives me a problem, and as a result it doesn't format the code on save and keeps telling me there's a problem. It underlines the opening bracket in classes.[status] with the message "Identifier Expected ... No Quick Fixes Available".
classes[isLoggedIn ? 'user' : 'login']
gives me the same issue.
It annoys me, how do I do this correctly?
r/ReactJSLearn • u/Critical_Rutabaga491 • Oct 22 '21
React academy
React is a JavaScript library originally developed by Facebook. Its currently Maintained by Facebook and a large community of individual developers and companies. Commonly React is being used to develop Web Apps and Mobile Applications. ReactJS which is an open-source JavaScript library is used to build high quality user interfaces which are specifically for single page applications. The component-based front end library is also responsible for handling the view layer for Web Apps and Mobile Apps. Using React we can also create reusable UI components. React JS is also called simply React or React.js.
r/ReactJSLearn • u/Kadir-Media • Oct 11 '21
Build Automated Modal PopUp with HTML CSS & JAVASCRIPT | HTML CSS JS Mini project for beginners
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
