Matthew Bodily
Lecture Slides for DevMountain's Web Development Course
React One
Introduction to React
React Content
React content is notoriously difficult.
Many consider this content the most difficult of the program.
- You can expect to struggle
- You can expect to feel overwhelmed
- You can expect to feel behind
Keep hustling, stay positive, and don't give up!
Work hard and good results will follow.
What is React?
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
Why Use React?
React's purpose is to make front-end JavaScript development easier.
To accomplish this, React offers:
JSX
Virtual DOM handling
Component Based Architecture
Unidirectional Data Flow
Component Based Architecture
In React, code is split into chunks called components.
Component-based architecture makes code highly reusable and easy to debug.
The Virtual DOM
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, which increases performance.
create-react-app
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
Components
In React, components are the building blocks of our apps.
There are two types of components:
-
Class Components
-
Functional Components
Class Components can also be called stateful components.
Functional components can also be called stateless components.
Note that with the introduction of React Hooks in React v. 16.8.0, functional components can now handle stateful logic
Class 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 ClassComponent extends Component { // render method render() { return <h1>Hello, I'm a class component</h1>; } } export default ClassComponent;
Import React
Build class for component
Render Display
Export Component
Functional Components
Functional Components are built from JavaScript functions, and are commonly used to compartmentalize functionality.
Functional components are also often used for static display:
import React from "react"; const FuncComponent = () => { return( <h1>Hello, I'm a functional component</h1>; ) } export default FuncComponent;
Import React
Build function
Display
Export Component
JSX
You may be looking at the display part of components and be thinking, "That's HTML!".
It's actually known as JSX, which is a syntax extension for JavaScript that is structured similarly to HTML.
JSX
When working with JSX, you have access to all the same elements that you would with HTML.
An important difference between HTML and JSX is that events in JSX will be camelCased and the class attribute is called className, due to class being a reserved keyword in JavaScript.
<div> <h1 className="heading">This is JSX</h1> <p onClick={this.handleClick}>It looks very similar to HTML.</p> </div>
<div> <h1 class="heading">This is HTML</h1> <p onclick={this.handleClick}>It looks very similar to JSX.</p> </div>
Regular HTML
Regular HTML
JSX
Working with State
As mentioned earlier, Class Components are able to store state. State is a main object used to store data in a component.
import React, {Component} from 'react'; class MyComponent extends Component { constructor(){ super(); this.state = { name: 'Matias' } } render(){ return ( <h1>Class Component</h1> ) } }; export default MyComponent;
State is an object that contains our data
Working with State
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: 'Great Scott' })
import React, {Component} from 'react'; class MyComponent extends Component { constructor(){ super(); this.state = { name: 'Matias' } } render(){ return ( <h1>Class Component</h1> ) } }; export default MyComponent;
this.state.name
'Great Scott'
Working with State
We can pair event handlers with a function that changes the state, like in the following example:
handleChange(e){ this.setState({ name: e.target.value }) } <input type="text" onChange={(e) => this.handleChange(e)}/>
In the example above, typing into the input field would change the name property on a state object to have a value of whatever is typed into the input field.
Unidirectional Data Flow
React is designed for data to flow unidirectionally. This means the data is intended to flow in one direction. More specifically, data should flow from the top of the component tree downward. The only way you should change data from the bottom up is by passing down a function that originates from the top.
Unidirectional Data Flow & Props
React component have access to two main objects for handling data:
- state
-
props
The props object is designed to hold data that is passed down from a parent component.
//passing props from parent component <Component propName={propValue}/> //accessing props on class component this.props.propName //accessing props on a functional component props.propName
React One Introduction to React
React 1
By Matthew Bodily
React 1
Introduction to React
- 296
