A taste of React.js

Transcript

1. A taste of React.js 🔥 Facilitators: Collins Koech - @collinskoech11 Paul Onteri - @paulonteri
3. Web development before React - and similar libraries/frameworks We have all faced this 😂
4. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. It‘s a magical solution created by Facebook to be used on the web (and on mobile apps - iOS & Android) to handle hundreds of posts , millions like count & millions of comments per user without the need to reload the web page. What is React/React.js?
5. Click to play
6. Who even uses React?
7. Performance : using React will lead to a fast user interface without doing much work to specifically optimize for performance Simplicity : Reactjs it’s based component , with simple plain JavaScript code All the power of HTML, CSS and Javascript together inside the component: It’s easy to learn : Anyone who have some background with HTML CSS and JavaScript , can Learn Reactjs increasing development speed : ReactJS allows us to create reusable UI components that can be used in many web pages Why React?
8. React being a new technology and it not being taught in schools leads to a lack of skilled react developers. Companies pay handsomely for the knowledge of React. A job search for open React.js positions on LinkedIn will always yield 30-50 open positions. Jobs?
9. A simple React Component
10. What we’ll need: • Install npm (it’s like the PlayStore for code) • Get an IDE/Text Editor ready. Preferably VS Code. • Use/Install create-react-app from NPM (used to setup a React app). • Write code. Getting Started with React.
11. What is npm? npm is two things: first and foremost, it is an online repository for the publishing of open-source Node.js projects; second, it is a command-line utility for interacting with said repository that aids in package installation, version management, and dependency management. Installing npm will come with node.js & npx. npx is an npm package runner that can execute any package that you want from the npm registry without even installing that package. Learn about it here: https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/ We’ll use it to install create-react-app, react and other related libraries/frameworks. Follow the installation instructions here: https://www.npmjs.com/get-npm Learn more here: https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-begi nners/ Install npm - the PlayStore for JavaScript libraries/frameworks
12. Get an IDE/Text Editor ready. Preferably VS Code. Visual Studio Code is currently the most popular code editor. It’s a free, open source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality. Install VS Code from: https://code.visualstudio.com Install React Extensions: https://dev.to/jamesqquick/vs-code-react-setup-5-ti ps-419d
14. Run ‘npx create-react-app dsc-react’ to create a new react project named dsc-react Set up a new react application with create-react-app
15. Project Structure For now, focus on App.js only. That’s what’s useful. To run the app, run the command `npm start` from a terminal while in your project’s directory.
16. `npm start` command - Terminal output 😃 Terminal output after running `npm start` in your project’s directory.
17. Browser output 🥵🥵🥵 Browser output on localhost:3000 after running `npm start` in your project’s directory. The web app is working. 🔥
18. Edit App.js Change the contents of `App.js` and check the output in your browser.
19. App.js content Some helper text
20. Browser output after editing App.js Browser output after editing `App.js`
21. Using JavaScript variables Create new variables `name` & `day` and you can use them in your React component by embedding them in curly braces. Awesome huh?
22. Browser output after using variables It’s that easy!
23. Creating a new component Create a new file in your working directory and name it Apples.js. In it, create a component named Apples and add some content.
24. Apples.js content Some helper text
25. Import Apples.js into our first component(App.js). Some helper text
26. Browser output after importing Apples.js into App.js Some helper text
27. Thank you for your time. Any questions? The End
28. More Resources Awesome! You are done with the intro to React. Check out the following to solidify your React knowledge: • Practical intro to React by Ben Award (Highly recommended): https://youtube.com/playlist?list=PLN3n1USn4xlntqksY83W3997mmQPrUmqM • FreeCodeCamp React (Highly recommended): https://www.freecodecamp.org/learn/front-end-libraries/#react • MDN Getting started with React: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScrip t_frameworks/React_getting_started
29. Need Help? The DSC CUEA community is always ready to help: https://chat.whatsapp.com/BgcClSBb4ZS6c0BLgkCZdW Alternatively contact: • Paul: +254703130580 • Collins: +254728000107 • Abigail: +254717280496