Estimated Time: 1.5 hours

<aside> ❗ Welcome to CodeLab's article on React. Here, you'll learn the basics of React, a web development framework used commonly in web projects of all sizes.

As always, you can follow along with the source code here.

</aside>

Prerequisites

HTML

CSS

JavaScript

Overview

What is React?

React is a front-end web development framework created and maintained by Facebook. Instead of writing plain HTML, CSS, and JavaScript, developers use React to create their apps, making them faster, with smaller codebases, and in less time than normal.

Why React?

We use React instead of the default, vanilla HTML/CSS/JS combination because it makes developing web apps easier and quicker. It has become an industry standard for that reason exactly - it makes using third-party packages, code re-usability, and state management, among many other things, far simpler.

ReactJS

How to Create a React App + File Structure

https://www.youtube.com/watch?v=4Czk84iaY-M

Key Takeaways:

• To create your own React app, navigate to your desired parent folder and type npx create-react-app app-name.
• There are a few things to notice here in the default React file structure -
  • node_modules - We've seen these before. All of your app's library dependencies.
  • public - This is the basis of your React app, although you'll rarely ever work in here. This area is primarily for your app's metadata and top-level imports.
    • index.html is the file that houses almost all of this information.
  • src - This is where the source code for your React app lives, and where you'll be spending 99% of your front-end development time.
    • index.js is the outermost file that wraps around everything else.
    • app.js is the next highest-level file.

Creating a Basic Functional Component, Syntax, and JSX

https://www.youtube.com/watch?v=XfoFXg5_Ah0