Skip to main content

JSX​

React makes use of JSX (Javascript Syntax Extension)!. JSX is a so-called "pre-processor" that adds XML syntax to Java Script. Since most browsers (as opposed to node.js applications) do not yet support JSX, the JSX code is transpiled to regular JavaScript code via Babel.

Single Page Application​

This is a rather confusing term, since you can have multiple pages in a React application or website. But what actually happens when a react application is deployed, a single HTML file with several "chunks" of JavaScript files is downloaded to the client and FULLY RUN WITHIN THE BROWSER. Even when routes are incorporated into the app, there is basically no communication between client and server (excluding the API-transfer of data).

Single Way Dataflow​

Data and information is passed through React components "immutable" to the underlying components. A component cannot change this info but can influence the application flow via call-back functions. This sounds fairly abstract for now, but it will quickly become clear in the examples.

React Native​

React Native is based on the same principle. With React Native it is possible to create native iOS and Android applications that are driven by JavaScript. - For more information about React Native I refer to the "React Native" training.

Virtual DOM​

React uses an in-memory data structure that determines which elements on an (html) page have changed from the previous state and then updates that information in the browser. This has the advantage that if, for example, an (asynchronous) task has been performed somewhere and something on the screen needs to be changed, the entire page does not have to be reloaded, but React only updates that one piece. Fortunately, as developers we do not have to worry about this, React takes care of it for us.

Create a new React App with Vite​

npm create vite@latest <APP NAME> -- --template react-ts

Download the predefined course app​

In the course we will be using a predefined React application where all features we will be addressing in this course are already enabled. There is an elaborate README in that repo which describes in detail which features are installed and how they are configured.

You can find the course app in my GitHub Repo: https://github.com/ReneKrewinkel/react-course-app.git

This React TypeScript Vite project includes:

  • Storybook for component documentation and browser-based story tests.
  • Atomic Bomb for generating project scaffolding and atomic components.
  • Atomic Resources for shared design tokens, fonts, SCSS resources, and generated CSS.
  • Vitest for colocated unit tests and Storybook test integration.

You can clone it from my GitHub Repo and remove the .git folder afterwards.


cd <YOUR PROJECT DIR>
git clone https://github.com/ReneKrewinkel/react-course-app.git
# or with ssh: 
git clone git@github.com:ReneKrewinkel/react-course-app.git 
cd react-course-app
rm -Rf .git
npm install
# or
yarn
# or
pnmp install

Or, to get a fully clean version, you can use degit

npm install -g degit
cd <YOUR PROJECT DIR>
mkdir react-course-app
degit https://github.com/ReneKrewinkel/react-course-app.git
npm install
# or
yarn
# or
pnmp install

Run​

# to run:
yarn dev
# or
npm run dev
# or
pnpm run dev