ReactJS for Beginners

ReactJS for Beginners
Oswald Campesato
Consultant/Training:
www.iquarkt.com
ocampesato@yahoo.com

Features of ReactJS
• Beta status
• component-based architecture
• loosely coupled components
• less code more application focus
• Supports ES6

What are Transpilers?
• They convert code from one language to another
• Babel (formerly 6to5):
+converts ES6 (some ES7) to ECMA5
+ appears to be the de facto standard
• Traceur (Google):
+ converts ES6 to ECMA5
+ used by Angular 2

Download/Install Code Samples
• 1) download/unzip Github repo (or clone repo)
• 2) npm install
• 3) double-click on the HTML Web page

React App (MyWebPage.html)
<!– 1) The core React library -->
<script src="https://fb.me/react-0.14.3.js"></script>
<!– 2) The ReactDOM Library -->
<script src="https://fb.me/react-dom-0.14.3.js"></script>
<!– 3) For transpiling ES6 code into ES5 code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js">
</script>

ReactJS “Hello World” (Version 1)
• <body>
• <div id="hello"></div>
•
• <script>
• ReactDOM.render(
• React.DOM.h1(null, "Hello World"),
• document.getElementById('hello'));
• </script>
• </body>
• NB: Babel.js is not required in this example

• <body>
•
• <script type="text/babel">
• React.DOM.h1(null, "Hello World"),
• </script>
• </body>

• <body>
• var Hello = React.createClass({ // deprecated in 0.14.3
• render: function () {
• return ( <h1>Hello World</h1> );
• }
• });
• ReactDOM.render(<Hello/>,
• </script>
• </body>

• <body>
• class Hello extends React.Component { // recommended
• constructor () {
• super();
• }
• render() {
• return <div>Hello World</div>
• }
• }
• ReactDOM.render(<Hello/>,
• </script>

Using “Props” in ReactJS
• var Hello = React.createClass({ // deprecated in 0.14.3
• var name = this.props.name;
•
• return ( <h2>Hello {name}</h2> );
• }
• });
• ReactDOM.render(<Hello name="Dave"/>,
• </script>

Property Types in ReactJS
• propTypes contains properties and their types:
• propTypes: {
• width: React.PropTypes.number,
• height: React.PropTypes.number
• //other1: React.PropTypes.string,
• //other2: React.PropTypes.array.isRequired,
• },
• See: ReactSVGRandom1.html

Property Types and Validation
• Throw an error if any property is negative:
• propTypes: {
• width: function(props, propName, componentName) {
• if(props[propName] < 0) {
• throw new Error(propName+" cannot be negative");
• }
• }
• },
• See: PropertyValidation.html

The “getDefaultProps()” Method
• <div id="container"></div>
• var Hello = React.createClass({
• getDefaultProps: function () {
• return { y : 456 }
• },
• return (
• <h2>x = {this.props.x} y = {this.props.y} </h2>
• );
• }
• });
ReactDOM.render(<Hello x={123}/>,
• document.getElementById('container'));
• </script>

Exercise: convert to ES6
• The previous example uses the deprecated syntax
• Convert the code to the “extend” style (used in 0.14.3)
• Hint: look at one of the previous “Hello World” examples

Handling Mouse Events
• class MouseOverButton extends React.Component {
• // constructor …
• render() {
• console.log("rendering button...");
• return (
• <button onClick={this.update}>ClickMe</button>
• );
• }
• update() {
• console.log("inside update");
• }
• }

Working with Lists (1a)
• <div id="noreactstuff">
• <p>Standard HTML User List:</p>
• <ul>
• <li>Sara</li>
• <li>Dave</li>
• <li>John</li>
• <li>Sally</li>
• </ul>
• </div>

Working with Lists (1b)
• class UserList extends React.Component {
• render() {
• return (
• <ul>
• <li>Sara</li>
• <li>Dave</li>
• <li>John</li>
• <li>Sally</li>
• </ul>
• )
• }
• }
• <UserList/>,
• document.getElementById('container')
• )

• render() {
• return (
• <ul>
• <ListOptions value="Sara" />
• <ListOptions value="Dave" />
• <ListOptions value="John" />
• <ListOptions value="Sally" />
• </ul>
• )
• }
• }

• class ListOptions extends React.Component {
• render() {
• return (
• <li>{this.props.value}</li>
• )
• }
• }
• <UserList/>,
• )

SVG in ReactJS (part 1)
• <div id="mysvg2"></div>
• class MySVG2 extends React.Component {
• constructor () {
• super();
• }
•

SVG in ReactJS (part 2)
• render() {
• return (
• <svg width="600" height="200">
• <g transform="translate(50, 20)">
• <rect width="160" height="80" fill="red"/>
• </g>
• </svg>
• );
• }
• }
• ReactDOM.render(<MySVG2 />,
• document.getElementById("mysvg2"));
• </script>

