React Basics
by Nick DeJesus
Takeaways from today
About me
Agenda
Me talking: 10-11
Break time from 11-11:15
More talking: 11:15-12
Lunch time 12-1
Setting up React projects: 1-2:30
Break time from 2:30-2:45
Exercises/Answering Questions: 2:45-4
React is a library that allows you to build websites with a component based approach
-me 2019
Wait, what did you mean by "component based approach?"
Components are building blocks of any React app.
They are either JavaScript functions or classes that can receive data and return React elements.
React elements are objects that describe how HTML should be rendered
HTML is rendered by something called JSX
JSX
JSX is a syntax extension to JavaScript
-What you see after Googling it
const Hello = <h1>Hello, world</h1>Let's see some code!
import React from 'react';
class Home extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
)
}
}import React from 'react';
class Home extends React.Component {
render() {
const Hello = <h1>Hello, World</h1>
return (
{Hello}
)
}
}Any valid JavaScript expression can go between curly braces { }
State is nothing more than an object. This object can describe what the component should be rendering and is subject to change.
https://codepen.io/gaearon/pen/KgQpJd
this.setState() is a method that you would use to update the state to tell your components what they should be doing.
Props is also an object. This object can describe what the component should be rendering but from what was passed to it.
import React from 'react';
class Person from React.Component {
render() {
return (
<p>
This is {this.props.name}
</p>
)
}
}<Person name={'Nick'} />Life Cycle methods are functions that run at different phases of a component
Phases
Methods