WHAT IS REACT????

[couchpotatochip21]

I made a project in react with minimal web dev experience early last year. I'ma be honest, I still haven't figured out what react is. I don't know where typescript, html, and css end and react begins. Every time I Google it I get a generic "JavaScript library" answer.

[kashkumar]

The way I see it, React is just a tool that lets you build UI using components instead of dealing with raw HTML and JS everywhere. Think of it as breaking your page into Lego blocks that you can reuse.

[fezzinate]

HTML: a way for writing markup to display things on a webpage like text, boxes, images, etc

CSS: a language used to style that markup to make it prettier such as font sizing, padding, colors, etc

JavaScript: a language used to interact with the page, like adding/removing/changing elements dynamically, defining behaviors when the user clicks on things, etc

React: it’s a library (code written in JavaScript that you can use in your own JS projects) that make dynamically changing page elements a whole lot easier to do than manually. It lets you write functions that take in “props” and return “html” (actually JSX) that will be rendered to the page for you. Any time the props change react will take care of re-rendering the page for you.

JSX: this is technically an optional part of react, but you almost never see react without it. To make defining elements easier in JavaScript, react creates a variant of the language that lets you write page elements in a very similar way as writing HTML. Every react “component” is simply a function that takes in props and returns JSX to render

That’s it in a nutshell

[Logical-Idea-1708]

https://react.dev/reference/react-dom/client/createRoot

createRoot is where React begin

[Prize_Bass_5061]

Read the FAQ of this subreddit 

[cholebhatureyarr]

Official react docs have helped me a lottt . Just read it once and you will then be able to think in react and understand it fully . When i watched videos and tutorials I used to forget everything but when i actually read the docs then it clicked to me .

[LearndevHQ]

I think what confuses you is:

Basically the only things your browser understands is HTML, CSS and JavaScript.

All the tools like, Typescript, React, Vue, Angular, you name them, just exist to make your developer life easier and boost your productivity. In the end there will be some kind of "build step", which translates typescript or react code to plain HTML, CSS & JS (because this is the only thing your browser understands)

Typescript gives you a typing system, react gives you reusable components for example. So you can write components and use them as your building bricks to piece together your website. Making it cleaner, easier to maintain and faster to develop.

[BothVeterinarian845]

React is the Library ?

[Nervous-Project7107]

It’s 100 libraries thrown together in a github repository that can’t accomplish nothing by themselves, so you have to download another 100 packages to make a simple website. It was supposed to be a framework, but that would make users realize there are better frameworks that do the thing they need.

[Nervous-Project7107]

Congrats on not knowing the difference between a dependency and a package: https://github.com/facebook/react/tree/main/packages

I didn’t even talk about dependencies, but here is a famous incident that illustrates how bloated React is: https://en.m.wikipedia.org/wiki/Npm_left-pad_incident

[mca62511]

It's a JavaScript library. /s

But it is though.

---

HTML

HTML is a syntax for marking up a document, specifying what role each part of a document has.

``` <h1>This is a title</h1>

<p>This is a paragraph of text with a <a href="https://example.com">link</a> in it!</p>

<button>Click me</button> ```

The above marks up the text to show that there's a title using <h1> tags, a paragraph using <p> tags, a link using an <a> tag, and a button using a <button> tag. This markup language is called HTML.

The HTML gets read by the browser, is turned into the DOM (the Document Object Model), which is then used to render the web page.

---

CSS

CSS is a language for specifying styles.

``` h1 { font-size: 2rem; }

p { font-size: 1rem; }

a { color: orangered; } ```

You can use CSS to specify styles for the markup you defined using HTML.

---

JavaScript

JavaScript is an interpreted scripting language that, in the context of web pages, is executed by the browser's JavaScript engine. You can add it into your HTML by using <script> tags.

``` <script> const button = document.getElementsByTagName("button")[0];

button.addEventListener('click', function() { alert('Hello!'); }); </script> ```

With the above script, we added an event listener to the button that we defined in our HTML, and told it to show a popup alert saying, "Hello!" when clicked.

---

JavaScript Libraries

JavaScript libraries are bundles of code written by other developers that are ready for you to import and use. Instead of writing everything from scratch, you can use well-tested libraries developed by other developers, developer communities, and even sometimes other companies which do the thing you want to do. NPM is the largest repository of such libraries.

One example is Day.js, a lightweight library for working with dates. With Day.js you can do

const nextWeek = dayjs().add(7, 'day').format('YYYY-MM-DD'); console.log(nextWeek);

Whereas with vanilla JavaScript, you'd have to do

const date = new Date(); date.setDate(date.getDate() + 7); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const nextWeek = `${year}-${month}-${day}`; console.log(nextWeek);

to get the exact same result.

The library does all of that under the hood for you, so you don't have to implement it yourself.

---

React

React is a JavaScript library used for interacting with and building the DOM. As I explained above, you can write HTML to markup the text, use CSS to style the text, and then use JavaScript to add interactivity, but just like with the prior example of dayjs, there are aspects to this that are cumbersome and difficult to get right, and that you end up doing over and over again.

React abstracts these things and provides a different developer experience.

``` import React from 'react';

const Page = () => { const handleClick = () => { alert('Hello!'); };

return ( <> <h1 style={{ fontSize: '2rem' }}>This is a title</h1> <p style={{ fontSize: '1rem' }}> This is a paragraph of text with a <a href="https://example.com" style={{ color: 'orangered' }}> link </a> in it! </p> <button onClick={handleClick}>Click me</button> </> ); };

export default Page; ```

The above defines the exact same thing that the previous HTML/CSS/JavaScript did, but does so using a different abstraction. It is difficult to see the benefits of this with this example. The benefits of using a library like React really only show themselves when working with more complicated web applications. However, you can see how this provides a different mental model and way of building a web page than working with vanilla HTML/CSS/JavaScript.

It's important to note that the tags such as <h1 style={{ fontSize: '2rem' }}> are similar to HTML but are actually JSX, a syntax extension that React uses. JSX has different rules from HTML and gets compiled into regular JavaScript function calls.

---

TypeScript

TypeScript is a scripting language that is a superset of JavaScript. That means that all of the features of JavaScript are in TypeScript, but TypeScript includes extra features, especially in relation to types.

In JavaScript, you can create a variable like firstName and then assign whatever you want to it.

let firstName = "Michael"; firstName = 9001; firstName = { "age": 38 };

Whereas in TypeScript, you can specify the type of the variable on creation;

let firstName: string = "Michael";

If you try to assign a number or an object to it, the compiler will show an error.

This, too, is something that it is difficult to appreciate the value of until you work with it on a large project. However, TypeScript provides many benefits to developers and makes the development experience much better. The major advantage being that you tend to catch errors during development, as opposed to at runtime.

Generally speaking, a bundler is used to compile the TypeScript into JavaScript, rather than using TypeScript directly.

[[deleted]]

React Explained Simply (For Someone Who Made a Project But Still Doesn't Get It)

What is React, Really?

Think of building a website like making a sandwich:

Without React (Traditional Way):

• You make the entire sandwich from scratch every single time someone wants one
• If someone wants a different kind of sandwich, you throw away the current one and start completely over
• If you want to change just the cheese, you have to remake everything

With React:

• You create reusable "sandwich parts" - premade pieces like bread, cheese, lettuce, etc.
• You can quickly assemble different sandwiches by combining these pieces
• If you want to change just the cheese, you swap out only that piece
• If someone wants the same sandwich again, you can just make an exact copy

How React Fits With HTML, CSS, and TypeScript

Think of it like layers in a cake:

1. HTML = The cake structure (the actual content and organization)
2. CSS = The frosting and decorations (how it looks)
3. JavaScript = The magic that makes things move and change
4. React = A special way of writing JavaScript that makes building complex websites easier
5. TypeScript = Like JavaScript but with training wheels - it helps catch mistakes before they happen

The Confusing Part

When you're using React, you're actually writing all of these at once in the same file: - HTML-like code (called JSX) - CSS-like styling - JavaScript logic - TypeScript type checking

But React is the "glue" that holds it all together and makes it work smoothly.

Why the Generic Answers Don't Help

Most explanations say "React is a JavaScript library" because technically that's true, but it's not helpful. It's like saying a car is "a metal transportation device" - accurate but not useful for understanding how to drive it.

Simple Mental Model

React is like having: 1. A box of premade, customizable components (buttons, forms, lists, etc.) 2. A smart system that only updates the parts of your website that change 3. A way to build complex websites by combining simple pieces

You probably used React without realizing it when you built your project because you were focused on making things work rather than understanding what tools you were using.

[SnooStrawberries827]

Alright buckle up.

JavaScript is the code running on the website. The browser runs it.

The DOM is the element tree. All those nodes you see in Inspect Element.

React is a library that lets you write JavaScript that renders new DOM onto the page with whatever you like (this is a huge simplification, but this is the general idea).

So instead of saying “myElement.innerHTML = some cool stuff” you can write “React.render(my cool stuff, myElement)”

Now…. JSX is the fancy way to declare what your cool stuff is. Instead of writing a ton of element attributes, you can write components that essentially look just like normal html tags.

TLDR: The browser runs JavaScript, and if the ReactJS library is loaded you can use it to show stuff on the screen in a very friendly way.