[ reactJS ]

History

2011 Created by facebook
2012 used on instagram
2013 open sources
2015 react native (for iOS and android) open sources
2016 React 15 released

reactJS v.s. angularJS

library : reactJS ( focus on component )

framework : angularJS / amber

 

angular two-way binding (angular — less coding) v.s. one-way binding (reactJS — more code)

state = { user: 'Cory' }

function handleChange(event) { 
this.setState({
user: event.target.value
}) // explicit change handler
}

input type="text" value={this.state.user} onChange={this.handleChange}

 

reactJS
* Light-weighted
* Single component of the page with react component

* Testing : Jest, Mocha
* HTTP library : Fetch, Axios
* Routing : React Router
* i18n : react-intl
* animation : react-motion
* Form validation : react-forms
* CLI : create-react-app

  • next.js (server render i.e. previously PHP) / phenomic
  • reactVR

react renderers
* react-dom ( for web )

ReactDomServer.renderToString()

* react-native
* react-vr

ref : http://github.com/chentsulin/awesome-react-renderer

 

Writing react with function

import React from 'react';

function HelloWorld(props) {
return</pre><div>Hello {props.name}</div><pre>
}

<strong>Writing react with class</strong>

import React from 'react';

class HelloWorld extends React.Component {
render() {
return</pre><div>Hello {props.name}</div><pre>
}
}

JSX

React.createElement('h1', {color: 'red'}, 'Heading here')

make HTML more powerful
AngularJS / vue / amber : better HTML

*ngif="isAdmin"

*ngfor="let user of users"

(click)="delete()"
* v-for="user in users"

 

React : better JS

autocomplete javascript

{isAdmin && <h1>Hi Admin</h1>}

loop

{users.map(createUser)}
// or
users.map(user =&gt;
<div>{user.name}</div>
)

event

onClick={delete}

 

create react app

npm install -g create-react-app
create-react-app test-app

cd test-app

npm start

 

setting breakpoint

debugger;

 

Another example : http://codesandbox.io

react-codemod : command line tool to automate change from older react component to new update version

 

Community : http://reactiflux.com

microsoft component look and feel like MS office : http://dev.office.com/fabric

http://material-ui.com : google material design guideline

http://react-bootstrap.github.io

http://github.com/enaqx/awesome-react

 

Component

  • reactRouter
  • redux / mobx : complex dataflow
  • Jest : automate test
  • GraphQL : RESTful API call
  • Next.js : server side with node

 

virtual dom : updating a DOM is expensive

 

Jest : automated react test by facebook
looking for file src/*.spec.js, src/*.test.js by default
snap test

Enzyme from airBnb --- interact with React component --- reusable react component

function HelloWorld(props){
return (
&nbsp; &lt;div&gt;
&nbsp; &nbsp; Hello {props.name}
&nbsp; &lt;/div&gt;
)
}

 

React 15.5+

React.propTypes.string

Codemod update

import propTypes form 'prop-types'
propTypes.string
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s