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
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