The f_1_weather_forecast from expowheella

Configuring a project

In the project directiory:

`npm install`

`npm init -y`

create scripts for package.json:

    "scripts": {
        "start": "webpack --mode=development --watch",
        "build": "webpack --mode-production",
        ...
        ...
    },

Installations

In the project directiory:

Install: webpack, webpack-cli, webpack-dev-server

`npm i webpack webpack-cli webpack-dev-server -D`

Install: @babel/core, babel-loader, @babel/preset-env, @babel/preset-react

`npm install @babel/core babel-loader @babel/preset-env @babel/preset-react`

Install: react, react-dom

`npm install react react-dom`

Install: typescript

`npm install typescript @types/react @types/react-dom`

`npm install ts-loader`

Install: styleloader, css-loader

`npm install style-loader css-loader`

Install: html-webpack-plugin

`npm i html-webpack-plugin`

Install: react-bootstrap, bootstrap

`npm install react-bootstrap bootstrap`

Install: axios

`npm install axios`

Install: react-yandex-maps

`npm install --save react-yandex-maps`

in my case: npm install --save react-yandex-maps

Configurations

Configure webpack.

In the project root directory:

`touch webpack.config.js`

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',
    devtool: "source-map",
    entry: "./src/index.tsx",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "bundle.js"
    },

    resolve:{
        extensions: [".js", ".jsx", ".json", ".ts", ".tsx"]
    },

    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "ts-loader"
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    
    plugins: [
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ]

};

Configure typescript.

`touch tsconfig.json`

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}

./src/components

./components

./src/styles

./styles

./src

`./src$ touch index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>F1. Exercise</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

`./src$ touch index.tsx`

import * as React from "react";
import { render } from "react-dom";

/* 
* index.tsx подключает App.tsx к index.html с помощью ReactDOM
* поэтому нам необходимо их импортировать
**/

// import ReactDOM from "react-dom/client"; 
import App from "./components/App"

/*
* Все компоненты собираются в App.tsx
* App.tsx - это верхний уровень, внутрь которого подгружаются
* остальные компонентыю
* Далее, всё рендерится с помощью ReactDOM и подвязывается
* к index.html через <div id="root">
**/

render(<App/>, document.getElementById("root"));

`./src$ mkdir components`

import * as React from "react"; 

function App() {
    return (
        <>
            <h1>Hello</h1>
        </>
    )
}

export default App;

expowheella / f_1_weather_forecast Goto Github PK

f_1_weather_forecast's Introduction

Configuring a project

npm install

npm init -y

Installations

npm i webpack webpack-cli webpack-dev-server -D

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react

npm install react react-dom

npm install typescript @types/react @types/react-dom

npm install ts-loader

npm install style-loader css-loader

npm i html-webpack-plugin

npm install react-bootstrap bootstrap

npm install axios

npm install --save react-yandex-maps

Configurations

Configure webpack.

touch webpack.config.js

Configure typescript.

touch tsconfig.json

./src/components

./src/styles

./src

./src$ touch index.html

./src$ touch index.tsx

./src$ mkdir components

./src$ mkdir styles

f_1_weather_forecast's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

`npm install`

`npm init -y`

`npm i webpack webpack-cli webpack-dev-server -D`

`npm install @babel/core babel-loader @babel/preset-env @babel/preset-react`

`npm install react react-dom`

`npm install typescript @types/react @types/react-dom`

`npm install ts-loader`

`npm install style-loader css-loader`

`npm i html-webpack-plugin`

`npm install react-bootstrap bootstrap`

`npm install axios`

`npm install --save react-yandex-maps`

`touch webpack.config.js`

`touch tsconfig.json`

`./src$ touch index.html`

`./src$ touch index.tsx`

`./src$ mkdir components`

`./src$ mkdir styles`