SlideShare a Scribd company logo
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
ReactJS “Hello World” (Version 2)
• <body>
• <div id="hello"></div>
•
• <script type="text/babel">
• ReactDOM.render(
• React.DOM.h1(null, "Hello World"),
• document.getElementById('hello'));
• </script>
• </body>
ReactJS “Hello World” (Version 3)
• <body>
• <div id="hello"></div>
• <script type="text/babel">
• var Hello = React.createClass({ // deprecated in 0.14.3
• render: function () {
• return ( <h1>Hello World</h1> );
• }
• });
• ReactDOM.render(<Hello/>,
• document.getElementById('hello'));
• </script>
• </body>
ReactJS “Hello World” (Version 4)
• <body>
• <div id="hello"></div>
• <script type="text/babel">
• class Hello extends React.Component { // recommended
• constructor () {
• super();
• }
• render() {
• return <div>Hello World</div>
• }
• }
• ReactDOM.render(<Hello/>,
• document.getElementById('hello'));
• </script>
Using “Props” in ReactJS
• <div id="hello"></div>
• <script type="text/babel">
• var Hello = React.createClass({ // deprecated in 0.14.3
• render: function () {
• var name = this.props.name;
•
• return ( <h2>Hello {name}</h2> );
• }
• });
• ReactDOM.render(<Hello name="Dave"/>,
• document.getElementById('hello'));
• </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>
• <script type="text/babel">
• var Hello = React.createClass({
• getDefaultProps: function () {
• return { y : 456 }
• },
• render: function () {
• 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>
• )
• }
• }
• ReactDOM.render(
• <UserList/>,
• document.getElementById('container')
• )
Working with Lists (2a)
• class UserList extends React.Component {
• render() {
• return (
• <ul>
• <ListOptions value="Sara" />
• <ListOptions value="Dave" />
• <ListOptions value="John" />
• <ListOptions value="Sally" />
• </ul>
• )
• }
• }
Working with Lists (2b)
• class ListOptions extends React.Component {
• render() {
• return (
• <li>{this.props.value}</li>
• )
• }
• }
• ReactDOM.render(
• <UserList/>,
• document.getElementById('container')
• )
SVG in ReactJS (part 1)
• <div id="mysvg2"></div>
• <script type="text/babel">
• 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>
•
• <script type="text/babel">
• var people = [
• {
• name : "John Smith", img: "sample1.png",
• },
• {
• name : "Jane Jones", img: "sample2.png",
• },
• {
• name : "Dave Edwards", img: "sample3.png",
• }
• ];
Images and Nested Components (2)
• class Outer extends React.Component {
• render () {
• return (
• <div>
• <h2>A List of People:</h2> <!-- data = people -->
• <h3><Person name={this.props.data[0].name}
• img={this.props.data[0].img} /></h3>
• <h3><Person name={this.props.data[1].name}
• img={this.props.data[1].img} /></h3>
• <h3><Person name={this.props.data[2].name}
• img={this.props.data[2].img} /></h3>
• </div>
• );
• }
• }
Images and Nested Components (3)
• 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)
• <div id="hello"></div>
• <script type="text/babel">
• class Hello1 extends React.Component {
• render () {
• return (
• <h2>Hello World1</h2>
• );
• }
• }
Conditional Execution (2)
• class Hello2 extends React.Component {
• render() {
• return (
• <h2>Hello World2</h2>
• );
• }
• }
Conditional Execution (3)
• ReactDOM.render(
• <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);
Working with Lists (3a)
• class UserList extends React.Component {
• constructor() {
• super();
• this.userList = [ 'Sara', 'Dave', 'John', 'Sally’];
• }
•
• render() {
• return (
• <ul>
• <ListOptions options={this.userList} />
• </ul>
• )
• }
• }
Working with Lists (3b)
• class ListOptions extends React.Component {
• 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() {
• this.doSomething2();
• },
• componentShouldUpdate: function() {
• this.doSomething2();
• },
• componentDidMount: function() {
• this.doSomething2();
• },
• componentWillUnmount: function() {
• this.doSomething2();
• },
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} />;
• }
• }
• ReactDOM.render(
• <MyInput />,
• document.getElementById('myinput')
• );
Update List of Users (1)
• class UserList extends React.Component {
• 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);
• }
Update List of Users (2)
• render() {
• return (
• <div>
• <ul>
• <ListOptions options={this.userList} />
• </ul>
• <input ref="user" type="text" />
• <button onClick={this.addUser}>Add User</button>
• </div>
• )
• }
• }
Update List of Users (3)
• class ListOptions extends React.Component {
• render() {
• return (
• <div>
• {this.props.options.map(function(option) { // options = userList
• return (
• <li key={option}>{option}</li>
• )
• })}
• </div>
• )
• }
• }
• ReactDOM.render(
• <UserList/>,
• document.getElementById('container')
• )
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();
• }
• componentWillMount() {
• this.state = { loading: true, error: null, data: null};
• }
•
• componentDidMount() {
• 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();
• }
• componentWillMount() {
• this.state = { loading: true, error: null, data: null};
• }
•
• componentDidMount() {
• this.props.promise.then(
• value => this.setState({loading: false, data: value}),
• error => this.setState({loading: false, error: error}));
• }
Retrieving Github User Data (2)
• 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>
• )
• }}}
Retrieving Github User Data (3)
• ReactDOM.render(
• <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"}
]
Convert JSON Data to ES6 Class (2)
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;
• }
}
Convert JSON Data to ES6 Class (3)
• 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)

More Related Content

What's hot

20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
Eric Deng
 
React / Redux Architectures
React / Redux ArchitecturesReact / Redux Architectures
React / Redux Architectures
Vinícius Ribeiro
 
React – Structure Container Component In Meteor
 React – Structure Container Component In Meteor React – Structure Container Component In Meteor
React – Structure Container Component In Meteor
Designveloper
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
All Things Open
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developer
Eugene Zharkov
 
React JS part 1
React JS part 1React JS part 1
React JS part 1
Diluka Wittahachchige
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf
 
React.js and Redux overview
React.js and Redux overviewReact.js and Redux overview
React.js and Redux overview
Alex Bachuk
 
React js
React jsReact js
React js
Jai Santhosh
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJS
Krishna Sunuwar
 
Intro to React
Intro to ReactIntro to React
Intro to React
Eric Westfall
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
Binary Studio
 
React for Dummies
React for DummiesReact for Dummies
React for Dummies
Mitch Chen
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Knoldus Inc.
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
Ritesh Mehrotra
 
React & Redux
React & ReduxReact & Redux
React & Redux
Craig Jolicoeur
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
 

What's hot (20)

20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
React / Redux Architectures
React / Redux ArchitecturesReact / Redux Architectures
React / Redux Architectures
 
React – Structure Container Component In Meteor
 React – Structure Container Component In Meteor React – Structure Container Component In Meteor
React – Structure Container Component In Meteor
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developer
 
React JS part 1
React JS part 1React JS part 1
React JS part 1
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
React.js and Redux overview
React.js and Redux overviewReact.js and Redux overview
React.js and Redux overview
 
React js
React jsReact js
React js
 
Getting started with ReactJS
Getting started with ReactJSGetting started with ReactJS
Getting started with ReactJS
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
 
React for Dummies
React for DummiesReact for Dummies
React for Dummies
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
React & Redux
React & ReduxReact & Redux
React & Redux
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 

Viewers also liked

ReactJS
ReactJSReactJS
ReactJS
baddi youssef
 
NY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance ToolNY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance Tool
NS1
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
Jarrod Overson
 
Bend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tipsBend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tips
Jenn Turner
 
do u webview?
do u webview?do u webview?
do u webview?
Steve Souders
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
Steve Souders
 
Functional Reactive Programming in Javascript
Functional Reactive Programming in JavascriptFunctional Reactive Programming in Javascript
Functional Reactive Programming in Javascript
Brian Lonsdorf
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
Guy Podjarny
 
Intel XDK - Philly JS
Intel XDK - Philly JSIntel XDK - Philly JS
Intel XDK - Philly JS
Ian Maffett
 
React For Vikings
React For VikingsReact For Vikings
React For Vikings
FITC
 
ReactJs
ReactJsReactJs
ReactJs
LearningTech
 

Viewers also liked (11)

ReactJS
ReactJSReactJS
ReactJS
 
NY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance ToolNY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance Tool
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
 
Bend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tipsBend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tips
 
do u webview?
do u webview?do u webview?
do u webview?
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 
Functional Reactive Programming in Javascript
Functional Reactive Programming in JavascriptFunctional Reactive Programming in Javascript
Functional Reactive Programming in Javascript
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
 
Intel XDK - Philly JS
Intel XDK - Philly JSIntel XDK - Philly JS
Intel XDK - Philly JS
 
React For Vikings
React For VikingsReact For Vikings
React For Vikings
 
ReactJs
ReactJsReactJs
ReactJs
 

Similar to ReactJS for Beginners

Universal JavaScript
Universal JavaScriptUniversal JavaScript
Universal JavaScript
名辰 洪
 
React inter3
React inter3React inter3
React inter3
Oswald Campesato
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
toddbr
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
Oswald Campesato
 
Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)
Anis Bouhachem Djer
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
Troy Miles
 
Tools that get you laid
Tools that get you laidTools that get you laid
Tools that get you laid
Swizec Teller
 
JS Essence
JS EssenceJS Essence
JS Essence
Uladzimir Piatryka
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
FITC
 
ReactでGraphQLを使っている
ReactでGraphQLを使っているReactでGraphQLを使っている
ReactでGraphQLを使っている
Takahiro Kobaru
 
J query module1
J query module1J query module1
J query module1
Srivatsan Krishnamachari
 
Intro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiIntro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran Mizrahi
Ran Mizrahi
 
The Future of Plugin Dev
The Future of Plugin DevThe Future of Plugin Dev
The Future of Plugin Dev
Brandon Kelly
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
Nick Lee
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
Lê Thưởng
 
Play!ng with scala
Play!ng with scalaPlay!ng with scala
Play!ng with scala
Siarzh Miadzvedzeu
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript Framework
All Things Open
 
DjangoCon 2010 Scaling Disqus
DjangoCon 2010 Scaling DisqusDjangoCon 2010 Scaling Disqus
DjangoCon 2010 Scaling Disqus
zeeg
 
Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}
.toster
 

Similar to ReactJS for Beginners (20)

Universal JavaScript
Universal JavaScriptUniversal JavaScript
Universal JavaScript
 
React inter3
React inter3React inter3
React inter3
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)Angularjs Test Driven Development (TDD)
Angularjs Test Driven Development (TDD)
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
Tools that get you laid
Tools that get you laidTools that get you laid
Tools that get you laid
 
JS Essence
JS EssenceJS Essence
JS Essence
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
 
ReactでGraphQLを使っている
ReactでGraphQLを使っているReactでGraphQLを使っている
ReactでGraphQLを使っている
 
J query module1
J query module1J query module1
J query module1
 
Intro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiIntro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran Mizrahi
 
The Future of Plugin Dev
The Future of Plugin DevThe Future of Plugin Dev
The Future of Plugin Dev
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdfLecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
 
Play!ng with scala
Play!ng with scalaPlay!ng with scala
Play!ng with scala
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript Framework
 
DjangoCon 2010 Scaling Disqus
DjangoCon 2010 Scaling DisqusDjangoCon 2010 Scaling Disqus
DjangoCon 2010 Scaling Disqus
 
Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Recently uploaded

Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
Michał Kurzeja
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
gapen1
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
dhavalvaghelanectarb
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio, Inc.
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
kalichargn70th171
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
kalichargn70th171
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
kgyxske
 
Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)
alowpalsadig
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
Jhone kinadey
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
OnePlan Solutions
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
wonyong hwang
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Ortus Solutions, Corp
 
Hands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion StepsHands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion Steps
servicesNitor
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
The Third Creative Media
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Peter Caitens
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
How GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdfHow GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdf
Zycus
 

Recently uploaded (20)

Refactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contextsRefactoring legacy systems using events commands and bubble contexts
Refactoring legacy systems using events commands and bubble contexts
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
 
Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)
 
Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
 
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical OperationsEnsuring Efficiency and Speed with Practical Solutions for Clinical Operations
Ensuring Efficiency and Speed with Practical Solutions for Clinical Operations
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
 
