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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值