Frontend Development with React

Getting started with Front-end Development with React. The slides were designed for a workshop accompanied with a sample Todo app demo on react.

Source code for TodoApp https://github.com/kabirbaidhya/react-todo-app.

Transcript

1. Frontend development with React @kabirbaidhya
2. Before we begin let's be aware of few things
3. Frontend Development
5. It's normal to feel lost here if you're a beginner.
6. Why learning frontend development is hard? Too many frameworks Numerous tools available Don't know which one to choose Not sure from where to start Things change so fast JS language, ecosystem and the web are experiencing tons of changes Need to stay tuned with the changing trends Functional Programming vs OOP and what not.
8. So what to do then? Go step by step Learn Javascript Know what things are: Ecmascript speci cation (2015 & beyond) Package Managers (eg: npm) Frameworks (eg: React, Angular) Bundlers (eg: webpack) NodeJS & Tools (eg: uglify, gulp, grunt)
10. But you don't need to know everything learn to use them to get things done
11. JS Ecosystem
12. Javascript is no longer just a client‐side scrip ng language.
13. Today Javascript powers Server-side applications (NodeJs) Mobile Apps (React Native, Cordova) Desktop applications (Electron) CLI tools and much more (Raspberry Pi, Arduino) let alone Web Apps
14. And Javascript is s ll the de‐facto language of web (as of 2017)
15. And will remain so unless WebAssemly is out and they design even be er language in the future
16. So, it's s ll not too late to Learn Javascript in 2017
17. And there are s ll too many things to learn in Javascript a er Ecmascript spec (2015 & beyond)
18. React
19. What is React?
20. React A Javascript library for building User Interfaces
21. Why React?
22. UIs become painless It makes it painless to create interactive UIs. Simplify views for each state in your application Declarative views make your code more predictable and easier to debug.
23. Component Based Build encapsulated components that manage their own state Write your UIs as a pure functions of your state JSX brings the best of javascript in writing components in a declarative manner No messy spagetti code for DOM manipulation anymore.
24. Learn Once, Write Anywhere You can use React almost everywhere. Even in your existing angular or ember projects for developing new features Could be used for Server-side rendering Could power mobile apps using React Native
25. And what else it's, simplicity at its best you don't have to complicate your code to implement your complex business logic.
27. Let's get started
28. Hello, World! ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
29. JSX
30. What is JSX? Check this strange syntax. const element = <h1>Hello, world!</h1>; This funny tag syntax is neither a string nor HTML. It is called JSX. It produces React Elements.
31. Rendering JSX And this is how you render it on the DOM. ReactDOM.render( element, document.getElementById('root') );
32. JSX & Javascript After compilation JSX expressions become regular Javascript objects. You can use JSX inside javascript statements. And you can embed any javascript expressions in JSX
33. Like this function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
34. React Components
35. Components You can rewrite the previous example as function Hello() { return <h1>Hello, world!</h1>; } ReactDOM.render( <Hello />, document.getElementById('root') ); This <Hello/> is a React Component.
36. Components are the basic building blocks of a React App let you break down the UI into independent, reusable parts Conceptually, they are similar to functions that take some input (props) and return output (UI)
37. Component Types Func onal Components - A simple pure javascript function that takes in props and return react elements or other components. Stateful Components - A component with an ability to contain and maintain it's own private state.
38. Thinking in React Break down UI into small reusable, manageble, independent components Think of your UI as a function of your application state. UI = f(S);
39. State and Lifecycle
40. State One of the hardest part of front-end development is state management. State is all the information about your UI such that it's possible to re-create the same UI given the same state. State could contain any thing from the data, UI current states, routes etc.
41. Stateful Components Stateful components can contain their local state. We can de ne them using ES6 class . class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <h2>It is {this.state.date.toLocaleTimeString()}.</h2 ); } }
42. Lifecycle methods componentWillMount() componentDidMount() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount()
43. Unidirec onal Data Flow
44. Data flow is unidirec onal State is local or encapsulated within the component It only could be passed down as props to other components The only to trigger the UI update is to trigger state change Think as if everything re-renders on state change and the Virtual DOM takes care of things behind the scenes
45. These were the things you need to know to learn React let's write some code now
46. Crea ng a simple TodoApp with React
47. Check this github repository h ps://github.com/kabirbaidhya/react‐todo‐app for step‐by‐step instruc ons to create a todo app.
48. Want to read more? https://facebook.github.io/react/ https://egghead.io/technologies/react http://beletsky.net/2016/04/the-functional- approach-to-ui.html https://medium.com/javascript-and- opinions/state-of-the-art-javascript-in-2016- ab67fc68eb0b#.ume3ww8dt https://hackernoon.com/how-it-feels-to-learn- javascript-in-2016-d3a717dd577f#.vltjk7rdv http://jamesknelson.com/5-types-react- application-state/
49. Thank You @kabirbaidhya kabirbaidhya@gmail.com The slides were created using Marp. https://yhatt.github.io/marp/