Matthew Bodily
Lecture Slides for DevMountain's Web Development Course
This week's content is going to be very difficult. Many consider this the most difficult week for them. Like mentioned in orientation, you should expect to:
Struggle
Feel Overwhelmed
Feel Behind
Don't get discouraged! Work hard and good results will follow.
React is a JavaScript library that was created and is maintained by Facebook. React is used to manage the DOM and create highly performant user interfaces. Some websites that use React are:
Netflix
Imgur
Venmo
React's purpose is to make front end JavaScript development easier. Some of its advantages are:
JSX
Virtual DOM
Component Based Architecture
Unidirectional Data Flow
In React, code is split into chunks called components. This architecture makes code highly reusable and easy to debug.
The Virtual DOM is a light-weight copy of the DOM. React uses the virtual DOM to make changes to the user-interface more performant. When a change is made to the virtual DOM, a process known as reconciliation happens between the virtual DOM and the actual DOM. Only necessary changes to the UI are made to the actual DOM.
To get started with React, we will be installing the create-react-app package from npm. Create-react-app handles all of the boiler plate setup of React so that we can start building right away.
npm install -g create-react-app
To create a new react project, navigate to where you would like that project to live in your file-tree, and then run the following command:
create-react-app name-of-app
Once the app has been created, navigate into it and run the following:
npm start
In React, components are the building blocks of our code. There are two types of components: Class Components and Functional Components. Class Components are also called 'smart components', with functional components also being called 'dumb components'.
Class components are built from JavaScript classes, and allow us to store data, called state, in our component. The syntax for a class component is as follows:
import React, {Component} from "react";
class SmartComponent extends Component {
// render method
render() {
return <h1>Hello, I'm a class component</h1>;
}
}
export default SmartComponent;
Import React
Build class for component
Render Display
Export Component
Functional Components are built from JavaScript functions, and are commonly used to perform specific functionality or display:
import React from "react";
const DumbComponent = () => {
return(
<h1>Hello, I'm a functional component</h1>;
)
}
export default DumbComponent;
Import React
Build function
Display
Export Component
You're probably looking at the display part of components and thinking, "That's HTML!".
It's actually known as JSX, which is a syntax extension for JavaScript that is structured very similarly to HTML.
When working with JSX, you have access to all the same elements that you would with HTML, just bear in mind that events will be camelCase and the class attribute is now className, as class is a reserved keyword in JavaScript.
<div>
<h1>This is JSX</h1>
<p>It looks very similar to HTML.</p>
</div>
As mentioned earlier, Class Components are able to store state. State is a way to store data in a component.
import React, {Component} from 'react';
class MyComponent extends Component {
constructor(){
super();
this.state = {
name: 'Tayte'
}
}
render(){
return (
<h1>Class Component</h1>
)
}
};
export default MyComponent;
State is an object that contains our data
State values can be accessed by accessing the state object:
this.state.name
State values can also be changed using the setState method, which is built into react.
this.setState({
name: 'Matt'
})
We can pair event handlers with a function that changes the state, like the following:
handleChange(event){
this.setState({
name: event.target.value
})
}
<input type="text" onChange={this.handleChange}/>
In React, data flows unidirectionally. This means the data will flow one way. In React, data flows from the top of the component tree down. The only way to change data from the bottom up is events.
When data is passed to another component, it is put on a 'props' object that the receiving component can access it from.
//passing props
<Component propName={propValue}/>
//accessing props
//class component
this.props.propName
//functional component
props.propName
By Matthew Bodily