ReactJS(1)Begin from the Starter

ReactJS(1)Begin from the Starter

Create the Project to show the diagram for Monitor Job Count
> git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git JobCountMonitor

Check ENV
>node --version && npm --version
v6.10.0
3.10.10

> yarn --version
0.20.3

> yarn install
This command will install he dependencies and tools in package.json

> yarn start
This command will build the src to build. It will start Node.js Server (no build/server.js) and Browsersync with HMR.

The outputs are as follow:
http://localhost:3000/      Node.js server (build/server.js)
http://localhost:3000/graphql   - GraphQL server and IDE
http://localhost:3001/      BrowserSync proxy with HMR, React Hot Transform
http://localhost:3002/      BrowserSync control panel (UI)

Start the Project in Release module
> yarn start --release

Build the Project
> yarn run build

Build release Version
> yarn run build -- --release

On my MAC, I did not install docker.
> yarn run build -- --release --docker

Check the Syntax
> yarn run lint

Unit tests with Mocha
> yarn run test

run the tests and watch for changes
> yarn run test:watch
  
Start with ReactJS
https://facebook.github.io/react/docs/installation.html

Introducing JSX - I guess it is JavaScript Extension
const element = <h1>hello</h1>;

Embedding JavaScript expressions in curly braces.

We can try the code online in https://codepen.io/login

A very simple example is as follow:
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Carl',
  lastName: 'Luo'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

You should either use quotes(for string values) or curly braces(for expressions), but not both in the same attribute.

JSX Represents Objects
const element = (
    <h1 className=“greeting”>
        Hello
    </h1>
);

the same as

const element = React.createElement(
    ‘h1’,
    {className: ‘greating’},
    ‘Hello'
);

React reads these objects and uses them to construct the DOM.

https://facebook.github.io/react/docs/rendering-elements.html

Upgrade the my nodeJS to latest version
All different versions
https://nodejs.org/en/download/current/

on Mac
>wget https://nodejs.org/dist/v8.0.0/node-v8.0.0.tar.gz
configure and make and make install
>node --version && npm --version
v8.0.0
5.0.0

on CentOS
>wget https://nodejs.org/dist/v8.0.0/node-v8.0.0.tar.gz
Prepare the ENV
>sudo yum install gcc gcc-c++
configure and make and make install
> node --version && npm --version
v8.0.0
5.0.0

on RaspberryPI - Directly Use Binary
I believe my RaspberryPI is arm7
>wget https://nodejs.org/dist/v8.0.0/node-v8.0.0-linux-armv7l.tar.xz
unzip the binary file
>tar xf node-v8.0.0-linux-armv7l.tar.xz
Move it to the working directory
>mv node-v8.0.0-linux-armv7l ~/tool/node-v8.0.0
>sudo ln -s /home/carl/tool/node-v8.0.0 /opt/node-v8.0.0
>sudo ln -s /opt/node-v8.0.0 /opt/node
Add bin to the PATH, check the installation
>node --version
v8.0.0
>npm --version
5.0.0

const element = <h1>Hello</h1>;
unlike browser DOM elements, react elements are plain objects, cheap to create.
React DOM takes care of updating the DOM to match the React elements.

<div id=“root”></div> That is a “root” DOM node. All the thing inside will be managed by React DOM.
to render a React element into a root DOM.
const element = <h1>Hello</h1>;
ReactDOM.render(
    element,
    document.getElementById(‘root');
);

React elements are immutable. Once it is created, we can not change it. An element is like a single frame in a movie.
Updating look and feel will be pass new element to the ReactDOM.render().

Components and Props
function Welcome(props){
    return <h1>Hello, {props.name}</h1>;
}

is as the same as
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

Define the element, function and ReactDOM
function Welcome1(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome1 name="Carl" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Steps for that, ReactDOM.render() render the element <Welcome1 name=“Carl” />, React call the Welcome1 component with {name:’Carl’} as the props. Welcome1 component returns a <h1>Hello, Carl</h1> element to ReactDOM.

Always start component names with a Capital Letter.
Composing Components
Components can call components.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Carl" />
      <Welcome name="Kiko" />
      <Welcome name="Leo" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Typically, new React apps should have single App component that the very top.


References:
https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md
https://github.com/kriasoft/react-starter-kit
https://facebook.github.io/react/docs/introducing-jsx.html