lmari’s blog

Data analytics, machine learning & front end development

React.js, Angular and Vue

JavaScript

React.js

  • Lightweight, popular front-end framework, interactive user interface
  • Virtual DOM, update blog post (instead of reload whole page)
  • JSX is similar to HTML
  • Reusable functionable components, familarize with ES6

Install node.js
Install React Developer Tool in chrome browser 

Setup React.js

Open new folder React, RUN

npm install create-react-app -g
create-react-app my-app
cd my-app
npm start

Organizational Structure (DOM Tree)

|--- index.html
|--- index.js
+-- components ---- myinfo.js, footer.js, navbar.js.....

f:id:lmari:20190524120938j:plain

index.html

<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>

index.js 

  • Boilerplate code
  • ./ means local directory, can emit ; except in for loop, like for(let i =0;) 
  • 1st parameter what you want to render, 2nd is where to put that

import React from "react"
import ReactDOM from "react-dom"

import MyInfo from "./components/MyInfo"

ReactDOM.render<MyInfo />, document.getElementById("root"))

MyInfo.js

  • Can move entire function component to new MyInfo.js. By default, it's a .js file
  • Element is regular HTML. Component created like <MyInfo /> has capital
  • Can nest deeply with <Header />, <NavBar />, <Footer />... Need to wrap element in <div>
  • className access DOM property, not class. Can only apply attribute to react element, but not component created like Header or Maincontent
  • In JSX, any text inside {} is Javascript, {`${firstName} ${lastName}`}
  • const App = () => { return (
    <h1>Hello World</h1>
    )}
    can be simplified as:
    const App = () => <h1>Hello World</h1>

import React from "react"

function MyInfo()  {
return (
<div>
<h1>Hello World!</h1>
<p>This is a paragraph about me.</p>
<input type="checkbox" /><p>Place text here</p>
</div>
     )
}

export default MyInfo

 Setting javascript to tell what time of day in index.js

  • Inside Javascript cannot have tag inside name, e.g. background-color. Need to make it camel case
  • <h1 style={{color: "FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}</h1>

f:id:lmari:20190523214210j:plain

ContactCard.js

f:id:lmari:20190526153629j:plain

  • Using Props: Properties in HTML modify how components act
  • props: function parameter receive an object with property with imgUrl, each being name of property passed in, ie. props.name, props.imgUrl.... Replace hardcoded values with { }
  • Use console.log(props) to see what is receiving

import React from "react"

function ContactCard(props) {
console.log(props)
return (
<div className="contact-card">
<img src= {props.imgUrl} />
h3>{props.name}</h3>
<p>Phone: {props.phone}</p>
<p>Email: {props.email}</p>
</div>
)
}

export default ContactCard

 

App.js

  • Passing separate props: name, imgUrl, phone, email

import React from "react"
import ContactCard from "./ContactCard"

function App() {

return (
<div className="contacts">
<ContactCard
name= "Mr. Whiskerson"
imgUrl=""http://kitten.com/8795"
phone= "(222) 555-123"
email="whiskaz@catnap.meow"
/>

<ContactCard
name= "Fluffy King"
imgUrl=""http://kitten.com/8908"
phone= "(212) 455-123"
email="fluff@catnap.meow"
/>
</div>
)}

Props can be simplified to single property:

  • Later stored as json file
  • contact: with properties name, imgUrl, phone, email

<ContactCard
contact= {{ name: "Mr. Whiskerson",
imgUrl: "http:////kitten.com/8795", phone= "(222) 555-123", email="whiskaz@catnap.meow"}}
/>

Update ContactCard.js to:

{img src="{props.contact.imgUrl} />
{img src="{props.contact.name} />

 Conditional rendering

  • Only answer, but no question in some
  • Ternary operator. Inside object props.question, a thing is it truthy? If not block, otherwise display none

<h3 style={display: props.question ? "block" : "none" }}> Question: {props.question}</h3>

or

If there isn't a... !, then we want to display... &&, otherwise ignore this rule completely

<h3 style={display: !props.question && "none" }}> Question: {props.question}</h3>

 

Higher Order Methods

  • map, filter, reduce. Map returns new array. Render other components
  • Arrow function component => has return implied

const nums = [1,2,3,4,5]
const doubled = nums.map(function(num){
return num * 2
)}

jokesData.map(joke => <Joke key={sthunique.id} question={joke.question} punchLine={joke.punchLine} /> ) 
return (
<div>
{jokeComponents}
</div>
)}

 

To Do List: Turning array to elements

Step 1: Go to App.js

import TodoItem from "./TodoItem"
import todoData from "./todosData"

function App() {
create const todoItems = todoData.map(item => <todoitem key={item.id} item={item} />)
return(
<div className="todo-list">
{todoItems}
</div>

)}
export default App

Step 2: Go to TodoItem.js

  • But cannot uncheck yet!
  • todoData.js has
    const todoData = [{ id: 1, text: "Grocery shopping", completed: true}]

function todoItem(props) {
return(
<div className="todo-item">
<input type="checkbox" checked={props.item.completed} />
<p>{props.item.text}</p>
</div> )}
export default todoItem

Class based Components

  • State and lifecycle method
  • Display things after render, but before return, like styles

class App() extends React.Component {
render() {
 // styling goes here
return (
<div>JSX</div>
)
}}

2:03:48