Top Tweets for #20DaysofReact
New feature to the landing page (in the review section): I used ChatGPT to generate the CSS animation.
#20DAYSOFJSREACT #building20daysofjsreactpage #learningjsreact #20daysofJS #20daysofREACT
Learning in Public: Designing the Landing Page for My 20-Day JavaScript & React Challenge!
Check out a sneak peek of the landing page in progress! ๐ Stay tuned for updates and join us on this coding journey!
#LearningInPublic #20DaysOfJSReact #JavaScript #React
๐ฟ๐๐ฎ 2 of #20DaysofReact
> Practiced Event Listeners in React
> Learned about useState and it's use to make a ever updating variable in React.
๐ฟ๐๐ฎ 1 of #20DaysofReact
> Made a Airbnb Clone, which uses https://t.co/XXRsACuwcx() to return dynamic JSX which change when the data changes.
> Also contains a box mentioning SOLD OUT or ONLINE based on the props entered.
Those who know about my #20daysofReact series, I have compiled it into an doc. It contains everything from the basics to advanced topics.
Here is the link:
https://t.co/GilZhlkwN8
I have compiled my React series (#20daysofReact) into an e-book. It contains everything from the basics to advanced topics. If you're interested in accessing it, please comment 'interested' on this post.
DAY 4 of #20DaysOfReact ๐
Topics Covered :
1. Conditional Rendering
2. Component Lifecycle
What is conditional rendering?
Conditional rendering refers to the practice of displaying different content or components based on certain conditions or criteria. It allows you to control what gets rendered in the user interface (UI) based on the state of your application, user interactions, or any other condition you define.
Why conditional rendering?
Dynamic Content: Conditional rendering lets you display different content or components based on specific conditions.
User Experience: It enhances user experience by showing or hiding elements, handling errors, and offering responsive interfaces.
Performance: Helps optimize performance by rendering only what's needed, reducing unnecessary updates.
Authentication: Used to control access to parts of an app based on user authentication.
Error Handling: Allows for displaying error messages or components when issues occur.
Multi-Platform Support: Useful for creating responsive designs for different devices.
Conditional Rendering Techniques:
-if Statements
-Ternary Operator (? :)
-Logical Operators (&& and ||) etc.
DAY 3 of #20DaysOfReact
Topics Covered :
1. States
2. Prop drilling
States in React
Imagine you're building a digital thermostat. The "state" in React is like the current temperature displayed on the screen. It's a way for your app to remember and show information that changes over time. For instance, as the room gets warmer or cooler, the displayed temperature updates to show the current temperature.
In React, we use "state" to make sure our app can remember and show changing information like this. It's like a note that React keeps, and whenever something important changes (like the temperature), React takes a look at the note and updates what's displayed on the screen to match.
The state object is where you store property values that belong to the component. Whenever the state object changes, the component re-renders.
DAY 2 of #20DaysOfReact
Topics Covered :
1. Creating and rendering components
2. Props
What are Components?
Components in React can be thought of as building blocks for building user interfaces. They are like reusable pieces of a web page that you can create and customize, and then you can put these pieces together to create a complete web application.
Imagine you are building a web page, and you want to break it down into smaller, manageable parts. Each part could be a component. For example, you might have a component for the header of your page, another for a navigation menu, one for a product list, and so on.
In React, components are defined as JavaScript functions or classes that return JSX, describing what should be rendered on the screen.
Creating a Component:
React component names must start with a capital letter. there are two common ways to create a component: as a functional component or as a class component.
1. Functional Component :
Functional components are simpler and more concise. These are simply like JavaScript functions.
2. Class Component :
These components are simple classes (made up of multiple functions that add functionality to the application). All class components are child classes for the Component class of ReactJS. Class components are used when you need to manage component state or use lifecycle methods.
What do you mean by rendering a component?
Rendering a component in React refers to the process of displaying or showing a component's user interface on a web page. In simpler terms, it means making the content and functionality defined within a React component visible to the user in a web application.
When you render a component, you are instructing React to take the component's description (typically written in JSX) and transform it into actual HTML elements that appear on the screen.
To render a component:
include the file in the header of "App.js" and pass the props*.
Syntax :
<Component_name prop="value" />
DAY 1 of #20DaysOfReact
Topics Covered :
-What is React?
-Setting up a development environment.
-What is a React component?
What is React?
React is a popular JavaScript library for building user interfaces. It was developed by Jordan Walke, a software engineer at Facebook, and is widely used for creating dynamic and interactive web applications. React makes it easier to manage the state of your application, handle user interactions, and efficiently update the UI when data changes. It follows a component-based architecture, allowing you to build complex UIs by composing reusable components.
Why was react needed?
React was created because building complex user interfaces using just plain JavaScript can become messy and hard to manage as projects grow. React makes this easier by providing a structured way to create user interfaces.
Imagine you're building a house with lego bricks. JavaScript is like having a huge pile of lego pieces, and you need to figure out how to assemble them into a house from scratch. React, on the other hand, gives you a set of pre-designed lego components (like doors, windows, and walls) that you can easily snap together to build your house. This makes building and maintaining the house much simpler and less error-prone.
So, React is like a set of tools and rules that help you build web interfaces more efficiently and maintain them as they grow, without starting from scratch every time.
React's declarative approach
Think of React's declarative approach as writing a to-do list for a personal assistant. In an imperative task delegation, you'd specify detailed instructions for each task, like, "Go to the store, buy milk, check the expiry date, and return home." You're managing every task step by step.
With React, you act like a project manager. You create a high-level task list, saying, "I need groceries from the store," and your assistant handles the logistics, deciding the best route, checking for discounts, and ensuring everything is brought back. You're focused on what needs to be done, not micromanaging the process.
In this task delegation analogy, React allows you to outline the desired tasks (UI state) without getting bogged down in the specifics (DOM updates). When your shopping list (data) changes, React efficiently manages the execution of tasks (UI updates), making sure your web app stays organized and efficient. It's like having a reliable assistant who takes care of the details, making your coding more efficient and your web app management hassle-free.
Get ready, folks! Starting tomorrow, I'm bringing back the #20daysofReact series with some fantastic new additions.
Stay tuned for daily posts dropping at 9pm sharp!
Updates for #20DaysOfReact and #30daysopensource challenges:
Live again now at https://t.co/Y0I4vKQv0D. Some optimisations were made on the data and api side, so now the pages should load much faster. JS bundle size were also insanely large before, so we moved a lot of logics back to server side.
@vidmshariful Hey Shariful,
I'm Hardik. I'm Full Stack Developer. I'm currently in last year of my diploma computer engineering. I'm currently preparing for my DDCET exam. I'm also doing #100daysofai , #20daysofreact challenge and helping others in their PH launch.
@himtkw Yes I have been consistent for my challenges except my #100daysofai challenge. I will complete it soon.
And I have to complete my mini project for #20daysofreact.
Other goals are completed.
What about you Peter?
Day 8: Interview Questions of #20DaysOfReact
My answer is B. I read the explanation but still don't know why.
Does setCount trigger a re-render, and the count would update, aren't they?
๏ฟฝ๏ฟฝ๏ฟฝ๏ฟฝ Check out the image below
I have completed Day 19: Project Ideas of the 20 Days React Learning challenge! ๐
Check out the challenge and learn with me together: https://t.co/G36OT9gNXw
#20DaysOfReact
I have completed Day 2: Components and Props of the 20 Days React Learning challenge! ๐
Check out the challenge and learn with me together: https://t.co/qTsPUxpZye
#20DaysOfReact #react #vue #wevdev
I have completed Day 1: Intro to React of the 20 Days React Learning challenge! ๐
Check out the challenge and learn with me together: https://t.co/qTsPUxpZye
#20DaysOfReact
๐ I am enrolled in the 20 Days of React Learning challenge!
On the next 20 days, I will be reading 3 learning resources each day curated by @maybeshalinii and @TkwPeter and building a mini React project.
Join me now at https://t.co/qTsPUxpZye.
#20DaysOfReact
Day 7 of #20DaysOfReact
I've been a little bit busy in the last few days, but let's go back to the Day 7 challenge: Nested Route.
Last Seen Hashtags on Sotwe
LoveYourselfTourMNL
Seen from United States
puke video
xlii or #exny or #momson or #nolimit() +filter:native_video
Seen from Turkey
ุงู
_ุดุงู
ุจู
Seen from Oman
femboy goon
Seen from Turkey
NOlimit filter:videos
Seen from Germany
CosplayAI
momson() full filter:native_video
femboy
Seen from United Kingdom
Omegle
Seen from Sweden
Most Popular Users
Elon Musk 
@elonmusk
241.3M followers
Barack Obama
@barackobama
119.1M followers
Cristiano Ronaldo
@cristiano
113.1M followers
Donald J. Trump
@realdonaldtrump
111.8M followers
Narendra Modi
@narendramodi
107.1M followers
Rihanna
@rihanna
98.3M followers
NASA
@nasa
92.3M followers
Justin Bieber
@justinbieber
91.5M followers
KATY PERRY
@katyperry
89.1M followers
Taylor Swift
@taylorswift13
83.1M followers
Lady Gaga
@ladygaga
74.5M followers
Virat Kohli
@imvkohli
72.1M followers
Kim Kardashian
@kimkardashian
70.5M followers
YouTube
@youtube
68.8M followers
Neymar Jr
@neymarjr
65M followers
Bill Gates
@billgates
64.7M followers
The Ellen Show
@theellenshow
62.4M followers
Selena Gomez
@selenagomez
62.2M followers
CNN
@cnn
61.8M followers
X
@x
60.8M followers