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.
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
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.
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
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
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
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
#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.