Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Development with React

Kabir Baidhya
February 12, 2017

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.

Kabir Baidhya

February 12, 2017
Tweet

More Decks by Kabir Baidhya

Other Decks in Technology

Transcript

  1. 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.
  2. 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)
  3. 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
  4. And will remain so unless WebAssemly is out and they

    design even be er language in the future
  5. And there are s ll too many things to learn

    in Javascript a er Ecmascript spec (2015 & beyond)
  6. 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.
  7. 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.
  8. 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
  9. And what else it's, simplicity at its best you don't

    have to complicate your code to implement your complex business logic.
  10. JSX

  11. 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.
  12. Rendering JSX And this is how you render it on

    the DOM. ReactDOM.render( element, document.getElementById('root') );
  13. 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
  14. Like this function getGreeting(user) { if (user) { return <h1>Hello,

    {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
  15. 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.
  16. 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)
  17. 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.
  18. 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);
  19. 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.
  20. 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 ); } }
  21. 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
  22. These were the things you need to know to learn

    React let's write some code now
  23. 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/