【My Study Note】React
Contents
- 1. React
- 2. How React Works
- 3. JSX
- 4. Tools
- 5. Method
- 6. How React Is Displayed
- 7. Components
- 8. Props
- 9. Conditional Statements
- 10. Some JavaScript libraries commonly used with React
React
React is one of the most popular JavaScript libraries, and it is focused on working with components, which makes it simple to build functional user interfaces on web and mobile.
The purpose to use React
- 1. Single Page Applications
- 2. Mobile Applications with React Native
Developers use React to develop these 2 things.
React is usually used with other libraries
When you develop an app, you can choose to use React to develop the user interface. But building an application requires more than that. You must also consider the navigation and how the app will request data from a web server.
Therefore React is used in conjunction with other JavaScript libraries during development.
Why React is so useful
It’s so useful because it allows developers to write less code to create functionality. This in turn makes it easier to maintain code in the long term and simplifies testing.
How React Works
Original Way
Remember when your web browser receives an HTML page, it constructs a DOM, to represent it. But updating the DOM is considered expensive because it is very time intensive for the web browser to do so. Every time the browser DOM is updated, the browser has to reconstruct the DOM again from the beginning.
Yet many big and popular websites still load in no time today. How can it be? One of the way to solve this is to use React by computing its own virtual DOM.
React’s way
When React builds out its tree of components, it builds out its own DOM in memory called the virtual DOM.
The virtual DOM is a representation of the browser DOM that is kept in memory. React uses this virtual DOM to update the browser DOM, only when it needs to. This ensures that your application is fast and responsive to user input.
Reconciliation (Process name)
React checks to see if the HTML components in the virtual DOM matches the browser DOM. If a change is required, the browser DOM is updated. If nothing has changed, then no update is performed.
More details
- The virtual DOM is updated.
- The virtual DOM is compared to the previous version of the virtual DOM and checks which elements have changed.
- The changed elements are updated in the browser DOM.
- The displayed webpage updates to match the browser DOM.
React Fiber Architecture
But even with using the virtual DOM, if a lot of elements are updated by an event, pushing the update to the browser DOM can still be expensive and cause slow performance in the web application.
This is solved by “React Fiber Architecture”.
The Fiber Architecture allows React to incrementally render the web page. What this means is that instead of immediately updating the browser DOM with all virtual DOM changes, React can spread the update over time. But what does “over time” mean?
Imagine a really long web page in the web browser. If the user scrolls to the bottom, the top of the web page is no longer visible. The user then clicks a button on the bottom of the web page that updates some text on the top of the web page.
But the top of the page isn’t visible. Therefore, why update it immediately?
Perhaps there is text currently displayed on the bottom of the page that also updates when the button is clicked. Wouldn’t that be a higher priority to update than the non-visible text?
This is the principle of the React Fiber Architecture. React can optimize when and where updates occur to the browser DOM to significantly improve application performance and responsiveness to user input. Think of it as a priority system. The highest priority changes, the elements visible to the user, are updated first. While lower priority changes, the elements not currently displayed, are updated later.
JSX
Writing code to create visual parts of a website with React is very similar to HTML. But it’s called “JSX”.
Like this
// App.js
render() {
return (
<div>
<h1>h1 heading</h1>
<h2>h2 heading</h2>
</div>
);
}Difference between JSX and HTML
- Multiple elements cannot be put inside return
- Comments (Inside the return)
- Closing tag is needed in JSX
- Specifying Class Names
Multiple elements cannot be put inside return
// App.js
//This is not allowed
render() {
return (
<h1>h1 heading</h1>
<h2>h2 heading</h2>
);
}
//This is the collect (Only one child element inside the return)
render() {
return (
<div>
<h1>h1 heading</h1>
<h2>h2 heading</h2>
</div>
);
}
Comments (Inside the return)
// App.js
render() {
return (
<div>
{/*This is the comment*/}
</div>
);
}When you use JS inside the return, you have to use {}. And inside the JS, you use /* */ to make a comment
→ That’s why {/* */} would be used inside the return.
Closing tag is needed in JSX
// App.js
render() {
return (
<img src="clown.jpg" />
);
}Specifying Class Names
// App.js
render(){
return (
<div>
<h1 className="title">Hello World</h1>
</div>
);
}When you specify the class names, be careful not to use the class=”title”.
Structure of JSX
// App.js
// Import React
import React from "react";
// The class inherits from React.component
class App extends React.Component {
// Define the render method that returns JSX
render(){
// You can write JS outside the return
const text = "Today's a good day";
return (
<div>
{/* Inside the return would be desplayed on the screen */}
<h1>I am so sleepy</h1>
{/* When you use JS inside the return, use "{}" */}
<div>{text}</div>
</div>
);
}
}
// Export the class
export default App;Tools
Event
{/* App.js */}
{/* Since arrow functions are JavaScript, don't forget to put {} brackets around the code. */}
<button eventName={()=>{code}}></button>With an event, you can run some specific code whenever some specific event happens.
onClick
{/* App.js */}
<div>
<button onClick={()=> {console.log("Taylor Swift")}}>Taylor Swift</button>
<button onClick={()=> {console.log("Harry Styles")}}>Harry Styles</button>
</div>We can use an onClick event to run code whenever a certain element is clicked. The event name for this should be onClick.
State
A value that changes depending on a user’s actions is called “state” in React. To use “state” to change what is displayed, 3 steps would be required.
Define State
// App.js
class App extends React.Component {
constructor(props) {
super(props) ;
this.state = {name:"Taylor Swift"};
}
}State is created using an object in the constructor. The starting value of the state is set to that object. For the other parts of the code like constructor(props) and super(props);, just remember for now that they are standard and are almost always written the same way.
Display State
// App.js
class App extends React.Component {
constructor(props) {
super(props) ;
this.state = {name:"Taylor Swift"};
}
render(){
return(
{/* "Hello, Taylor Swift!" would be desplayed */}
<h1>Hello, {this.state.name}!</h1>
);
}
}After it’s created and defined, you can access state with this.state. Also since this.state is an object, you can get the value of any property by writing code like this.state.propertyName.
Update State
<div>
{/* App.js */}
<h1>Hello, {this.state.name}!</h1>
<button onClick={()=> {this.setState({name:"Taylor Swift"})}}>Taylor Swift</button>
<button onClick={()=> {this.setState({name:"Harry Styles"})}}>Harry Styles</button>
</div>With the code this.setState({propertyName: valueToUpdate}), the value of state for the specified property changes. This means values can be displayed with this.state.name can also be changed.
There’s one thing you should be careful about. When you update the value, you cannot update by writing this.state.name = “Harry Styles”;. You can only update by writing this.setState({name:”Harry Styles”});.
Method
Methods are used for grouping code together. Also, they are defined in classes. The code to define a method is methodName() { code }. Methods have curly brackets { } just like functions.
class App extends React.Component {
constructor(props) {
super(props) ;
this.state = {name:"Taylor Swift"};
}
// This is the Method (This is more organized)
handleClick(name){
this.setState({name: name});
}
render(){
return(
<div>
<h1>Hello, {this.state.name}!</h1>
<button onClick={()=> {this.handleClick("Taylor Swift")}}>Taylor Swift</button>
<button onClick={()=> {this.handleClick("Harry Styles")}}>Harry Styles</button>
</div>
);
}
}Map Method
This method applies the same code for every value in an array, and returns a new array.
// App.js
render(){
const singerList = [
{
name: "Taylor Swift"
gender: "Female"
},
{
name: "Harry Styles"
gender: "Male"
}
]
return (
<div>
{singerList.map((singers) => {
return (
<Singer
name = {singers.name}
gender = {singers.gender}
/>
)
})}
</div>
);
}How React Is Displayed
The JSX written in App.js is eventually converted to HTML and displayed in the browser. In order to display code in React in the browser, the files index.js and index.html are needed in addition to App.js.
File Structure
How does it work?
- ReactDOM.render(<App />, … : The JSX in 「App.js」 will get converted to HTML.
- …, document.getElementById(‘id-name’)); : The converted HTML in 「index.js」 gets inserted into the element with 「id=”id-name”」 in 「index.html」.
index.js
import App from './components/App';
ReactDom.render(<App />, document.getElementById('root'));index.html
<body>
<div id="root"></div>
</body>Components
As the name implies, ‘components’ are parts or elements. In React, we will divide the site into components based on functionality and combine them to create the visuals of the website.
Creating Components
Singer Component (Singer.js)
import React from "react";
class Singer extends React.Component {
render(){
return (
<div>
<h1>Taylor Swift</h1>
<h2>Harry Styles</h2>
</div>
);
}
}
export default Singer;When you create a component, you can set the different js files for each different component.
Displaying Components
- Import the Component
- Write <componentName /> within JSX
In order to display components, you have to do two steps in App.js.
App.js
import React from "react";
import Singer from './Singer';
class App extends React.Component {
render(){
return (
<div>
<h1>Hello World</h1>
<Singer />
</div>
);
}
}Pre Made Components
There are in fact many open source libraries that provide pre made components for React projects.
For example, if you want to add a video player to your website, there’s a React component library for that. Also if you want to embed a map. There’s a React component library for that too.
Props
The data that you pass from App.js to the components are called props.
Difference between Components and Props
- Components: Create the frame
- Props: Create the contents inside the frame
How to pass Props
// App.js
render(){
return (
<div>
<Singer
name = "Harry Styles"
gender = "Male"
/>
</div>
);
}You can pass props by writing propName=value in the place where you call a component.
How to receive Props
// Singer.js
render(){
return (
<div>
<h1>{this.props.name}</h1>
</div>
);
}By writing this.props, you can access the object {propName: value}. You can receive the value of a prop by writing this.props.propName.
Conditional Statements
// Song.js
class Song extends React.Component {
constructor(props) {
super(props);
this.state = {isModalOpen: false};
}
render() {
// Declare the variable modal
var modal;
// Prepare the if statement
if (this.state.isModalOpen) {
// When the JSX that will be assigned to the variable contains several rows, it should be surrounded with () as you can see below.
modal = (
<div className='modal'>
<div className='modal-inner'>
<div className='modal-header'></div>
<div className='modal-introduction'>
<h2>{this.props.name}</h2>
<p>{this.props.introduction}</p>
</div>
<button className='modal-close-btn'>
Close
</button>
</div>
</div>
);
}
return (
<div className='lesson-card'>
<div className='lesson-item'>
<p>{this.props.name}</p>
<img src={this.props.image} />
</div>
{/* This would be called if the statement is true */}
{modal}
</div>
);
}
}Some JavaScript libraries commonly used with React
Lodash
As a developer, there’s a lot of logic you’ll commonly write across applications. For example, you might need to sort a list of items or round a number such as 3.14 to 3. Lodash provides common logic such as these as a utility library to save you time as a developer.
» Official Website
Luxon
You’ll be working with dates and times often as a developer. Think of viewing a list of orders and when they were placed, or displaying a calendar schedule for an event. Dates and times are everywhere.
Luxon helps you work with dates and times by providing functions to manipulate and display them. For example, think of how dates are formatted in different countries. In the United States the format is Month Day Year but in Europe it is Day Month Year. This is one area where Luxon can help you display the date in the user’s local format.
» Official Website
Redux
When building a web application, you’ll need to keep track of its state. Think of when you shop online. The web application tracks items currently in your shopping cart. When you remove an item from the cart, the application needs to update what displays on the screen. This is where Redux comes in. It helps you manage your application state and even has advanced features such as undo and redo.
» Official Website
Axios
As a developer you’ll be communicating with APIs over HTTP frequently. The Axios library helps to simplify sending HTTP requests and processing the response. It also provides advanced features allowing you to cancel requests and to change data received from the web server before your application uses the data.
» Official Website
Jest
It is good practice to write automated tests for your code as a professional developer. The jest library helps you to do this and works with many libraries and frameworks. It also provides reporting utilities such as providing information on how much of your code is tested by your automated tests.
» Official Website