DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for A Brief Introduction to React
Mark Mahoney
Mark Mahoney

Posted on • Updated on

A Brief Introduction to React

This is a short introduction to React. React is an incredibly popular front-end framework that allows you to create encapsulated components that manage their own state. React has helped transform web development and bring it inline with modern software development practices.

You will be asked to follow along with the programs below. Just click on the links and a code playback page will load (you might want to open each one in a new tab). Then click on the comments on the left hand side of the playback screen or hit the play button to drive the development of the code. You can download the code at any point and run it on your machine. There are some controls in the top right hand side of the screen to make the text bigger or to switch to blog mode (which is good for small screens).

React

I start by showing a basic example of React and JSX. I will build a site to serve info about Computer Science legends in the first three examples. This program shows the beginning of the app:

Next, I continue to build the CS Legends app in a React project:

I complete the CS Legends app by creating a back-end to serve legend data:

Finally, I show the beginnings of creating a scoreboard app for a kids hockey league. At the end you will be asked to download the code and add to it:

Comments and Feedback

You can find all of these code playbacks in my free 'book', An Introduction to Web Development from Back to Front. I am always looking for feedback so please feel free to comment here or to send me a message. You can follow me on twitter @markm208.

Latest comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!