ReactJS Training Day 1 | Abhisek Pattnaik | Impelsys

Intro to ReactJS

Transcript

1. WELCOME TO REACTJS TRAINING DAY 1 ...by Abhisek Pattnaik Senior Software Engineer CE Services, Heart Bangalore
2. Senior Software Engineer CE Services, Heart Bangalore, Impelsys — ✪ 4.5+ years of Building Enterprise Applications ✪ Author of react-rbac and yup-phone libraries. https://github.com/ImpelsysInc/react-rbac | https://github.com/abhisekp/yup-phone ✪ 9+ years of Open-Source Contributions https://github.com/abhisekp Abhisek Pattnaik
3. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. 1. Pre-requisites 2. Intro to ReactJS 3. Setup ReactJS in Local and Cloud (Web) 4. VSCode Extensions 5. ReactJS App Folder Structure 6. Resources 7. Exercise Agenda
4. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. Grab your Phone Scan the QR Code and Go to the Slido Link https://app.sli.do/event/5Qx63Dv4kRvFQjxPtwRx9P or Join at slido.com #3336314
5. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. Don't say to me "You Don't Know JS" and Kend C. Dodds cannot help you. Because they can. ☺︎ • Javascript Basics (optionally Typescript) • Closures • Ternary operator ( 1 === 1 ? true : false ) • Array Methods (find, some, every. includes, map, filter, reduce) • Template Literals `My name is ${name}` // "My name is Abhisek Pattnaik • Shorthand property names • Arrow functions ( () => void ) • Destructuring (Object and Array) const [first, second] = ["Abhisek", "Pattnaik"] const { first, second } = { first: "Abhisek", second: "Pattnaik" } • Parameter Defaults ( function (num = 1) {} ) • Rest/Spread operators { first, ...rest} = { first: "Abhisek", middle: "", last: "Pattnaik" } [ first, ...rest ] = ["Abhisek", "", "Pattnaik"] function getFirstName(first, ...rest) { return first } const name = { first, ...spreadOtherParts } const name = [first, ...spreadOtherParts] • ES Modules ( import "./component" ) • Nullish coalescing operator ( name ?? "" ) • Optional Chaining (or Elvis operator) ( student?.address?.line2 ) • Promise and async/await syntax ( async () => await new Promise() ) • NodeJS and NPM • HTML, CSS, DOM (Document Object Model) Prerequisites
6. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • UI Library (not a Framework) • Open Source • Cross Platform (React Client, Server, Native) • Large Community • Rich Ecosystem (packages) • Developed by Jordan Walke (Facebook) • Instagram is the first external website implemented ReactJS. • Maintained by Facebook • Component based Architecture (resuable) • Declarative (What to do as opposed to How) • Performant (faster than direct DOM manipulation) • React alike libraries — Preact, InfernoJS, freJS Intro to ReactJS
7. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. • NodeJS + NPM (use nvm) https://to.absk.im/nvm-install-docs • Visual Studio Code Editor (or WebstormIDE) • Useful VSCode Extensions • Setup ReactJS Project ``` > npx create-react-app my-first-app > cd my-first-app > npm start ``` • React Devtoolsin browser Setup ReactJS in Local
8. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • formulahendry.auto-rename-tag • streetsidesoftware.code-spell-checker • mikestead.dotenv • EditorConfig.EditorConfig • dbaeumer.vscode-eslint • eamodio.gitlens • xabikos.JavaScriptSnippets • Orta.vscode-jest • ZainChen.json • xyz.local-history • leizongmin.node-module-intellisense • christian-kohler.npm-intellisense • christian-kohler.path-intellisense • esbenp.prettier-vscode Useful Visual Studio Code Extensions
9. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. Setup ReactJS in Cloud (Web) • CodeSandbox https://codesandbox.io (or https://react.new) • Repl.it https://replit.com/@replit/React-Javascript • PlayCode https://playcode.io/react • Codedamn https://codedamn.com/online-compiler/reactjs
10. ReactJS Folder Structure Demo Time
11. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • ReactJS Docs: https://reactjs.org/docs/getting-started.html • NodeJS+NPM (nvm): https://to.absk.im/nvm-install-docs • DevDocs Reference: https://devdocs.io • Learn Javascript: https://www.freecodecamp.org/learn/javascript-algorithms- and-data-structures/ • Learn NodeJS: https://www.udemy.com/course/understand- nodejs/ • Learn Javascript Indepth: https://www.udemy.com/course/understand-javascript/ Relevant Resources
12. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Create a React app using local setup. • Create a div with ID "app" in HTML. • Mount the app in the "#app" div. • The app should render in the page "Hello, YOUR_NAME" Exercise Task
13. QUESTIONS? React out via abhisek.pattnaik@impelsys.com https://about.me/abhisekp