Getting Started with React

Slides for my talk at the Unstack conference 2019

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