Skip to content

update readme file and add mycounter app #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

update readme file and add mycounter app #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94fd34e
update readme file and add mycounter app
ilorez Sep 6, 2023
2aa05b1
move files
ilorez Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions Zustand/README.md → 23\09\05 - (Z-Najdaoui) - Zustand/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
This tutorial will guide you through creating a simple React application using Zustand for state management. Zustand is a minimalistic, fast, and scaleable state management solution for React.

### Note
after complete this tutorial you can go and take a look to the counter app above
after complete this tutorial you can go and take a look to the mycounter app above

## Step 1: Create a React App

First, make sure you have Node.js and npm installed on your computer. If not, you can download and install them from [here](https://nodejs.org/). Then, create a new React application using Create React App:
First, make sure you have Node.js and npm installed on your computer. If not, you can download and install them from [here](https://nodejs.org/). Then, create a new React application using Create [vite](https://votejs.dev/guide):

```bash
npx create-react-app zustand-tutorial
cd zustand-tutorial
npm create vite@latest mycounter -- --template react
npm install
cd mycounter
```

## Step 2: Install Zustand
Expand All @@ -25,7 +26,7 @@ In Zustand, you manage your application's state using stores. Let's create a sim

Create a file called store.js in your project's src directory:
```javascript
// src/store.js
// src/store.jsx
import create from 'zustand';

const useStore = create((set) => ({
Expand All @@ -43,7 +44,7 @@ Here, we've defined a store with an initial state containing a count variable an
Now, let's create a React component that uses our Zustand store to display and manipulate the count.

```javascript
// src/Counter.js
// src/Counter.jsx
import React from 'react';
import useStore from './store';

Expand All @@ -63,10 +64,10 @@ export default Counter;

```

## Step 5: Use the Component in App.js
## Step 5: Use the Component in App.jsx
Now, you can use the Counter component in your App.js file.
```javascript
// src/App.js
// src/App.jsx
import React from 'react';
import './App.css';
import Counter from './Counter';
Expand All @@ -87,6 +88,6 @@ export default App;
Finally, start your React application:

```bash
npm start
npm run dev
```
Open your browser and go to http://localhost:3000 to see your app in action. You should see a counter that you can increment and decrement.
Open your browser and go to http://localhost:`port` to see your app in action. You should see a counter that you can increment and decrement.
20 changes: 20 additions & 0 deletions 23\09\05 - (Z-Najdaoui) - Zustand/mycounter/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
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 },
],
},
}
24 changes: 24 additions & 0 deletions 23\09\05 - (Z-Najdaoui) - Zustand/mycounter/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
8 changes: 8 additions & 0 deletions 23\09\05 - (Z-Najdaoui) - Zustand/mycounter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
13 changes: 13 additions & 0 deletions 23\09\05 - (Z-Najdaoui) - Zustand/mycounter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<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>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading