Build web apps with react js
Download as PPTX, PDF0 likes289 views
This document is a tutorial on building web applications using ReactJS, covering its history, core concepts like components, unidirectional data flow, and setting up the environment. It provides step-by-step instructions on creating a basic 'Hello World' component, managing state, and receiving props. Additionally, it touches on component lifecycle methods and demonstrates the creation of a simple to-do app.
Build web apps with react js
- 1. Build web apps with ReactJS
- 2. Hello! I am Dhanushka Software Engineer at Cambio Software Engineering UCSC Facebook Developer Circle - Colombo 2
- 4. 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
- 5. React Basics A JavaScript library 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 only the 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 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.
- 9. Let’s get into React 9
- 10. Things needs to be installed 10 yarn or npm a text editor a web browser
- 11. 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
- 12. Setting up the environment 12 Folder Structure public --index.html src --index.js package.json
- 13. Setting up the environment 13 index.html <html lang="en"> <head> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
- 14. Create our first React component 14 import React from 'react' import ReactDOM from 'react-dom'
- 15. 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> ) } }
- 16. 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'));
- 17. Create our first React component 17 Next, Update package.json "scripts": { "start": "react-scripts start" }
- 18. Create our first React component 18 yarn start or npm start localhost:3000
- 19. 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"); }
- 20. 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> ) } }
- 21. 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
- 22. Adding State to your Component 22 this.handleChange = this.handleChange.bind(this) handleChange (e) { this.setState({ name: e.target.value }) }
- 23. Adding State to your Component 23 // Wrong this.state.name = 'Hello'; Instead, use setState(): // Correct this.setState({name: 'Hello'});
- 24. 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,
- 25. 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'));
- 26. Receiving State from Parent Component 26 yarn add prop-types or npm install prop-types
- 27. Receiving State from Parent Component 27 Car.propTypes: { color: PropTypes.string.isRequired } Car.defaultProps = { color: 'Red' }
- 28. 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
- 29. Let’s think in react!! 29 Simple ToDo App
- 30. 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
- 31. Let’s think in react!! 31 InputComponent ShowListComponent ItemComponent Simple ToDo App
- 32. Thank you! Any questions? You can 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.