Hands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion StepsHands-on with Apache Druid: Installation & Data Ingestion Steps
Hands-on with Apache Druid: Installation & Data Ingestion Steps
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
How GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdfHow GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdf
 

ReactJS for Beginners

  • 1. ReactJS for Beginners Oswald Campesato Consultant/Training: www.iquarkt.com ocampesato@yahoo.com
  • 2. Features of ReactJS • Beta status • component-based architecture • loosely coupled components • less code more application focus • Supports ES6
  • 3. 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
  • 4. Download/Install Code Samples • 1) download/unzip Github repo (or clone repo) • 2) npm install • 3) double-click on the HTML Web page
  • 5. 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>
  • 6. 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
  • 7. ReactJS “Hello World” (Version 2) • <body> • <div id="hello"></div> • • <script type="text/babel"> • ReactDOM.render( • React.DOM.h1(null, "Hello World"), • document.getElementById('hello')); • </script> • </body>
  • 8. ReactJS “Hello World” (Version 3) • <body> • <div id="hello"></div> • <script type="text/babel"> • var Hello = React.createClass({ // deprecated in 0.14.3 • render: function () { • return ( <h1>Hello World</h1> ); • } • }); • ReactDOM.render(<Hello/>, • document.getElementById('hello')); • </script> • </body>
  • 9. ReactJS “Hello World” (Version 4) • <body> • <div id="hello"></div> • <script type="text/babel"> • class Hello extends React.Component { // recommended • constructor () { • super(); • } • render() { • return <div>Hello World</div> • } • } • ReactDOM.render(<Hello/>, • document.getElementById('hello')); • </script>
  • 10. Using “Props” in ReactJS • <div id="hello"></div> • <script type="text/babel"> • var Hello = React.createClass({ // deprecated in 0.14.3 • render: function () { • var name = this.props.name; • • return ( <h2>Hello {name}</h2> ); • } • }); • ReactDOM.render(<Hello name="Dave"/>, • document.getElementById('hello')); • </script>
  • 11. 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
  • 12. 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
  • 13. The “getDefaultProps()” Method • <div id="container"></div> • <script type="text/babel"> • var Hello = React.createClass({ • getDefaultProps: function () { • return { y : 456 } • }, • render: function () { • return ( • <h2>x = {this.props.x} y = {this.props.y} </h2> • ); • } • }); ReactDOM.render(<Hello x={123}/>, • document.getElementById('container')); • </script>
  • 14. 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
  • 15. 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"); • } • }
  • 16. 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>
  • 17. 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> • ) • } • } • ReactDOM.render( • <UserList/>, • document.getElementById('container') • )
  • 18. Working with Lists (2a) • class UserList extends React.Component { • render() { • return ( • <ul> • <ListOptions value="Sara" /> • <ListOptions value="Dave" /> • <ListOptions value="John" /> • <ListOptions value="Sally" /> • </ul> • ) • } • }
  • 19. Working with Lists (2b) • class ListOptions extends React.Component { • render() { • return ( • <li>{this.props.value}</li> • ) • } • } • ReactDOM.render( • <UserList/>, • document.getElementById('container') • )
  • 20. SVG in ReactJS (part 1) • <div id="mysvg2"></div> • <script type="text/babel"> • class MySVG2 extends React.Component { • constructor () { • super(); • } •
  • 21. 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>
  • 22. Images and Nested Components (1) • <div id="people"></div> • • <script type="text/babel"> • var people = [ • { • name : "John Smith", img: "sample1.png", • }, • { • name : "Jane Jones", img: "sample2.png", • }, • { • name : "Dave Edwards", img: "sample3.png", • } • ];
  • 23. Images and Nested Components (2) • class Outer extends React.Component { • render () { • return ( • <div> • <h2>A List of People:</h2> <!-- data = people --> • <h3><Person name={this.props.data[0].name} • img={this.props.data[0].img} /></h3> • <h3><Person name={this.props.data[1].name} • img={this.props.data[1].img} /></h3> • <h3><Person name={this.props.data[2].name} • img={this.props.data[2].img} /></h3> • </div> • ); • } • }
  • 24. Images and Nested Components (3) • 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'));
  • 25. Exercise: Add More Data • Add a city field to the previous application
  • 26. Conditional Execution (1) • <div id="hello"></div> • <script type="text/babel"> • class Hello1 extends React.Component { • render () { • return ( • <h2>Hello World1</h2> • ); • } • }
  • 27. Conditional Execution (2) • class Hello2 extends React.Component { • render() { • return ( • <h2>Hello World2</h2> • ); • } • }
  • 28. Conditional Execution (3) • ReactDOM.render( • <div> • { Math.random() > 0.5 ? <Hello1 /> : <Hello2 />} • </div>, • document.getElementById('hello') • ); • </script>
  • 29. 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);
  • 30. Working with Lists (3a) • class UserList extends React.Component { • constructor() { • super(); • this.userList = [ 'Sara', 'Dave', 'John', 'Sally’]; • } • • render() { • return ( • <ul> • <ListOptions options={this.userList} /> • </ul> • ) • } • }
  • 31. Working with Lists (3b) • class ListOptions extends React.Component { • render() { • return ( • <div> • {this.props.options.map(function(option) { • return ( • <li key={option}>{option}</li> • ) • })} • </div> • ) • } • }
  • 32. 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"));
  • 33. ReactJS: Lifecycle methods • Before/during/after component ‘mounting’: • componentWillMount: function() { • this.doSomething1(); • }, • componentShouldMount: function() { • this.doSomething2(); • }, • componentShouldUpdate: function() { • this.doSomething2(); • }, • componentDidMount: function() { • this.doSomething2(); • }, • componentWillUnmount: function() { • this.doSomething2(); • },
  • 34. 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); • }
  • 35. Working with State (1b) • render() { • var value = this.state.value; • return <input type="text" value={value} • onChange={this.handleChange} />; • } • } • ReactDOM.render( • <MyInput />, • document.getElementById('myinput') • );
  • 36. Update List of Users (1) • class UserList extends React.Component { • 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); • }
  • 37. Update List of Users (2) • render() { • return ( • <div> • <ul> • <ListOptions options={this.userList} /> • </ul> • <input ref="user" type="text" /> • <button onClick={this.addUser}>Add User</button> • </div> • ) • } • }
  • 38. Update List of Users (3) • class ListOptions extends React.Component { • render() { • return ( • <div> • {this.props.options.map(function(option) { // options = userList • return ( • <li key={option}>{option}</li> • ) • })} • </div> • ) • } • } • ReactDOM.render( • <UserList/>, • document.getElementById('container') • )
  • 39. 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
  • 40. 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"} • ]
  • 41. Working with JSON Data Files (1a) • class UserInfo extends React.Component { • constructor() { • super(); • } • componentWillMount() { • this.state = { loading: true, error: null, data: null}; • } • • componentDidMount() { • this.props.promise.then( • value => this.setState({loading: false, data: value}), • error => this.setState({loading: false, error: error})); • }
  • 42. 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> • ) • }}
  • 43. Retrieving Github User Data (1) • class UserInfo extends React.Component { • constructor() { • super(); • } • componentWillMount() { • this.state = { loading: true, error: null, data: null}; • } • • componentDidMount() { • this.props.promise.then( • value => this.setState({loading: false, data: value}), • error => this.setState({loading: false, error: error})); • }
  • 44. Retrieving Github User Data (2) • 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> • ) • }}}
  • 45. Retrieving Github User Data (3) • ReactDOM.render( • <UserInfo promise={$.getJSON('https://api.github.com/users/ocampesato')} />, • document.getElementById("userinfo") • );
  • 46. 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
  • 47. 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
  • 48. 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);
  • 49. 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
  • 50. 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"} ]
  • 51. Convert JSON Data to ES6 Class (2) 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; • } }
  • 52. Convert JSON Data to ES6 Class (3) • Array of ES6 objects: var ES6People = [ new People("Jane","Smith","94043"), new People("John","Jones","94539"), new People("Dave","Starr","67800") ];
  • 53. 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
  • 54. 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
  • 55. Browser Status for ES6 • Modern IE: https://goo.gl/56n7IL • Mozilla: https://goo.gl/iSNDf9 • Chrome: https://www.chromestatus.com/features#ES6
  • 56. 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
  • 57. 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)