1 of 15

Intro to React

David Acevedo

2 of 15

Who am I?

  • David Acevedo Staff Software Engineer at AppFolio
  • Also a UCSB alumni
  • Acevedo looks like Avocado! I lean into that when it comes to work profile pictures :)
  • I love working with JavaScript and like learning about it a lot!

3 of 15

What is JavaScript?

“JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.”

MDN

4 of 15

Why use a JavaScript framework?

  • Introduce scaleable patterns for bigger teams
  • Makes it easier to make complex UI
  • Support from the open source community
  • Has patterns for better developer experience

5 of 15

Popular Frameworks

6 of 15

Why would you use a popular framework like React?

  • In demand from the industry
    • Easier to find a job
    • Instantly useful day 1 on the job
  • Lots of online resources for help
    • Stackoverflow
    • Github issues
  • Lots of community created Open Source Projects that help developers
    • Material UI (component library for easy UIs)
    • Reactstrap/react-bootstrap
    • Anything you can think of

7 of 15

Popular Frameworks

8 of 15

Popularity of React

​

​

​

​

​

​

​

More details about others stats in FrontendFrameworksPopularity.md

9 of 15

Let’s look at some React examples

10 of 15

Setting up JavaScript development in Rails

​

  • We will be using using Shakapacker with a React setup
    • “Shakapacker makes it easy to use the JavaScript pre-processor and bundler Webpack v5+ to manage application-like JavaScript in Rails.”
  • Shakapacker makes it easy to develop for current generation JavaScript and provides lots of neat features for pushing JavaScript code to production

11 of 15

Setting up Shakapacker

  • Go to shakapacker setup gist and go through the instructions

12 of 15

The following will be shown if successful under /site/index

13 of 15

Some notes from setting up Shakapacker

  • app/javascript will contain all of our React code
  • Package.json was created and will contain all of our JavaScript packages
    • These packages can then be imported in JavaScript code

14 of 15

Modern ways of developing in React

  • I showed the more traditional ways of developing on React, also known as Client Side Rendering or Single Page Application (SPA)
  • These days you would use a React framework like Next.js or RemixJS
    • These are server side JavaScript frameworks that use React for rendering HTML
    • It provides the benefits of Server Side Rendering with the benefits of a Single Page Application
    • Provide more conventions around React

15 of 15