vite to part 1

Author: mluukkai

src/content/1/en/part1.md

@@ -8,7 +8,7 @@ lang: en
 
 In this part, we will familiarize ourselves with the React-library, which we will be using to write the code that runs in the browser. We will also look at some features of JavaScript that are important for understanding React.
 
-<i>Part updated 10th Jan 2023</i>
-- <i>No major changes</i>
+<i>Part updated 11th August 2023</i>
+- <i>Create React App replaced with Vite</i>
 
 </div>

src/content/1/en/part1a.md

@@ -9,33 +9,36 @@ lang: en
 
 We will now start getting familiar with probably the most important topic of this course, namely the [React](https://react.dev/) library. Let's start by making a simple React application as well as getting to know the core concepts of React.
 
-The easiest way to get started by far is by using a tool called [create-react-app](https://github.com/facebook/create-react-app). It is possible (but not necessary) to install <i>create-react-app</i> on your machine if the <i>npm</i> tool that was installed along with Node has a version number of at least <i>5.3</i>.
+The easiest way to get started by far is by using a tool called 
+[Vite](https://vitejs.dev/).
 
-> <i>You may also use the new generation frontend tool [Vite](https://vitejs.dev/) in this course if you wish. The create-react-app is still the tool recommended by the React team and that is why it remains the default tool to set up a React project in this course. Read [here](https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741) how the React team sees the future of React tooling.</i>
-
-Let's create an application called <i>part1</i> and navigate to its directory.
+Let's create an application called <i>part1</i>, navigate to its directory and install the libraries:
 
 ```bash
-npx create-react-app part1
+npm create vite@latest part -- --template react
 cd part1
+npm install
 ```
 
-The application runs as follows
+The application is started as follows
 
 ```bash
-npm start
+npm run dev
 ```
 
-By default, the application runs on localhost port 3000 with the address <http://localhost:3000>
+The console says that the application has started on localhost port 5173, i.e. the address <http://localhost:5173/>:
+
+![](../../images/1/1-vite1.png)
+
+Vite starts the application [by default](https://vitejs.dev/config/server-options.html#server-port) on port 5173. If it is not free, Vite uses the next free port number.
 
-Your default browser should launch automatically. Open the browser console **immediately**. Also, open a text editor so that you can view the code as well as the webpage at the same time on the screen:
+Open the browser and a text editor so that you can view the code as well as the webpage at the same time on the screen:
 
-![code and browser side by side](../../images/1/1e.png)
+![](../../images/1/1-vite4.png)
 
-The code of the application resides in the <i>src</i> folder. Let's simplify the default code such that the contents of the file index.js looks like this:
+The code of the application resides in the <i>src</i> folder. Let's simplify the default code such that the contents of the file main.js looks like this:
 
 ```js
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
@@ -46,40 +49,58 @@ ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 and file <i>App.js</i> looks like this
 
 ```js
-const App = () => (
-  <div>
-    <p>Hello world</p>
-  </div>
-)
+const App = () => {
+  return (
+    <div>
+      <p>Hello world</p>
+    </div>
+  )
+}
 
 export default App
 ```
 
-The files <i>App.css</i>, <i>App.test.js</i>, <i>index.css</i>, <i>logo.svg</i>, <i>setupTests.js</i> and <i>reportWebVitals.js</i> may be deleted as they are not needed in our application right now.
+The files <i>App.css</i> and <i>index.css</i>, and the directory <i>assets</i> may be deleted as they are not needed in our application right now.
+
+### create-react-app
+
+Instead od Vite you can also use the older generation tool [create-react-app](https://github.com/facebookincubator/create-react-app) in the course to set up the applications. The most visible difference to Vite is the name of the application startup file, which is <i>index.js</i>.
+
+The way to start the application is also different, it is started with a command
+
+```
+npm start
+```
+
+The course is currently (11 August 2023) being updated to use Vite. Some brands may still use the application base created with create-react-app.
 
 ### Component
 
-The file <i>App.js</i> now defines a [React component](https://react.dev/learn/your-first-component) with the name <i>App</i>. The command on the final line of file <i>index.js</i>
+The file <i>App.js</i> now defines a [React component](https://react.dev/learn/your-first-component) with the name <i>App</i>. The command on the final line of file <i>main.js</i>
 
 ```js
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
-renders its contents into the <i>div</i>-element, defined in the file <i>public/index.html</i>, having the <i>id</i> value 'root'.
+renders its contents into the <i>div</i>-element, defined in the file <i>index.html</i>, having the <i>id</i> value 'root'.
 
-By default, the file <i>public/index.html</i> doesn't contain any HTML markup that is visible to us in the browser:
+By default, the file <i>index.html</i> doesn't contain any HTML markup that is visible to us in the browser:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-      content not shown ...
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
+
 ```
 
 You can try adding there some HTML to the file. However, when using React, all content that needs to be rendered is usually defined as React components.
@@ -347,13 +368,47 @@ I really hope your console was open. If it was not, remember what you promised:
 
 Software development is hard. It gets even harder if one is not using all the possible available tools such as the web-console and debug printing with _console.log_. Professionals use both <i>all the time</i> and there is no single reason why a beginner should not adopt the use of these wonderful helper methods that will make life so much easier.
 
+### Possible error message
+
+Depending on the editor you are using, you may receive the following error message at this point:
+
+![](../../images/1/1-vite5.png)
+
+It's not an actual error, but a warning caused by the [ESLint](https://eslint.org/) tool. You can silence the warning [react/prop-types](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md) by adding to the file <i>.eslintrc .cjs</i> the next line
+
+```js
+module.exports = {
+   root: true,
+   env: { browser: true, es2020: true },
+   extends: [
+     'eslint:recommended',
+     'plugin:react/recommended',
+     'plugin:react/jsx-runtime',
+     'plugin:react-hooks/recommended',
+   ],
+   ignorePatterns: ['dist', '.eslintrc.cjs'],
+   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+   settings: { react: { version: '18.2' } },
+   plugins: ['react-refresh'],
+   rules: {
+     'react-refresh/only-export-components': [
+       'warn',
+       { allowConstantExport: true },
+     ],
+     'react/prop-types': false // highlight-line
+   },
+}
+```
+
+We will get to know ESLint in more detail [in part 3](/osa3/validointi_ja_es_lint#lint).
+
 ### Some notes
 
 React has been configured to generate quite clear error messages. Despite this, you should, at least in the beginning, advance in **very small steps** and make sure that every change works as desired.
 
 **The console should always be open**. If the browser reports errors, it is not advisable to continue writing more code, hoping for miracles. You should instead try to understand the cause of the error and, for example, go back to the previous working state:
 
-![screenshot of undefined prop error](../../images/1/2a.png)
+![screenshot of undefined prop error](../../images/1/1-vite6.png)
 
 As we already mentioned, when programming with React, it is possible and worthwhile to write <em>console.log()</em> commands (which print to the console) within your code.
 
@@ -399,7 +454,7 @@ const App = () => {
 
 the result is an error message.
 
-![multiple root elements error screenshot](../../images/1/3c.png)
+![multiple root elements error screenshot](../../images/1/1-vite7.png)
 
 Using a root element is not the only working option. An <i>array</i> of components is also a valid solution:
 
@@ -571,10 +626,9 @@ For each web application for a series of exercises, it is recommended to submit
 
 <i>The application that we will start working on in this exercise will be further developed in a few of the following exercises. In this and other upcoming exercise sets in this course, it is enough to only submit the final state of the application. If desired, you may also create a commit for each exercise of the series, but this is entirely optional.</i>
 
-Use create-react-app to initialize a new application. Modify <i>index.js</i> to match the following
+Use create-react-app to initialize a new application. Modify <i>main.js</i> to match the following
 
 ```js
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
@@ -644,8 +698,6 @@ Careful, small-step progress may seem slow, but it is actually <i> by far the fa
 
 that is, according to Martin, careful progress with small steps is even the only way to be fast.
 
-**WARNING2** create-react-app automatically makes the project a git repository unless the application is created within an already existing repository. Most likely you **do not want** the project to become a repository, so run the command _rm -rf .git_ in the root of the project.
-
 <h4>1.2: course information, step2</h4>
 
 Refactor the <i>Content</i> component so that it does not render any names of parts or their number of exercises by itself. Instead, it only renders three <i>Part</i> components of which each renders the name and number of exercises of one part.

src/content/1/en/part1b.md

@@ -518,7 +518,7 @@ When it comes to syntax, the classes and the objects created from them are very
 
 The introduction of the class syntax was a controversial addition. Check out [Not Awesome: ES6 Classes](https://github.com/petsel/not-awesome-es6-classes) or [Is “Class” In ES6 The New “Bad” Part? on Medium](https://medium.com/@rajaraodv/is-class-in-es6-the-new-bad-part-6c4e6fe1ee65) for more details.
 
-The ES6 class syntax is used a lot in "old" React and also in Node.js, hence an understanding of it is beneficial even in this course. However, since we are using the new [Hooks](https://reactjs.org/docs/hooks-intro.html) feature of React throughout this course, we have no concrete use for JavaScript's class syntax.
+The ES6 class syntax is used a lot in "old" React and also in Node.js, hence an understanding of it is beneficial even in this course. However, since we are using the new [Hooks](https://react.dev/reference/react) feature of React throughout this course, we have no concrete use for JavaScript's class syntax.
 
 ### JavaScript materials
 

src/content/1/en/part1c.md

@@ -192,10 +192,9 @@ const App = (props) => {
 export default App
 ```
 
-And file <i>index.js</i> becomes:
+And file <i>main.js</i> becomes:
 
 ```js
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
@@ -252,10 +251,9 @@ All of our components up till now have been simple in the sense that they have n
 
 Next, let's add state to our application's <i>App</i> component with the help of React's [state hook](https://react.dev/learn/state-a-components-memory).
 
-We will change the application as follows.  <i>index.js</i> goes back to
+We will change the application as follows.  <i>main.js</i> goes back to
 
 ```js
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'

src/content/1/en/part1d.md

@@ -1141,8 +1141,6 @@ Remember, submit **all** the exercises of one part **in a single submission**. O
 
 <i>Some of the exercises work on the same application. In these cases, it is sufficient to submit just the final version of the application. If you wish, you can make a commit after every finished exercise, but it is not mandatory.</i>
 
-**WARNING** create-react-app will automatically turn your project into a git-repository unless you create your application inside of an existing git repository. **Most likely you do not want each of your projects to be a separate repository**, so simply run the _rm -rf .git_ command at the root of your application.
-
 In some situations you may also have to run the command below from the root of the project:
 
 ```bash
@@ -1165,7 +1163,7 @@ The application must display the total number of collected feedback for each cat
 
 Note that your application needs to work only during a single browser session. Once you refresh the page, the collected feedback is allowed to disappear.
 
-It is advisable to use the same structure that is used in the material and previous exercise. File <i>index.js</i> is as follows:
+It is advisable to use the same structure that is used in the material and previous exercise. File <i>main.js</i> is as follows:
 
 ```js
 import React from 'react'
@@ -1312,16 +1310,14 @@ const App = () => {
 export default App
 ```
 
-Content of the file <i>index.js</i> is the same as in previous exercises.
+Content of the file <i>main.js</i> is the same as in previous exercises.
 
 Find out how to generate random numbers in JavaScript, eg. via a search engine or on [Mozilla Developer Network](https://developer.mozilla.org). Remember that you can test generating random numbers e.g. straight in the console of your browser.
 
 Your finished application could look something like this:
 
 ![random anecdote with next button](../../images/1/18a.png)
 
-**WARNING** create-react-app will automatically turn your project into a git-repository unless you create your application inside of an existing git repository. **Most likely you do not want each of your projects to be a separate repository**, so simply run the _rm -rf .git_ command at the root of your application.
-
 <h4>1.13*: anecdotes step2</h4>
 
 Expand your application so that you can vote for the displayed anecdote.

src/content/1/fi/osa1.md

@@ -8,7 +8,7 @@ lang: fi
 
 Alamme tässä osassa tutustua React-kirjastoon, jolla siis teemme sovelluksen selaimessa suoritettavan koodin. Teemme samalla myös nopean katsauksen Javascriptin Reactin kannalta oleellisimpiin ominaisuuksiin.
 
-<i>Osa päivitetty 10.1.2023</i>
-- <i>Ei suuria muutoksia</i>
+<i>Osa päivitetty 11.8.2023</i>
+- <i>Create React App rkorvattu Vitellä</i>
 
 </div>