Images and Nested Components (1)
• <div id="people"></div>
•
• var people = [
• {
• name : "John Smith", img: "sample1.png",
• },
• {
• name : "Jane Jones", img: "sample2.png",
• },
• {
• name : "Dave Edwards", img: "sample3.png",
• }
• ];

• class Outer extends React.Component {
• render () {
• return (
• <div>
• <h2>A List of People:</h2> 
• <h3><Person name={this.props.data[0].name}
• img={this.props.data[0].img} /></h3>
• </div>
• );
• }
• }

• class Person extends React.Component {
• render() {
• return (
• <table>
• <tbody>
• <tr> <!– name and img belong to one ‘people row’ -->
• <td> {this.props.name} </td>
• <td><img src={this.props.img} width="100" height="100"/></td>
• </tr>
• </tbody>
• </table>
• );
• }
• }
• ReactDOM.render(<Outer data={people}/>,
• document.getElementById('people'));

Exercise: Add More Data
• Add a city field to the previous application

Conditional Execution (1)
• class Hello1 extends React.Component {
• render () {
• return (
• <h2>Hello World1</h2>
• );
• }
• }

• class Hello2 extends React.Component {
• render() {
• return (
• <h2>Hello World2</h2>
• );
• }
• }

• <div>
• { Math.random() > 0.5 ? <Hello1 /> : <Hello2 />}
• </div>,
• document.getElementById('hello')
• );
• </script>

The ‘map’ and ‘filter’ Functions
• The next “list” exercises involves the ‘map’ function
• var items = [1,2,3,4,5,6,7,8,9,10,11,
• 12,13,14,15,16,17,18,19,20];
• var even = [], double = [];
• even = items.filter(function(item) {
• return item % 2 == 0;
• });
• console.log("even = "+even);
• double = items.map(function(item) {
• return item * 2;
• });
• console.log("double = "+double);

• constructor() {
• super();
• this.userList = [ 'Sara', 'Dave', 'John', 'Sally’];
• }
•
• render() {
• return (
• <ul>
• <ListOptions options={this.userList} />
• </ul>
• )
• }
• }

• render() {
• return (
• <div>
• {this.props.options.map(function(option) {
• return (
• <li key={option}>{option}</li>
• )
• })}
• </div>
• )
• }
• }

Echoing User Input in ReactJS
• class Echo extends React.Component {
• constructor() {
• super();
• }
• render() {
• return (
• <input type="text" onChange={this.handleChange} />
• );
• }
• handleChange(e) {
• console.log(e.target.value);
• }
• }
•
• ReactDOM.render(<Echo />, document.getElementById("content"));

ReactJS: Lifecycle methods
• Before/during/after component ‘mounting’:
• componentWillMount: function() {
• this.doSomething1();
• },
• componentShouldMount: function() {
• },
• componentShouldUpdate: function() {
• },
• componentDidMount: function() {
• },
• componentWillUnmount: function() {
• },

Working with State (1a)
• class MyInput extends React.Component {
• constructor() {
• super();
• }
• componentWillMount() {
• this.state = {value: 'Hello There!'};
• }
• handleChange(event) {
• this.setState({value: event.target.value});
• console.log("value: "+this.state.value);
• }

Working with State (1b)
• render() {
• var value = this.state.value;
• return <input type="text" value={value}
• onChange={this.handleChange} />;
• }
• }
• <MyInput />,
• document.getElementById('myinput')
• );

Update List of Users (1)
• constructor() {
• super();
• this.userList = ['Sara', 'Dave', 'John', 'Sally’ ];
• this.addUser = this.addUser.bind(this);
• }
• componentDidMount() {
• this.setState({user: ""});
• }
• addUser() {
• var user = this.refs.user.value;
• //console.log("user = "+user);
• this.setState({user: user});
• this.userList.push(user);
• }

• render() {
• return (
• <div>
• <ul>
• <ListOptions options={this.userList} />
• </ul>
• <input ref="user" type="text" />
• <button onClick={this.addUser}>Add User</button>
• </div>
• )
• }
• }

• render() {
• return (
• <div>
• {this.props.options.map(function(option) { // options = userList
• return (
• <li key={option}>{option}</li>
• )
• })}
• </div>
• )
• }
• }
• <UserList/>,
• )

Exercises: List of Users via JSON Data
• 1a) Replace the array of names with this data:
• this.userList = [
• { name: 'Sara'},
• { name: 'Dave'},
• { name: 'John'},
• { name: 'Sally’} ];
• }
• 1b) update the code to reflect the modified data structure
• 2a) replace ‘name’ with ‘fname’
• 2b) also add an ‘lname’ property
• 3b) update the code to reflect the modified data structure

Working with JSON Data Files
• Read the contents of this text file and display the data:
• [
• {"fname":"Jane","lname":"Jones","city":"San Francisco"},
• {"fname":"John","lname":"Smith","city":"New York"},
• {"fname":"Dave","lname":"Stone","city":"Seattle"},
• {"fname":"Sara","lname":"Edson","city":"Chicago"}
• ]

