React Fundamentals in React

React Fundamentals is the first chapter of the free React tutorial. It starts with what React is and ends with you writing your own typed components in TSX.

What each lesson covers:

• Introduction to React: What React is and why developers use it, its main features, React versus plain JavaScript, Single Page Applications, the Virtual DOM, the React ecosystem, how an app fits together, and how to install Node.js, create a Vite project, read its files and run it.
• TSX Fundamentals: What TSX is and why React uses it, TSX syntax, the rules every element follows, putting values inside { }, comments, rendering elements to the page, and Fragments.
• Components: Functional components, creating and typing components with props, rendering, composition, reusable components, importing and exporting, naming rules, smart and presentational components, and folder structure.

You need no setup to start. The first lessons run entirely on this site; the Introduction shows how to build the same kind of app on your own computer with Node.js, npm and Vite.

Every page runs real React in your browser. Edit the code and see the result next to it. Each lesson ends with exercises that check what your app shows, not how your code is written.

Lessons in this section

1. Introduction to React

   What React is and why developers use it, its main features, React versus plain JavaScript, Single Page Applications, the Virtual DOM, the React ecosystem, how an app is put together, and how to install Node.js, create a Vite project, read its files and run it.

2. TSX Fundamentals

   What TSX is and why React uses it, TSX syntax, the rules every TSX element follows, putting values inside { }, comments, rendering elements to the page, and Fragments.

3. Components

   What components are, functional components, creating and typing components with props, rendering, composition, reusable components, importing and exporting, naming rules, smart vs presentational components, and folder structure.