Commit 2b0bcd38 authored by Joseph Jude's avatar Joseph Jude

Hello world component

parent 5b106534
bundle.js
......@@ -6,15 +6,14 @@ Ref: https://medium.com/@fay_jai/getting-started-with-reactjs-typescript-and-web
1. mkdir src build
2. initiate with `yarn init -y`
3. yarn add react react-dom --modules-folder ~/node_modules/
3. yarn add -D typescript webpack ts-loader @types/react @types/react-dom --modules-folder ~/node_modules/
4. install webpack globally so that we can invoke it without prefixing with path (yarn global add webpack)
3. `yarn add react react-dom --modules-folder ~/node_modules/`
3. `yarn add -D typescript webpack ts-loader @types/react @types/react-dom --modules-folder ~/node_modules/`
4. install webpack globally so that we can invoke it without prefixing with path (`yarn global add webpack`)
5. add webpack.config.js
6. add tsconfig.json
7. add a build step in script section of package.json
8. create index.html in root directory and app.ts in src directory
9. create index.tsx file in src directory
10. yarn run build
11. open index.html in browser
8. create index.html in root directory and index.tsx in src directory
9. `yarn run build`
10. open index.html in browser
Detailed blog post: https://jjude.com/react-tsc/
# Creating a simple React.js component with Typescript
A react.js component could be a search-bar or a list of item. It is a general practice to break down the application into smallest components and build the application on top of the components.
```
+-------------------------+
|-----------+ | <---+ App component
||My todos | <------------------+ Header component
|-----------+-----------+ |
||* code a program | |
||* blog about it |<-------+ Items component
||* share it in twitter | |
|-----------------------+ |
+-------------------------+
```
If we create a to-do app and display all the todos with a heading (say 'My todos') then there are three components -- the items, the header, and the app itself.
In this program, we create a simple react Hello component. This program builds on top of the previous program.
* as a general practice, components are created within a folder called components. so create a folder called `components` under `src`.
* create a `Hello.tsx`. This is our first component. We can pass parameters into components using this.props.
* Run using `yarn run build` and open index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with ReactJS and Typescript</title>
</head>
<body>
<div id="main"></div>
<!-- we pick from cdn so can be cached by browsers -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<!-- compiled file for this project -->
<script src="build/bundle.js"></script>
</body>
</html>
{
"name": "01-react-tsc",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"author": "Joseph Jude",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"@types/react": "^15.0.30",
"@types/react-dom": "^15.5.0",
"ts-loader": "^2.1.0",
"typescript": "^2.3.4",
"webpack": "^3.0.0"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
// 'HelloProps' describes the shape of props.
// State is never set so we use the 'undefined' type.
export class Hello extends React.Component<HelloProps, undefined> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("main")
);
{
"compilerOptions": {
"outDir": "./build/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
var path = require("path");
var config = {
/*
* index.tsx represents the entry point to your web application. Webpack will
* recursively go through every "require" statement in index.tsx and
* efficiently build out the application's dependency tree.
*/
entry: ["./src/index.tsx"],
/*
* The combination of path and filename tells Webpack what name to give to
* the final bundled JavaScript file and where to store this file.
*/
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
/*
* resolve lets Webpack now in advance what file extensions you plan on
* "require"ing into the web application, and allows you to drop them
* in your code.
*/
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
/*
* Each loader needs an associated Regex test that goes through each
* of the files you've included (or in this case, all files but the
* ones in the excluded directories) and finds all files that pass
* the test. Then it will apply the loader to that file.
*/
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
module.exports = config;
This diff is collapsed.
# reactjs-exercises
# Reactjs Exercises
react learning
\ No newline at end of file
Excercises to learn React.js
01. Getting started with React.js and Typescript
02. Creating a simple React.js component with Typescript
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment