You know one of the things that I really should consider is that learning programming languages is just about staying around. Cuz it gets really boring or hard at times.
I think learning to code is all about facing different kinds of problems and errors and trying to either bypass them or solve them.
https://create-react-app.dev/docs/folder-structure
What is the difference between props and states:
In React, both props (properties) and state are essential for managing data and passing information between components. Props are used to pass data from a parent component to its children, ensuring a one-way data flow.234+3 They are immutable and cannot be modified within the child component.234+3 On the other hand, state allows components to manage and update their internal data, which can be modified within the component but not accessed from outside.234+3 State is mutable and can be updated using the setState method.234+3 Changes in props or state lead a component to re-render, and understanding when and how this happens is crucial for optimized React applications.456+1
- Props: Used for passing data between components, typically from parent to child. They are immutable and cannot be changed within the component.234+3
- State: Used for managing data within components. It allows components to change their output over time in response to user actions, network responses, or other events.234+3
Understanding the differences between props and state is essential for building robust and scalable React applications.
How to create a react app?
npx create-react-app my-appHow to run your app and see it live?
npm startWhat is DOM?
a programming interface for web documents that represents the page so that programs can change the document structure, style, and content.
What are Classes in JS?
A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.
https://www.w3schools.com/react/react_es6_classes.asp
You can add your own methods in a class:
How to create class inheritance?
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class:
What is this?
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
How does React Display?
The createRoot() function takes one argument, an HTML element.
The purpose of the function is to define the HTML element where a React component should be displayed.
The render() method is then called to define the React component that should be rendered.
Display a paragraph inside an element with the id of “root”:
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);This will result in this:
<body>
<div id="root"></div>
</body>Attribute class = className
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.
Use attribute className instead.
How to use if in REACT
const x = 5;
const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
Class Component
A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.
The component also requires a render() method, this method returns HTML.
ExampleGet your own React.js Server
Create a Class component called Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}Components can be passed as props, which stands for properties.
Props are like function arguments, and you send them into the component as attributes.
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
There are two methods that we gonna use a lot:
useEffect and useState
useEffect runs with each refresh
Leave a Reply