Getting Started with React

Getting Started with React

Slides for my talk at the Unstack conference 2019

678a2503a2995aa4815b2992a70d376c?s=128

shedrack akintayo

August 17, 2019
Tweet

Transcript

  1. Your Name Digital experience designer

  2. About me I’m passionate about building great products that make

    people’s lives easier. I have over 3 years plus of experience writing software. I love music, am an avid footballer, and I’m excited to share my knowledge with you guys!
  3. Overview Motion design User experience Physical Compng ➔ What are

    Frontend Technologies ➔ What is React ➔ Features of React ➔ Npm and Yarn ➔ How to install react ➔ Using create-react-app ➔ File Structure of create-react-app ➔ React Components(Functional and Class) ➔ Props ➔ State ➔ React Lifecycle Components ➔ Styling React
  4. What are Frontend Technologies Front-end is a term that involves

    the building of web pages and user interfaces for web-applications. It implements the structure, design, behavior, and animation of everything you see on the screen when you open up websites, web applications, or mobile apps. The core 3 technologies that all modern front-end web developers work to master are HTML5, CSS, and JavaScript.
  5. A FRONTEND WEB DEVELOPER COLOR WHEEL

  6. What is React React is a JavaScript library for building

    user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API
  7. Features of React React is: ➔ Declarative:React makes it painless

    to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. ➔ Component Based:Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. ➔ Learn Once, Write Anywhere: Build for both Mobile(React Native) and Web, No need to rewrite your existing codebase, you can just plug in React.
  8. NPM and YARN Npm and Yarn are both Node Package

    Managers, they handle all the various external dependencies needed for your React Projects including React itself.
  9. How to Install React 1. You could import it as

    a script file from cloudflare in your HTML file. 2. Make sure you have the Latest Stable Version of Node and Npm installed 3. In the project folder run npm init and set your values 4. 3. Run in the folder for your new project: npm I react react-dom webpack
  10. Using create-react-app create-react-app is a project aimed at getting you

    up to speed with React in no time, and any React app that needs to outgrow a single page will find that create-react-app meets that need. You start by using npx, which is an easy way to download and execute Node.js commands without installing them. npx comes with npm (since version 5.2) and if you don’t have npm installed already, do it now from https://nodejs.org (npm is installed with Node). If you are unsure which version of npm you have, run npm -v to check if you need to update.
  11. When you run npx create-react-app <app-name>, npx is going to

    download the most recent create-react-app release, run it, and then remove it from your system. This is great because you will never have an outdated version on your system, and every time you run it, you’re getting the latest and greatest code available.
  12. File Structure of create-react-app

  13. React Components Components are independent and reusable bits of code.

    They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Function components.
  14. Class Components Class syntax is one of the most common

    ways to define a React component. While more verbose than the functional syntax, it offers more control in the form of lifecycle hooks, Managing and Handling state and API Calls
  15. Functional Components React Functional Components – are the kings of

    writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.
  16. Props React Props are like function arguments in JavaScript and

    attributes in HTML. To send props into a component, use the same syntax as HTML attributes: The component receives the argument as a props object:
  17. State React components has a built-in state object. The state

    object is where you store property values that belongs to the component. When the state object changes, the component re-renders.
  18. React Component Lifecycle Methods

  19. Styling React You can style react with: • CSS STYLESHEET

    • INLINE STYLING • CSS MODULES • STYLED COMPONENTS • CSS IN JS
  20. REFERENCES AND FURTHER READING • https://www.w3schools.com/react/default.asp • https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b • https://flaviocopes.com/react-installation/

    • https://alligator.io/react/class-components/ • https://reactjs.org/docs/getting-started.html • https://www.taniarascia.com/getting-started-with-react/ • https://scotch.io/starters/react/getting-started-with-react-2019-edition @coder_blvck
  21. None