What is React?
Raect is a JS library for building front-end application and UI.
It allows us to create reusable components that manange their own state then compose them to create comples UI’s.
It is an officially supported way to create single paged React applications.
It offers a modern build setrip with no configuration.
Create-React-App
What is a React Component?
The building block of any React app.
- Lets you break up the user interface into separate pieces that can be reused and handled independently
- Can be defined as a Function or a Class
- Takes in an optional input (prop) and returns a JSX which is renderd on the screen.
What is a React class component?
- it has to extend React.Component
- requires a render method which teturns JSX
What is a State?
A State contains data specific to its component and may change over time
- When the State changes the component re-renders
- It can contain as many properties as you like
- To change the State we use this.setState()
What is a Prop?
Stands for properties
- Used for passing data fro one component to another.
- Data with props are beign passed in a uni-directional flow ( one way from parent to child)
What are dev tools used for?
Its a Chrome dev tool extention for the open-sourced react extention library.
- It allows you to inspect the react component hierachies
For getting started with ReactJS we can choose between two methods:
- Import the library directly into an HTML file
- Start from create-react-app
You must not forget to link the boostrap.css inside either
./src/index.js
or
./src/App.js
The only method you must define in a React.Component subclass is called
render( )
In order to make your component usable and importable from other ones, you need to export it after its declaration. What is the syntax?
export default App
JSX accepts dynamic code inside what?
curly braces ({…})
Which React lifecycle method is the only required method when writing a class component, and is the most important one?
the render()
(it’s in charge of outputting your JSX and create DOM nodes into the page.
It will be re-invoked every time there’s a change in the props or in the state of your component)
Which is the first method invoked in a class component mounting process.
constructor( )
Which lifescycle method is a method which gets triggered after the component has fully mounted, or after its initial render took place?
componentDidMount( )
(It will just be triggered once during the entire lifecycle of a React component.)
Which method gets triggered every time an update occurs in the component, so every time a change in its state or in its props does happen?
componentDidUpdate( )
Which method gets triggered just a moment before your component gets unmounted (removed) from the DOM?
componentWillUnmount()
(This is especially useful for clearing timeouts or event listeners that are not going to be used anymore.)
