Skip to content

Commit 6ada8c6

Browse files
brauliodiezbrauliodiez
committed
Hello React migrated
1 parent 84c82de commit 6ada8c6

File tree

9 files changed

+295
-0
lines changed

9 files changed

+295
-0
lines changed

‎hooks/00_BoilerPlate/Readme.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,3 +273,13 @@ module.exports = {
273273
```bash
274274
npm start
275275
```
276+
277+
# About Basefactor + Lemoncode
278+
279+
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
280+
281+
[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
282+
283+
[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
284+
285+
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

‎hooks/01_HelloReact/.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"useBuiltIns": "entry"
7+
}
8+
]
9+
]
10+
}

‎hooks/01_HelloReact/Readme.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# 01 Hello React
2+
3+
In this sample we will create our first react component and connect it with the DOM via react-dom.
4+
5+
We will take a startup point sample _00 Boilerplate_.
6+
7+
Summary steps:
8+
9+
- Install react and react-dom libraries.
10+
- Install react and react-dom typescript definitions.
11+
- Update the index.html to create a placeholder for the react components.
12+
- Create a simple react component.
13+
- Wire up this component by using react-dom.
14+
15+
## Prerequisites
16+
17+
Install [Node.js and npm](https://nodejs.org/en/) (v8.9.4 or higher) if they are not already installed on your computer.
18+
19+
> Verify that you are running at least node v8.x.x and npm 5.x.x by running `node -v` and `npm -v`
20+
> in a terminal/console window. Older versions may produce errors.
21+
22+
## Steps to build it
23+
24+
- Copy the content of the `00 Boilerplate` folder to an empty folder for the sample.
25+
26+
- Install the npm packages described in the [./package.json](./package.json) and verify that it works:
27+
28+
```bash
29+
npm install
30+
```
31+
32+
- Install `react` and `react-dom` libraries as project dependencies.
33+
34+
```bash
35+
npm install react react-dom --save
36+
```
37+
38+
- Install also the typescript definitions for `react` and `react-dom`
39+
but as dev dependencies.
40+
41+
```bash
42+
npm install @types/react @types/react-dom --save-dev
43+
```
44+
45+
- Update the [./src/index.html](./src/index.html) to create a placeholder for the react components.
46+
47+
_[./src/index.html](./src/index.html)_
48+
49+
```diff
50+
<!DOCTYPE html>
51+
<html>
52+
<head>
53+
<meta charset="utf-8">
54+
<title></title>
55+
</head>
56+
<body>
57+
<div class="well">
58+
<h1>Sample app</h1>
59+
+ <div id="root"></div>
60+
</div>
61+
</body>
62+
</html>
63+
64+
```
65+
66+
- Create a simple react component (let's create it within a new file called `hello.tsx` in `src`folder).
67+
68+
_[./src/hello.tsx](./src/hello.tsx)_
69+
70+
```javascript
71+
import * as React from "react";
72+
73+
export const HelloComponent = () => {
74+
return <h2>Hello component !</h2>;
75+
};
76+
```
77+
78+
- Wire up this component by using `react-dom` under [./src/index.tsx](./src/index.tsx) (we have to rename
79+
this file extension from `ts` to `tsx` and replace the content).
80+
81+
_[./src/index.tsx](./src/index.tsx)_
82+
83+
```diff
84+
- document.write('Hello from index.ts!');
85+
86+
+ import * as React from 'react';
87+
+ import * as ReactDOM from 'react-dom';
88+
89+
+ import { HelloComponent } from './hello';
90+
91+
+ ReactDOM.render(
92+
+ <HelloComponent/>,
93+
+ document.getElementById('root')
94+
+ );
95+
```
96+
97+
- Delete the file _main.ts_ we are not going to need it anymore.
98+
99+
- Modify the [./webpack.config.js](./webpack.config.js) file and change the entry point from `./index.ts`
100+
to `./index.tsx`.
101+
102+
_[./webpack.config.js](./webpack.config.js)_
103+
104+
```diff
105+
...
106+
107+
module.exports = {
108+
context: path.join(basePath, 'src'),
109+
resolve: {
110+
extensions: ['.js', '.ts', '.tsx']
111+
},
112+
entry: {
113+
- app: './index.ts',
114+
+ app: './index.tsx',
115+
vendorStyles: [
116+
'../node_modules/bootstrap/dist/css/bootstrap.css',
117+
],
118+
},
119+
```
120+
121+
- Execute the example:
122+
123+
```bash
124+
npm start
125+
```
126+
127+
# About Lemoncode
128+
129+
We are a team of long-term experienced freelance developers, established as a group in 2010.
130+
We specialize in Front End technologies and .NET. [Click here](http://lemoncode.net/services/en/#en-home) to get more info about us.

‎hooks/01_HelloReact/package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "react-typescript-by-sample",
3+
"version": "1.0.0",
4+
"description": "React Typescript examples",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --mode development --inline --hot --open",
8+
"build": "webpack --mode development"
9+
},
10+
"keywords": [
11+
"react",
12+
"typescript",
13+
"hooks"
14+
],
15+
"author": "Braulio Diez Botella",
16+
"license": "MIT",
17+
"devDependencies": {
18+
"@babel/cli": "^7.2.3",
19+
"@babel/core": "^7.2.2",
20+
"@babel/polyfill": "^7.2.5",
21+
"@babel/preset-env": "^7.3.1",
22+
"@types/react": "^16.8.3",
23+
"@types/react-dom": "^16.8.1",
24+
"awesome-typescript-loader": "^5.2.1",
25+
"babel-loader": "^8.0.5",
26+
"css-loader": "^2.1.0",
27+
"file-loader": "^3.0.1",
28+
"html-webpack-plugin": "^3.2.0",
29+
"mini-css-extract-plugin": "^0.5.0",
30+
"style-loader": "^0.23.1",
31+
"typescript": "^3.3.3",
32+
"url-loader": "^1.1.2",
33+
"webpack": "^4.29.3",
34+
"webpack-cli": "^3.2.3",
35+
"webpack-dev-server": "^3.1.14"
36+
},
37+
"dependencies": {
38+
"react": "^16.8.2",
39+
"react-dom": "^16.8.2"
40+
}
41+
}

‎hooks/01_HelloReact/src/hello.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from "react";
2+
3+
export const HelloComponent = () => {
4+
return <h2>Hello component !</h2>;
5+
};

‎hooks/01_HelloReact/src/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title></title>
6+
</head>
7+
<body>
8+
<div class="well">
9+
<h1>Sample app</h1>
10+
<div id="root"></div>
11+
</div>
12+
</body>
13+
</html>

‎hooks/01_HelloReact/src/index.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
4+
import { HelloComponent } from './hello';
5+
6+
ReactDOM.render(
7+
<HelloComponent/>,
8+
document.getElementById('root')
9+
);

‎hooks/01_HelloReact/tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es6",
4+
"module": "es6",
5+
"moduleResolution": "node",
6+
"declaration": false,
7+
"noImplicitAny": false,
8+
"jsx": "react",
9+
"sourceMap": true,
10+
"noLib": false,
11+
"suppressImplicitAnyIndexErrors": true
12+
},
13+
"compileOnSave": false,
14+
"exclude": ["node_modules"]
15+
}

