Intro to React

Noble Desktop

Navigate: Right/Left Arrows (or Swipe Left/Right)
Zoom Out: Press Esc (or Pinch)

Check out our Coding Classes
These slides are for the seminar: Intro to React

We’re Going To Discuss

  1. What is React.js?
  2. History of Front-End Web Development
  3. Static JavaScript > Template Engine > Front-End library
  4. How Does React Work?
  5. Companies Using React
  6. How to Learn React
  7. Benefits of Learning React
  8. The MERN Stack
  9. Why Learn with Noble Desktop

What is React.js?

React is a front-end JavaScript library created by Facebook.

The purpose of React is create fast and scalable web/mobile applications without reloading the page.

  • React is component based
  • Reusable components
  • React is very fast
  • React can build both web and mobile applications
  • React is easy to learn

History of Front-End Web Development

  1. Early 90s: Static HTML websites
  2. Mid 90s: JavaScript introduced, creating new types of interactivity
  3. Late 90s to early 2000s: JavaScript is evolving with new features
  4. 2009: Ryan Dahl creates Node.js. JavaScript is evolving rapidly
  5. Around the same time, the birth of JavaScript template engines (EJS, Pug, mustache, ...)

  1. Early 2010s: Behind the scenes, companies start developing better front-end frameworks
  2. 2013: React released, but was not popular as it was still developing
  3. 2016: Angular released, shaking up the landscape
  4. 2010 to 2018: React becomes extremely popular and dominates front-end development

JavaScript > Template Engine >
Front-End Library

  • JavaScript: Fetching data and manipulating the DOM
  • Template Engine: the data is coming from the server
  • Front-End Library: combination of the 2 and a lot more advanced

How Does React work?

Here’s the basic concept how React works:

  • Component based
  • One way data flow: from parent to child
  • Virtual DOM tree to keep track of the changes and update the page accordingly

Companies Using React

  • Meta (Facebook)
  • Uber Eats
  • Pinterest
  • Airbnb
  • Instagram
  • Discord
  • Netflix
  • Dropbox
  • And many more...

What’s Needed to Learn React?

  • A strong foundation of JavaScript
  • Some experience with JavaScript front-end development
  • A good understand of Node.js

Benefits of Learning React

  • Build Web applications
  • Build Desktop applications (using Electron)
  • Build Mobile applications (using React Native)

The MERN Stack

  • The MERN stack stands for MongoDB, Express, React, and Node
  • Building a full-stack application using the MERN stack requires the knowledge of both front-end and back-end development

Why Attend Noble Desktop?

  • Smaller class sizes
  • 1-on-1 attention
  • Lots of hands-on exercises
    & challenges for homework
  • Resume review
  • Interview prep

Learn More

Full-Stack Certificate

JavaScript Certificate

Software Engineering Certificate

Noble Desktop Copyright Noble Desktop