Skip to main content

Creating the project

This step consists in creating a standard React application without involving onekijs.
This application looks exactly like the one proposed on the Angular site so you can compare the Angular and React versions.

Step Final result​

The result of this step is as follows:

Code Editor

The code below is hosted on Code Sandbox.
Click the "Open Sandbox" button to view/edit the code with an online IDE.

Creating the project​

Typescript

We recommend to use Typescript instead of javascript. Therefore, all examples are in Typescript.

A onekijs application is built with one of this build tool:

TypeBuild toolLibrairies
Standard React appViteOnekiJs, React, Redux, Immer, Saga, React Router Dom
Next.js appCreate Next AppOnekiJs, React, Redux, Immer, Saga, Next, Next Router

From then on, you benefit from all the advantages brought by this tool.

Tabs

The code is slightly different depending on the framework used. Click on the corresponding tab to display the code corresponding to the type of application you want to build.

Vite is the most popular tool to boostrap a React project.
To create a projet named mystore-app, enter the following command:

// npm install -g yarn
yarn create vite mystore-app --template react-ts

Structure​

Even if the project is very simple at this stage, we already structure the project as recommended in this chapter.

getting-started/cra/step01-react-app/src/index.tsx
loading...

getting-started/cra/step01-react-app/src/pages/products/index.tsx
loading...

Via a command line enter:

cd mystore-app
yarn start

to start a livereload webserver. The website is available at http://localhost:3000
Any change to the source code will refresh the page to reflect the change.

Next step​

In the next step, we will transform this standard React application into an onekijs application and add the ability to navigate between pages.