Working with JSON Data Files (1a)
• class UserInfo extends React.Component {
• constructor() {
• super();
• }
• this.state = { loading: true, error: null, data: null};
• }
•
• this.props.promise.then(
• value => this.setState({loading: false, data: value}),
• error => this.setState({loading: false, error: error}));
• }

Working with JSON Data Files (1b)
• render() {
• if (this.state.loading) {
• return <span>Loading...</span>;
• }
• else if (this.state.error !== null) {
• return <span>Error: {this.state.error.message}</span>;
• }
• else {
• let empItems = this.state.data.map( emp => {
• return <li key={emp.fname}>{emp.fname}</li>
• })
• return (
• <div>
• <ul>{empItems}</ul>
• </div>
• )
• }}

Retrieving Github User Data (1)
• class UserInfo extends React.Component {
• constructor() {
• super();
• }
• this.state = { loading: true, error: null, data: null};
• }
•
• this.props.promise.then(
• value => this.setState({loading: false, data: value}),
• error => this.setState({loading: false, error: error}));
• }

• render() {
• if (this.state.loading) {
• return <span>Loading...</span>;
• }
• else if (this.state.error !== null) {
• return <span>Error: {this.state.error.message}</span>;
• }
• else {
• var userInfo = this.state.data;
• return (
• <div>
• <li>Username: {userInfo.login} </li>
• <li>Followers: {userInfo.followers} </li>
• <li>Following: {userInfo.following} </li>
• <li>Created at: {userInfo.created_at}</li>
• </div>
• )
• }}}

• <UserInfo
promise={$.getJSON('https://api.github.com/users/ocampesato')} />,
• document.getElementById("userinfo")
• );

What about ES6?
• Arrow functions and let keyword
• Block scopes
• Classes and inheritance
• Default parameters
• Destructured assignment
• Generators, Iterators, Maps, and Sets
• Promises and Rest parameters
• Spread operator
• Template Literals

ES6 let and Arrow Functions
• let square = x => x * x;
• let add = (x, y) => x + y;
• let pi = () => 3.1415;
• console.log(square(8)); // 64
• console.log(add(5, 9)); // 14
• console.log(pi()); // 3.1415

ES6 Class Definition (part 1)
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
calcArea() {
return this.height * this.width;
}
}
• var r1 = new Rectangle(5,10);
• var r2 = new Rectangle(25,15);

ES6 Class Definition (part 2)
• console.log("r1 area = "+r1.calcArea());
• console.log("r2 area = "+r2.calcArea());
• Test this code here:
http://babeljs.io/repl/
• More Examples:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Classes

Convert JSON Data to ES6 Class (1)
• Consider the following array of data:
var people = [
{fname:"Jane",lname:"Smith",zip:"94043"},
{fname:"John",lname:"Jones",zip:"94539"},
{fname:"Dave",lname:"Starr",zip:"67800"}
]

class People {
• public fname:string;
• public lname:string;
• public zip:string;
• constructor(public fname:string,
• public lname:string,
• public zip:string) {
• this.fname = fname;
• this.lname = lname;
• this.zip = zip;
• }
}

• Array of ES6 objects:
var ES6People = [
new People("Jane","Smith","94043"),
new People("John","Jones","94539"),
new People("Dave","Starr","67800")
];

Useful Tools/IDEs
• Select an IDE:
+WebStorm 10: free 30-day trial ($49/year)
+Visual Studio Code (free)
+ Atom (free) with atom-TypeScript extension
• Command Line Tools:
+ npm, npmjs, gulp, grunt (older), broccoli,
+ webpack, browserify (older), jspm+systemjs
https://github.com/addyosmani/es6-tools

Useful Technologies to Learn
• Main features of ES6
• Sass/Bootstrap 4 (previous: less)
• D3.js for Data Visualization
• React Native (=React for Mobile)
• https://egghead.io/react-redux-cheatsheets

Browser Status for ES6
• Modern IE: https://goo.gl/56n7IL
• Mozilla: https://goo.gl/iSNDf9
• Chrome: https://www.chromestatus.com/features#ES6

Other Useful ES6 Links
https://github.com/lukehoban/es6features
http://kangax.github.io/compat-table/es6/
https://dev.modern.ie/platform/status/?filter=f3f0000bf&search=es6
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_i
n_Mozilla
https://medium.com/@bojzi/overview-of-the-javascript-ecosystem-
8ec4a0b7a7be

Recent/Upcoming Books and Training
1) HTML5 Canvas and CSS3 Graphics (2013)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2015)
7) Python Pocket Primer (2015)
8) SVG Pocket Primer (2016)
9) CSS3 Pocket Primer (2016)
10) Angular Pocket Primer (2016)

ReactJS for Beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to ReactJS for Beginners

Similar to ReactJS for Beginners (20)

More from Oswald Campesato

More from Oswald Campesato (20)

Recently uploaded

Recently uploaded (20)

ReactJS for Beginners