hetvipackagetest v1.0.0

react-typescript-example

React TypeScript Example. ReactJS Example App using TypeScript. React Router TypeScript, React Fetch TypeScript, React Nested API Calls, React SCSS, React CSS Modules.

How to Convert React to TypeScript. Convert JSX to TSX.

Compare react-example-app to react-typescript-example in this Github.

Uses the Stack Exchange API to search for questions and answers on Stack Overflow.

React TypeScript Best Practices. React TypeScript Architecture for large scale applications.

Created by ReactJSExample https://github.com/reactjsexample

Full source code available at https://github.com/reactjsexample/react-example-app

Running Example

Click for running example: react-typescript-example

Screen Shot

Table of Contents

• About The Author
• Compare Same App With Redux or JSX or Angular or Polymer
  • Same App In React Redux
  • Same App In React JSX
  • Same App In Angular or Polymer
• Project Setup
  • Prerequisites
  • How To Install
  • How To Run
  • How To Run Unit Tests
  • How To Build For Production
• Software Libraries Included
• Learn More About React

About The Author

JC Lango is a UI Architect and UI Developer for large scale web applications at several Fortune 500 companies.

He is an expert in Angular, Polymer, and React and maintains these sites at Github:

• AngularExample https://github.com/angularexample
• PolymerExample https://github.com/polymerexample
• ReactJSExample https://github.com/reactjsexample

JC may be available to work remote, and can be contacted at these links:

• LinkedIn: https://www.linkedin.com/in/jclango
• Email: jobs@jclango.com

Compare Same App With Redux or JSX or Angular or Polymer

Same App In React Redux

You can compare this app to the same app with Redux.

This is a good way to see how to convert an existing React app to React Redux.

• react-redux-example

Same App In React JSX

You can compare this app to the same app with React JSX.

This is a good way to see how to convert an existing React app to React TypeScript.

• react-example-app

Same App In Angular Or Polymer

Here is the same app written in Angular and Polymer:

• angular-9-example-app
• polymer-3-example-app

Project Setup

Prerequisites

You need to have Node and NPM installed on your PC.

Downloading and installing Node.js and npm

How To Install

Download the source code using git or else download and unzip the zip file.

Open a terminal window and go to the project root folder.

You need to have npm installed globally.

Run npm i to install the required libraries.

How To Run

Open a terminal window and make sure you are in the project root folder.

Run the following command for a dev server.

npm start

Open your browser and go to http://localhost:3000

The browser will automatically reload if you change any of the source files.

Open the browser's Developer Tools window to see any errors in the Console.

How To Run Unit Tests

To run the unit tests, you need to stop the server.

If the server is running, stop the server from the terminal window by pressing Control-C.

To run the unit tests, Run the following command in the terminal window.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

How To Build For Production

Run the following command to do a production build.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Software Libraries Used

• react 16.9.0
• react-router-dom 5.0.1
• typescript 3.6.2
• node-sass 4.12.0
• @material-ui/core 4.4.0

For more information see the package.json file.

Learn More About React

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.