An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Beginner : React Typescript from scratch
This post aims to show how to start a simple project in React and Typescript, without using create-react-app or any other scaffolding tool.
We will see how to install the minimum number of dependencies to start and try to explain each command or dependency addition.
You need to have node.js installed on your dev environment.
Setup environment
To get started, create a directory for your project.
I would use Vs code in this post.
Open the directory from Vs code, then open a command line. You should have something like that
Now you need to initialize the package.json to save the dependencies and scripts.
I usually use yarn but you can use npm too
# With Yarnyarn init -y# With npmnpm init -y
This will add a package.json
file at the root.
We need to add typescript as a dev dependency to compile our code.
# With Yarnyarn add -D typescript# With npmnpm i -D typescript
We also need to install webpack to pack the project and make it suitable for the browser
# With Yarnyarn add -D webpack webpack-cli# With npmnpm i -D webpack webpack-cli
And to run the project locally we need a little standalone http server
# With Yarnyarn add -D http-server# With npmnpm i -D http-server
A little bit of configuration
In order to make the compiler works properly we need to add a typescript configuration file:
# With Yarnyarn tsc --init# With npmnpx tsc --init
this will add a default tsconfig.json
file at the root.
Edit the file, and configure it as follow :
{ "compilerOptions": { "target" : "es6" , "module" : "commonjs" , "jsx" : "react" , "outDir" : "./out" , "rootDir" : "./src" , /* Default flags */ "strict" : true , "esModuleInterop" : true , "skipLibCheck" : true , "forceConsistentCasingInFileNames" : true }}
This configuration will assume the following :
- The target output will be ES6 compliant
- The JSX templates will be compiled by the typescript compiler so no need to use babel
- The output will be placed in the
out
folder - The source code will be placed in the
src
folder
At this point, you can write and compile files, but we need now to configure Webpack to pack the output.
Create a file named webpack.config.js
at the root, and put the following inside
const path = require('path');module.exports = { entry : './out/App.js', output : { path : path.resolve(__dirname, 'www/js'), filename : 'app.js' }, externals : { "react" : 'React', "react-dom" : 'ReactDOM' },};
This configuration will assume the following :
- The entrypoint is located here :
./out/App.js
- The output will be placed here :
./www/js.app.js
- react and react-dom packages will not be packed as we will add them from a CDN, to speed up the packing time.
You first TSX
file
When coding React with Typescript, you will not use JSX files with javascript but the counterpart TSX files. Exactly the same syntax but with typescript instead of javascript inside.
So Let's create our first file in the src folder, named App.tsx
import * as React from "react" ;import { render } from "react-dom" ;render(<> Hello kitty </>, document.querySelector("#app"));
Very simple sample of code, but it does the job :-)
Now you need a last addition, the index.html
file.
Create an index.html
file located here : www/index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <title>Document</title></head><body> <div id="app"></div> <script src="js/app.js"></script></body></html>
At the end of the file, we added a div with the id
app
, and the script reference to the packed application.
It's building time
To build and pack, you just need 2 commands
# With Yarnyarn tsc# With npmnpx tsc
This will compile the project and output the result in the out
folder
Then you need to pack it
# With Yarnyarn webpack# With npmnpx webpack
If you want to use the watcher to not re run the commands each time, you can add the -w
flag to run each command in watch mode
# With Yarnyarn tsc -w# With npmyarn webpack -w
If everything goes well you have this :
Browsing the result
To finish you need to serve the project locally, so you can start a webserver to serve it
# With Yarnyarn hs ./www# With npmnpx hs ./www
Now open your browser and navigate to http://localhost:8080 to see this (I hope)
Enjoy !
Original Link: https://dev.to/nomoredeps/beginner-react-typescript-from-scratch-5dah
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To