Getting started with react basics
1 like75 views
The document is a presentation about getting started with React, covering its basics, etiquette during sessions, and a comparison with Angular. It highlights the significance of components in React and explains their lifecycle, including the creation and usage of both class-based and functional components. Additionally, it provides instructions on setting up a React application and points to resources for further learning.
Getting started with react basics
- 1. Rudar Daman Singla Software Consultant Knoldus Inc. Getting Started with React Basics Shubhrank Rastogi Software Consultant Knoldus Inc.
- 2. Lack of etiquette and manners is a huge turn off. KnolX Etiquettes Punctuality Respect Knolx session timings, you are requested not to join sessions after a 5 minutes threshold post the session start time. Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
- 3. React Components Component Lifecycle OUR AGENDA 01 ` What is React 02 Angular vs React 03 04 05 06 Demo Some Famous Apps Built on React JS07 Create React App References08
- 4. REACT
- 5. What is React? ● React is a JavaScript library created by Facebook. ● React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. ● React can be used in the development of single-page or mobile applications. ● Current stable release: 16.12.0 (November 14, 2019)
- 7. Data Binding Angular vs React
- 9. App Architecture Angular vs React
- 10. Community Support Angular vs React
- 11. Create React App ● npx create-react-app my-app ● cd my-app ● npm start ● sudo npm install -g create-react-app ● create-react-app my-app ● cd my-app ● npm start
- 12. React Components ● Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. ● The simplest way to define a component is to write a JavaScript function: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ● Also ES6 class is used to define a component: class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
- 13. Class-based vs Functional Components Class-based Functional class XY extends Component const XY = props => {...} Access to state Access to State (useState()) Lifecycle Hooks No Lifecycle Hooks Access state and pros via “this” Access props via “props” Use if you need to manage state or access to lifecycle hooks and you don’t want to use hooks! Use in all other classes
- 14. Component Lifecycle Creation constructor(props) call super(props) DO: Set up state DON’T: Cause Side effects getDerivedStateFromProps(props, state) DO: Sync state DON’T: Cause Side effects render() Prepare & structure your JSX Render Child Components componentDidMount() DO: Cause Side effects DON’T: Update State (triggers re-render)
- 15. Demo
- 17. Some Famous Apps Built on ReactJS
- 18. Q/A
- 20. Thank You !