<React.Fragment> </React.Fragment> can be used for <div> </div>
It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on
very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle
makes it hard to keep the desired layout while extracting logical components.
The DOM inspector is less cluttered.
Using custom css, but use classes for better performance and maintainability
styles = { fontSize: 10, fontWeight: 'bold' };
state = { count: 10, imageUrl: 'https://picsum.photos/200' };
<img src={this.state.imageUrl} alt=''/>
Hard coding classes
<span style={this.styles} className='badge badge-danger m-2'>{this.formatCount()}</span>
Using inline styling
<span style={{ fontSize: 50 }} className='badge badge-primary m-2'>{this.formatCount()}</span>
export default class Counter extends Component{
or
export default Counter;
can be used to export
Break different functionalities into smaller pieces
However, the && operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value. If expr1 can be converted to true, returns expr2; else, returns expr1.
expressions that can be converted to false are:
- null;
- NaN;
- 0;
- empty string ("" or '' or ``);
- undefined.
Use {} to pass expressions
Naming convention for event methods handle...... Eg: handleIncrement() {}
Not calling methods, but simply passing a reference to the method this.handleIncrement In vanilla js the target function is called this.handleIncrement()
this in JS behaves differently than other languages
Depending on how a function is called this can reference different objects
use strict to enable strict mode
With strict mode, you can not, use undeclared variables.
Strict mode makes it easier to write "secure" JavaScript.
The this keyword in functions behaves differently in strict mode.
obj.method() this refers to obj
The this keyword refers to the object that called the function.
function() Standalone function refers to the window object
If the object is not specified, functions in strict mode will return undefined and functions
in normal mode will return the global object (window):
Functions in JavaScript are objects, so they have properties and methods.
So we can use bind method to set the value of this
Bind creates a new function that will force the this inside the function to be the parameter passed to bind()
constructor() {
super(); //base constructor
console.log(this);
this.handleIncrement.bind(this)
// This bind method will return a new instance of the handleIncrement(), and in that function this will be referenced to the current object (Counter)
}
handleIncrement() {
console.log('Increment clicked');
}
or
handleIncrement = () => {
console.log('Increment clicked');
};
Arrow functions cannot rebind this, they inherit this
In React the State is not directly updated.
this.state.count++; value of the count property is incremented but react isn't aware of that.
So the view is not updated.
to solve this we use an inherited method this.setState() from the base Component in React.
this.setState() can only be called when a component is rendered and placed in the DOM
In Angular automatically detects the changes,
because all browser events are monkey patched (It allows you to modify the behaviour of a piece of code without altering the original code)
When a button is clicked or type something Angular is notified and runs it's change detection algorithm, and will update the view.
In React we have to explicitly tell what has changed.
this.setState({count: this.state.count + 1});
Passes the count property: get the current count + increment by 1 and set it
Argument to setState, we pass an object and the properties of the object will be merged with what we have in the State object or
it will override those properties if they already exists.
this.setState() this will tell React the state of the component is going to change.
React will then schedule a call to the render() sometime in the future, this is an asynchronous call
So the virtual DOM will be updated and will compare with the old DOM to figure out what elements are modified
and update the corresponding elements in the Real DOM.
Using a wrapper/helper method (Simple solution and this is messy to use)
handleIncrement = product => {
console.log(product);
}
doHandleIncrement = () => {
this.handleIncrement({id:1})
};
<button onClick={this.doHandleIncrement}
</button>
Using an inline function (Better solution)
handleIncrement = product => {
console.log(product);
}
<button onClick={() => this.handleIncrement(product)}
</button>
When you need to pass an argument to an event handler,
simply pass an arrow function () => and
in the body of the function call the event handler this.handleIncrement() and
pass an argument {id:1})
key={} is used to identify elements uniquely, not a attribute in props
Key is used internally by React, that's why we have to pass id{} for our use
Keys are important, because they uniquely identify elements, helping React understand which items have changed, are added, or are removed
Use an array and then map to have multiple elements of the same component
this.props Every React component has property called props
This is a plain JS object
Includes all attributes that are set in the parent component (passing attributes to the other component using props)
Props are Read-only
pure functions do not attempt to change their inputs
We can read the prop values and use that to initialize components
Name props from the component’s own point of view rather than the context in which it is being used
Eg: Counter has a value
<Counter key={counter.id} value={counter.value} selected/>) Selected will be true by default in props
Attributes set in a component can be passed onto another component using props object
children prop is used when we need to pass something between the opening and closing tags of an element
Can be used to pass complex elements to child components
So we can pass elements through components
counters.jsx
<Counter>
<h4> This heading is a child </h4>
</counter>
counters.jsx
{this.props.children}
prop includes data that we give to a component
Read-only
Input to a component
If we need to modify the prop values we can put it in the local state and use as required
state includes data that is local or private to that component, so other components cannot access that state
Some components may not have a state and get all the data via props
The component that owns a piece of the state, should be the one modifying it.
Number of counters are in the counters state
(child) Counter component will raise an event > onEvent
(parent) Counters component will handle the event> handleEvent
onDelete={this.handleDelete} passing reference of the handleDelete function to the child component (counter).
We name the prop based on the name of the event onDelete
<button onClick={() => this.props.onDelete(this.props.counter.id)} name of the prop passed in the parent component
We can pass the object from parent via props and access in obj using this.props.obj.____
<Counter key={counter.id} onDelete={this.handleDelete} value={counter.value} id={counter.id} />)
(this.props.id)
(this.props.value)
Better way using encapsulation,
<Counter key={counter.id} onDelete={this.handleDelete} counter={counter} />)
(this.props.counter.id)
(this.props.counter.value)
Data can be passed from the parent to the child, but not from the child to the parent.
React uses what is called unidirectional data flow, in other words, data only flows downward
React allows us to pass down function references
Event names use camelCase syntax and the event handler needs to be passed in curly braces
We can handle user input in React using the onChange event of the text field.
When the value of the text field changes, the event handler is called,
updating the value of the field in the component's state
React form elements keep their state
An input form element whose value is controlled by React is called a "controlled component"
e.preventDefault(); is used to stop reloading the page when form is submitted
state is only executed once when an instance of a component is created
Removing local state
Doesn't have it's own local state
Receives all the data via props
Raises events whenever data needs to be changed
Parent take cares of modifying data
Passing a reference of an object from the child component
makes the implementation of the event handler easier
rather than passing an id of the component
Doesn't have it's own local state
Receives all the data via props
No event handlers or helper methods
Lifecycle hooks cannot be used because we only have a single function that outputs the component
Earlier these were called stateless functional components but after hooks these can use the state
const Example = (props) => {
// You can use Hooks here!
return <div />;
}
or this:
function Example(props) {
// You can use Hooks here!
return <div />;
}
Only have a single render method
Instead of having a class extended with a render()
we simply define a function that returns a react element
In functional component need to add props as a parameter
React will pass the props object as an argument to this function at runtime
const NavBar = (props) => {
return (
<component>
{props.}
</component>
)
}
Classes can also be used
{this.props.} only works in class components
class NavBar extends Component {
render() {
}
}
Extract properties from objects and bind them to variables.
Object destructuring can extract multiple properties in one statement,
can access properties from nested objects,
and can set a default value if the property doesn't exist.
<React.Fragment>...</React.Fragment> or <>...</>
Used when returning multiple root elements from the render method
React's StrictMode is sort of a helper component that will help you write better react components,
you can wrap a set of components with <StrictMode />.
It activates additional checks and warnings for its descendants
- Verify that the components inside are following some of the recommended practices and warn you if not in the console.
- Verify the deprecated methods are not being used, and if they're used strict mode will warn you in the console.
- Help you prevent some side effects by identifying potential risks.
Create custom environment variables beginning with REACT_APP_
These environment variables can be accessed on process.env
Side effects are the easier concept.
A "pure function" is a function that maps its input values into an output value
function plus(x, y) { return x + y; }.
A "side effect" is any effect other than that return value:
function plusWithSideEffects(x, y) { alert("This is a side effect"); return x + y; }
Components go through a few phases during it's lifecycle
React will automatically call these methods referred to as lifecycle hooks when going through each phase
So they allow us to hook into certain moments during the lifecycle of a component and do something
Can only be used in class components
When an instance of a component/class is created and inserted to the DOM
Called only once when an instance of a class is created
Best place to initialize properties in that instance
Set the state based on the props received
In the constructor the state is set directly
this.setState() can only be called when a component is rendered and placed in the DOM
We won't have access to this.props unless we pass it as a parameter to the constructor
otherwise this.props will return undefined
construtor(props) {
super(props);
this.state = this.props.something
}
When a component is rendered all it's child components are also rendered recursively
render() {
//returns a react element that represents the virtual DOM
}
Called after the component is rendered on the DOM
Perfect place to make Ajax calls to get data from the server
componentDidMount() {
this.setState( {something} )
}
Whenever we change the state of the component or the props
When updating the state, react will schedule a call to the render()
which means all it's child components are rendered as well
Entire component tree is rendered it doesn't mean that the entire DOM is updated
When a component is rendered we basically get a react element which updated the virtual DOM
React will then look at the new virtual DOM and it has a copy of the old virtual DOM
(this is why we should not update the state directly) So we can have two different object references in memory
Then react will figure out what is changed and based on that React will update the Real DOM
This method is called after a component is updated which means we have a new state or new props
So we can compare the new state/props and old state/props
if there is a change we can make an Ajax request to get new data
So if there is no change it will not make an unwanted additional Ajax call
componentDidUpdate(prevProps, prevState) {
if ( prevProps.counter.value !== this.props.counter.value ) {
//Ajax call and get new data from the server
}
}
When a component is removed from the DOM such as when we delete a component
This method is called just before a component is removed from the DOM
State will be changed when deleting so the entire component tree will be re-rendered
So there will be a new virtual DOM and react will compare with the old one and it figures out a component is removed
So then react will call this method before removing the component from the DOM
This gives an opportunity to do any kind of clean up
Hooks let you split one component into smaller functions based on what pieces are related
Hooks can only be used inside functional components and don’t work inside classes
Hooks lets us to use the state and other React features without writing a class in a functional component.
Hook names will be started from use... (useHookname)
Only Call Hooks from React Functions(React function components and custom Hooks)
Earlier version of React allowed to use state only with class components
useState returns a pair(an array with two items), the current state value and a function, that lets you change the state
useState takes one argument which is the initial value of the state
const [name, setName] = useState("David");
^ declares a state variable called name with a initial value of David
However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.
Runs after every render by default but can skip if certain values haven’t changed between re-renders
Effect Hook lets you perform side effects in functional components
Data fetching, setting up a subscription, and manually changing the DOM
in React components are all examples of side effects.
useEffect Hook is like React class lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount combined
Make lifecycle methods available in functional components
Can have multiple effects in the same component
Types of Side effects are that don't require cleanup and those that do
Network requests, manual DOM mutations, and logging are common examples of effects that don’t require a cleanup
Subscription to some external data source require a cleanup
useEffect(() => {// return()}, []); accepts two parameters 1.Callback function 2.Dependency array
If we don't add an array effect will run every single time when the app renders
If the dependency array is empty it acts as a componentDidMount which means it only runs initially when rendering
If the dependency array has values effect will run when values change only
If the effects returns a function it will run at clean up (optional)
Use React Developer Tools browser extension
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify