React summery after 3 weeks studying.
2 min readDec 31, 2019
- It is a JavaScript library.
- declarative: that means we have to write what to display rather than how to display.
- component-based: that’s why we can break an app into a reusable, independent smaller component.
- After learning to react we can use to develop native mobile apps, desktop apps, and CLI tools and we can render serverside through nodejs.
- JSX means JavaScript XML we well use to write react elements and its syntax is very similar to HTML. Every Jsx element needs to close and every element can be a self-closing tag. JSX is also an expression.
- You can put any valid JavaScript expression inside JSXand you have to wrap inside { } curly brackets.
- We gave id ‘root’ to an Html tag inside the body and that root tag is managed by React. ‘Ex. ReactDOM.render(element, document.getElementById(‘root’) );’
- React elements are immutable. Once you create an element, you can’t change its children or attributes.
- React don’t reload the whole page instead of its only change what is necessary.
- Function components are stateless and class components are stateful that’s why we can only save state in class components.
- There are multiple ways to handle an event
- Conditional rendering is very similar to ‘if’ ‘else’ or ternary operator JavaScript but inside we have our React element or React Module.
- We can use JavaScript logical operators like ‘&&’, ‘||’.
- A “key” is a special string attribute you need to include when creating lists of elements.
- The component can receive an object from his parent component we called it props.
- In React, a mutable state is typically kept in the state property of components and only updated with setState().
- Form maintains its own state and updates based on user input.
- In React, changeable components kept inside state property and we can only update it with SetState() and it takes an {} as a parameter.
- When we need to send data to its sibling components we lift our state up.
- Composition and inheritance are the approaches to use multiple components together in React.js. This helps in code reuse.
- You can write the expression in between {}
- Props used to send one component to another. And props are read-only.
- You can change the state. When state change components re-render.
- In React Data flows at unidirectional that is upwards.
- In React we break an app into smaller components and in the end, we have only one component which contains other child components.
