1 of 15

ReactJS

think fast.

2 of 15

What you need to know

  • HTML
  • CSS
  • JS
  • Basic OOP

3 of 15

What is React

  • React is a flexible Javascript library for building User Interfaces
  • Used in many websites
    • Facebook (notably)
  • Also used in React-Native
    • Used in many apps

4 of 15

What We’ll Be Doing

  • Making a simple social media site

5 of 15

React - Getting Started

  • Go to http://tinyurl.com/codedayreact
  • You’ll notice that we have a variable header, with its value being in an HTML tag
  • This is possible through the use of JSX, which allows us to put markup directly in JS
  • In addition, React relies on the JS precompiler Babel, which gives us features from ES6

6 of 15

React - Components

  • In React, everything is built with components
  • Components are very similar to HTML tags, they look like this <Component/>
  • A React Component extends React.Component
  • Each Component MUST have the method ‘render’

7 of 15

React Lifecycle

8 of 15

Start Creating an App

class App extends React.Component {

render() {

return <h1>This is all I see</h1>

}

}

ReactDOM.render(<App />, document.getElementById(‘app’);

9 of 15

Breaking Down The Project

  • In our amazing social media site, there will be just be a bunch of posts. (You can add comments later).
  • There will also be a way to add your own post
  • We will create 2 classes: TextForm, and Post

10 of 15

Components - Props

  • <h1 id=”someid”>text</h1>
    • With regular html, you can set attributes like this
    • In react, these are called props, and you can set anything here
  • <Post text=”Here is the post content” />
    • We will use this in order to send data when initializing our views

11 of 15

Adding the Text Form

https://pastebin.com/eiN3zmrT

12 of 15

Handling The Posts

  • For now, we’ll just be storing the posts in an array

//somewhere on the top

var posts = [‘example post’, ‘this way it looks like there is stuff’]

//inside <TextForm>

handleSubmit() {

posts.push(this.state.value)

this.props.handler.forceUpdate()

}

// inside <App>

render() {

return(

<div className="container">

<h1>Welcome to the Best Social Media Site Ever</h1>

<div className=”row”>

<div className=”col”>

<h2>Write Posts Here</h2>

<TextForm />

</div>

<div className=”col”>

{posts.map(function(p){

return <Post handler={this} text={p} />

})}

</div>

</div>

)

​

}

13 of 15

Firebase Database

  • First, head over to firebase.com, then click get started
  • After you reach the console, make a new project
  • Authentication
    • For this demo, we will have NO authentication required (to make things easier)
    • In a proper app, you’ll want to enable proper authentication through the “Auth” menju
    • In order to disable authentication, go to Database -> Rules, and edit the rules so it looks like

14 of 15

Interact With the Database

firebase.database().ref().push() generates a new reference to a unique key that will allow you to then call .set() and pass through an object {}.

​

firebase.database().ref().on(listener, fn, callback);

Listen for when data is added to this reference

Listeners: child_added, child_removed, and value just to name a few

Fn is the function that allows you to handle the new data with a snapshot object

​

15 of 15

All Done!