‎hooks/01_HelloReact/webpack.config.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
var HtmlWebpackPlugin = require("html-webpack-plugin");
2+
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
var webpack = require("webpack");
4+
var path = require("path");
5+
6+
var basePath = __dirname;
7+
8+
module.exports = {
9+
context: path.join(basePath, "src"),
10+
resolve: {
11+
extensions: [".js", ".ts", ".tsx"]
12+
},
13+
entry: ["@babel/polyfill", "./index.tsx"],
14+
output: {
15+
path: path.join(basePath, "dist"),
16+
filename: "bundle.js"
17+
},
18+
devtool: "source-map",
19+
devServer: {
20+
contentBase: "./dist", // Content base
21+
inline: true, // Enable watch and live reload
22+
host: "localhost",
23+
port: 8080,
24+
stats: "errors-only"
25+
},
26+
module: {
27+
rules: [
28+
{
29+
test: /\.(ts|tsx)$/,
30+
exclude: /node_modules/,
31+
loader: "awesome-typescript-loader",
32+
options: {
33+
useBabel: true,
34+
babelCore: "@babel/core" // needed for Babel v7
35+
}
36+
},
37+
{
38+
test: /\.css$/,
39+
use: [MiniCssExtractPlugin.loader, "css-loader"]
40+
},
41+
{
42+
test: /\.(png|jpg|gif|svg)$/,
43+
loader: "file-loader",
44+
options: {
45+
name: "assets/img/[name].[ext]?[hash]"
46+
}
47+
}
48+
]
49+
},
50+
plugins: [
51+
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
52+
new HtmlWebpackPlugin({
53+
filename: "index.html", //Name of file in ./dist/
54+
template: "index.html", //Name of template in ./src
55+
hash: true
56+
}),
57+
new MiniCssExtractPlugin({
58+
filename: "[name].css",
59+
chunkFilename: "[id].css"
60+
})
61+
]
62+
};

0 commit comments

Comments
 (0)