Build web apps with ReactJS
Hello! I am Dhanushka Software Engineer at Cambio Software Engineering UCSC Facebook Developer Circle - Colombo 2
Introduction https://reactjs.org/ 3
History Jordan Walke, a software engineer at Facebook It was open-sourced at JSConf US in May 2013 On Facebook's newsfeed in 2011 On Instagram since 2012 4
React Basics A JavaScript library for building user interfaces 16.5.2 is the latest version 5
React Basics 6 JSX − JSX is JavaScript syntax extension. Components − React is all about components. Unidirectional data flow − React implements one-way data flow which makes it easy to reason about your app.
React Basics 7 Covers only the view layer of the app Complex React applications usually require the use of additional libraries. ➔State management ➔Routing ➔Interaction with an API
Why React? 8 Uses virtual DOM which is a JavaScript object. Can be used on client and server side as well as with other frameworks. Component and data patterns improve readability, which helps to maintain larger apps.
Let’s get into React 9
Things needs to be installed 10 yarn or npm a text editor a web browser
Setting up the env 11 yarn init Give main as src/index.js yarn add react yarn add react-dom yarn add react-scriptsx https://github.com/facebook/create-react-app
Setting up the environment 12 Folder Structure public --index.html src --index.js package.json
Setting up the environment 13 index.html <html lang="en"> <head> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
Create our first React component 14 import React from 'react' import ReactDOM from 'react-dom'
Create our first React component 15 import React from 'react' import ReactDOM from 'react-dom' class HelloWorld extends React.Component { render() { return ( <div> <div>Hello World!</div> <div>Hello World!</div> </div> ) } }
Create our first React component 16 import React from 'react' import ReactDOM from 'react-dom' class HelloWorld extends React.Component { render() { return ( <div>Hello World!</div> ) } } ReactDOM.render(<HelloWorld />, document.getElementById('root'));
Create our first React component 17 Next, Update package.json "scripts": { "start": "react-scripts start" }
Create our first React component 18 yarn start or npm start localhost:3000
Create our first React component 19 class HelloWorld extends React.Component { render() { return ( <div>Hello World!</div> ) } } class HelloWorld extends React.Component { render() { return React.createElement("div", null, "Hello World"); }
Adding State to your Component 20 class WelcomeComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'John' } } render() { return ( <div> Welcome {this.state.name} </div> ) } }
Adding State to your Component this.state inside of the constructor will be part of that component’s state component has the ability to modify its own internal state. This can be achieved by a method called setState 21
Adding State to your Component 22 this.handleChange = this.handleChange.bind(this) handleChange (e) { this.setState({ name: e.target.value }) }
Adding State to your Component 23 // Wrong this.state.name = 'Hello'; Instead, use setState(): // Correct this.setState({name: 'Hello'});
setState process Last Only update real DOM with necessary changes First Re-render virtual DOM Second Run Diff algorithm with previous virtual DOM and new virtual DOM 24 setState sends signal to notify our app some data has changed,
Receiving State from Parent Component 25 class Car extends React.Component { render() { return ( <div>This car is {this.props.color}.</div> ) } } ReactDOM.render(<Car color="Red"/>, document.getElementById('root'));
Receiving State from Parent Component 26 yarn add prop-types or npm install prop-types
Receiving State from Parent Component 27 Car.propTypes: { color: PropTypes.string.isRequired } Car.defaultProps = { color: 'Red' }
Component LifeCycle 28 componentDidMount Fired after the component mounted (after the initial render) componentWillUnmount Fired before the component will unmount getDerivedStateFromProps Fired when the component mounts and whenever the props change. Used to update the state of a component when its props change
Let’s think in react!! 29 Simple ToDo App
Let’s build our ToDo App 30 npm npm init react-app my-todo-app Yarn yarn create-react-app my-todo-app create-react-app my-todo-app npm i -g create-react-app
Let’s think in react!! 31 InputComponent ShowListComponent ItemComponent Simple ToDo App
Thank you! Any questions? You can find me at: Facebook @dhanushkach dhanushka787@gmail.com 32

