reactjs introduction

React is the front-end framework used in lg-sim WebUI(version 2019.07). as well for Cruise webviz, Uber visualization, Apollo, they all choose a web UI design, there is something great about web framework.

what is React

used to build complex UI from small and isolated pieces of code “components”


class vehicleManager extends React.Component {
	render()
	{
		return <html></html>
	} 
}

React will render the html on screen, and any changes in data will update and rerender. render() returns a description(React element) of what you want to see on the screen, React takes the descriptions and displays the result.

build a react hello-world app

npx create-react-app react-demo
cd react-demo
npm start

index.js

index.js is the traditional and actual entry point for all Node apps. in React, it tells what to render and where to render.

components

components works as a func, and props is the func’s paramters, the func will return a React element which then rendered in view

components can be either class, derived from React.Component, which then has this.state and this.setState() ;

or a function, which need use Hook to keep its state.

the design advantage of components is obvious: to make components/modules reuseable. usually in route.js will define the logic switch to each component based on the HTTP request.

setState

whenever this.setState() takes an object or a function as its parameter, update it, and React rerender this component. when need to change a component state, setState() is the right way, rather than to use this.state = xx, which won’t register in React.

Hook

example from stateHoook


import { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hook is a speicial feature, used to share sth with React function. e.g. useState is a way to keep React state in function, which by default has no this.state

in Hook way, even afer function() is executed, the function’s variable is not clear, but keep until next render. so basically Hook give a way to make function stateable.

intial hook

the only parameter pass in hook::useState(new Map()) is the initial state. useState(initState)

return from useState

it returns a pair [currentState, setStatefunc], e.g. [maps, setMaps], setStatefunc here is similar as this.setState in class component

access state

directly {currentState}

update state

{() => setStatefunc(currentState)}

Context

context gives the way to access data, not in the strict hierachy way. the top is the context Provider, and the is the context consumer, there can be multi consumers.

createContext

as in react context official doc

1	const Context = React.createContext(defaultValue);

during render, the component which subscribe this context will get the context content from its context provider and put in rendering, only when no avialable provider is found, defaultValue is used.

1	<Context.Provider value={/xx/} >

whenever the value in Provider changes, all consumers will rerender.

EventSource

EventSource is HTTP based one-way communication from server to client, which is lighter than Websocket eventsource vs websocket, also the message type is only txt in EventSource, while in Websocekt it can be either txt or binary stream.

by default, when client received a [“/event”] message, will trigger onMessage(). but EveentSource allow to define user-speicial event type, e.g. VehicleDownload, so in client need to a new listener:

1	myEventSource.addEventListener('VehicleDownload', (e)=>handleVehicleEvents(e))

react route

js special

first class object

a function is an instance of the Object type
a function can have properties and has a link back to its constructor method
can store a function in a variable
pass a function as a parameter to another function
return a function from another function