Project Falcon

Hello, React!

An introduction to React

React

React was first open-sourced by Facebook in 2013.

React went against the traditional MVC model that Angular, Ember, and Backbone were using.

Both Angular and Ember have since nudged closer toward React's architecture.

Component-based Architecture?

It sounds fancy, but it's actually a very simple concept.

  • A React application is a tree of components.
  • There is one root component that is inserted into the DOM.
  • Each component knows how to render itself.
  • Components may render other components beneath them.
    • These components are child components in the tree.

We'll talk more about components, how we create them and how they interact with each other to create your application as we go.

What Makes React Awesome?

The 2018 StackOverflow Developer Survey found react to be one of the most loved technologies in use today.

  • The feedback loop is very tight.
  • It avoids a lot of complexity by avoiding bi-directional binding.
  • There's a great ecosystem around it.
  • You get to use some of the latest ES features out of the box.

Time to set up a React app

We're going to use a tool called create-react-app to bootstrap (not the CSS framework...) our React application so we don't have to worry about all of the configuration stuff

Instructions

  1. From your command line, at the location you want to create your project, run the following command: npx create-react-app <your-project\name>
  2. Change directories into your project directory: cd <your-project\name>
  3. Start your project!: npm start or yarn start

Conclusion

You're now ready to start programming React! Follow along with the rest of the slides to get a good idea of what React does for you.