Build web apps with react js

  • 1.
  • 2.
    Hello! I am Dhanushka SoftwareEngineer at Cambio Software Engineering UCSC Facebook Developer Circle - Colombo 2
  • 3.
  • 4.
    History Jordan Walke, asoftware engineer at Facebook It was open-sourced at JSConf US in May 2013 On Facebook's newsfeed in 2011 On Instagram since 2012 4
  • 5.
    React Basics A JavaScriptlibrary for building user interfaces 16.5.2 is the latest version 5
  • 6.
    React Basics 6 JSX −JSX is JavaScript syntax extension. Components − React is all about components. Unidirectional data flow − React implements one-way data flow which makes it easy to reason about your app.
  • 7.
    React Basics 7 Covers onlythe view layer of the app Complex React applications usually require the use of additional libraries. ➔State management ➔Routing ➔Interaction with an API
  • 8.
    Why React? 8 Uses virtualDOM which is a JavaScript object. Can be used on client and server side as well as with other frameworks. Component and data patterns improve readability, which helps to maintain larger apps.
  • 9.
  • 10.
    Things needs tobe installed 10 yarn or npm a text editor a web browser
  • 11.
    Setting up theenv 11 yarn init Give main as src/index.js yarn add react yarn add react-dom yarn add react-scriptsx https://github.com/facebook/create-react-app
  • 12.
    Setting up theenvironment 12 Folder Structure public --index.html src --index.js package.json
  • 13.
    Setting up theenvironment 13 index.html <html lang="en"> <head> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
  • 14.
    Create our firstReact component 14 import React from 'react' import ReactDOM from 'react-dom'
  • 15.
    Create our firstReact component 15 import React from 'react' import ReactDOM from 'react-dom' class HelloWorld extends React.Component { render() { return ( <div> <div>Hello World!</div> <div>Hello World!</div> </div> ) } }
  • 16.
    Create our firstReact component 16 import React from 'react' import ReactDOM from 'react-dom' class HelloWorld extends React.Component { render() { return ( <div>Hello World!</div> ) } } ReactDOM.render(<HelloWorld />, document.getElementById('root'));
  • 17.
    Create our firstReact component 17 Next, Update package.json "scripts": { "start": "react-scripts start" }
  • 18.
    Create our firstReact component 18 yarn start or npm start localhost:3000
  • 19.
    Create our firstReact component 19 class HelloWorld extends React.Component { render() { return ( <div>Hello World!</div> ) } } class HelloWorld extends React.Component { render() { return React.createElement("div", null, "Hello World"); }
  • 20.
    Adding State toyour Component 20 class WelcomeComponent extends React.Component { constructor(props) { super(props); this.state = { name: 'John' } } render() { return ( <div> Welcome {this.state.name} </div> ) } }
  • 21.
    Adding State toyour Component this.state inside of the constructor will be part of that component’s state component has the ability to modify its own internal state. This can be achieved by a method called setState 21
  • 22.
    Adding State toyour Component 22 this.handleChange = this.handleChange.bind(this) handleChange (e) { this.setState({ name: e.target.value }) }
  • 23.
    Adding State toyour Component 23 // Wrong this.state.name = 'Hello'; Instead, use setState(): // Correct this.setState({name: 'Hello'});
  • 24.
    setState process Last Only updatereal DOM with necessary changes First Re-render virtual DOM Second Run Diff algorithm with previous virtual DOM and new virtual DOM 24 setState sends signal to notify our app some data has changed,
  • 25.
    Receiving State fromParent Component 25 class Car extends React.Component { render() { return ( <div>This car is {this.props.color}.</div> ) } } ReactDOM.render(<Car color="Red"/>, document.getElementById('root'));
  • 26.
    Receiving State fromParent Component 26 yarn add prop-types or npm install prop-types
  • 27.
    Receiving State fromParent Component 27 Car.propTypes: { color: PropTypes.string.isRequired } Car.defaultProps = { color: 'Red' }
  • 28.
    Component LifeCycle 28 componentDidMount Fired afterthe component mounted (after the initial render) componentWillUnmount Fired before the component will unmount getDerivedStateFromProps Fired when the component mounts and whenever the props change. Used to update the state of a component when its props change
  • 29.
    Let’s think inreact!! 29 Simple ToDo App
  • 30.
    Let’s build ourToDo App 30 npm npm init react-app my-todo-app Yarn yarn create-react-app my-todo-app create-react-app my-todo-app npm i -g create-react-app
  • 31.
    Let’s think inreact!! 31 InputComponent ShowListComponent ItemComponent Simple ToDo App
  • 32.
    Thank you! Any questions? Youcan find me at: Facebook @dhanushkach dhanushka787@gmail.com 32

Editor's Notes

  • #7 It isn't necessary to use JSX in React development, but it is recommended. Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects. This will help you maintain the code when working on larger scale projects.
  • #9  This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM. A JavaScript representation of the actual DOM
  • #11  This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM. A JavaScript representation of the actual DOM
  • #12 This package serves as the entry point to the DOM and server renderers for React.