permalink: /index.html
Download Node.js at nodejs.org. Node comes with npm (Node Package Manager), which we will use for running code on your machine and deploying it to Github Pages. Make sure node and npm are in your PATH
and then run node -v
and npm -v
.
Here are some relevant files worth knowing about. These files are present in any React repository. Most of them are initialized automatically with the command npx create-react-app
.
.gitignore
lists files that won't be committed to Git. You will likely never touch any of the files listed there (except for notes.txt
, which you may create in your local directory to keep any personal notes).node_modules
handles the backend for us. This folder is huge and that’s why we don’t commit it to Git (i.e. it's listed in .gitignore
). Don’t touch node_modules
directly unless you know what you’re doing.package.json
provides information that (a) npm uses to run the build, (b) npm uses to update our individual node_modules
folders, and (c) shows us things like home URL and version number. JSON stands for JavaScript Object Notation and is essentially a JS-style object with key-value pairs.
dependencies
, which specifies the dependencies and version numbers we are using in our project.scripts
, which allows us to use shorthand for some common commands.package.json
is committed to Git.
npm install <dependencyname>
and npm will automatically update node_modules
and package.json
..gitignore
).npm update
to apply these changes locally to your node_modules
.
npm update
, which will take a few minutes to create the node_modules
folder, then if you run npm start
it should load the page in a browser.node_modules
runs a whole lot of code. But package.json
dictates what node_modules
should contain.public
directory holds index.html
, the home html file. It is automatically connected to src/App.js
and you will rarely need to touch the html or anything else in public
. manifest.json
holds some basic information used by index.html
and I don’t really know what it does.
index.html
file. (Right now there aren't any.)./imgname.jpg
.src
directory is where 99% of the work is done. App.tsx
, the top overarching file, lives here. All components are stored in src/components
and most of the code you write is somewhere in here.When you push a commit, if the commit is ready to deploy to Github Pages, also run npm run deploy
and the site at our URL will be updated within a couple minutes.
I prefer to learn through videos so most of the links I'm posting will be videos. I will also post some documentation, which is useful, but imo only as a reference, not a way to learn something new.
ReactJS is a JavaScript library for frontend development, but you can also think of it as a template for organizing code for a web page. You will want to become comfortable with JavaScript if you are not already.
recognition
variable). We don’t want the whole page to re-render every time this happens so we split it into components.Options
, which passes functions to the OnOff
, etc. components in order to reuse OnOff
for different purposes if necessary.setState
), and they can modify their children’s props, but they can’t modify their own props.src/components
folder of the code, you’ll see the same structure. Of course, the component tree will change over time.
├ App
├─── API
└─────── WebspeechRecognition
├─────── AzureRecognition
├─── SIDEBAR
├─────── Display
├─────── Phrase
├─────── SpeechToText
├─────── Visualization
├─── TOPBAR
├─────── PickApi
├─────── FullScreen
├─────── MenuHide
Redux is a JavaScript library used to store global state. It is particularly useful alongside React because it solves many of the difficulties created by React’s unidirectional data flow.
We currently use 3 API's:
Webspeech: is an API available through Reacts library, so it is very simple to get working. It is run asynchronously to the rest of the code and because of this, having it communicate with everything else can be a little tricky. The best way I have found to communicate with it is by using stateRef's which react offers with "React.useRef()"
Azure: is another API we use and is slightly more difficult to work with, as it requires a key and region authentication. It is also run asynchronously so we use "React.useRef()" to communicate with it as well. Azure is much more exciting as a lot of its capabilities are pretty cutting edge, a lot of updates we have planned involve implementing Azure features.
StreamText: is a website that we actually just render with an Iframe. There is almost no coding involved and because it uses an Iframe, there is also very little communication possible. Anyone looking to help with streamtext would probably need to get comfortable with XML requests.