Outline for Today
Media
No Media
Transcript
Zoom Audio Transcript
-
today. Okay, so i'm going to share my screen. The whole screen. i'm doing all right, thanks to happy Tuesday everyone or Wednesday, I guess, depending where you are. So we started talking last day about or we're talking more detail about the. web accessibility initiative. Accessible rich Internet applications. standards. So what i'd like to do is go through an example. How many of you are familiar with used react js and node js. Let me make a poll. i've given you four choices there. Try to make them somewhat equidistant but. it's really there's not an alternative for no definitely not not. Really, not a lot. anyway. There you go, so if you can. can answer the question, please. Looking for for more people to answer. No wrong answer. Okay i'll give another 30 seconds. So you can get the other two people to answer. Okay. almost everybody answered. Some have quite a bit of experience and then. Otherwise, no. That seems fair. So I thought we'd go through an example of how to get. Get set up with. react yes and no js. We do want things for forget. share my screen. Oh, they didn't share the results of the poll either. My bed there sorry. OK, so now, you can see, the whole thing. One other thing I wanted to share with you is. The link to the video from last week. My friend Ross Mitchell, who is. copy what aim for precision health care. there's a YouTube link for that. Again, talk so very good explanation of the things he's doing related to. Applying Ai for healthcare. So it's probably an hour long. him talking and then. 15 minutes for questions at the end. Talk about sitting up react, but let's go through a step about. Getting. The chess set up. So how many of you have. Anyone. Little windows here. Okay, so. start with I guess. You need to install it then go to the website. Sorry just occurred to me it's. about getting that first step done. anyway. So i've got mpm is node package manager. And so let's say we've got. That installed So if you want to create a. An application react. So i'll put all this information in a file. So NPs is that's. That runs a command so there's the script to create a react APP. So react is the front end and no jess is the back end. So. Together we can get a website running quite quickly here. So i'm calling the. The new so i'm doing NP axis i'm going to execute a command to create react APP as a script and then react bootstrap APP is a directory that's going to be created so inside that directory i'll. put some other stuff and. And we'll. go from there. Okay. So it's going to load everything into this directory that it needs to. have to run. So. it's called react bootstrap because we're going to use bootstrap for the. Mobile first. To us, to create a mobile first. interface. And then we can use the aria. Labels or the aria keywords properties. associated with. The different user interface elements. To. To create our interface, so this is going to be a little bit easier. A little more straightforward than writing. html code and so forth. Once again. This directory setup. sure you. know. So if you go visit this website yourselves. And you'll see. See the version, for your operating system. Okay, so that basic installation is done now. So it created a new react APP in this directory that's packages. This is the react. stuff it's needed. So we can look at npr audit. see what the issues are. So we can try and fix them just by doing fix. can do. X minus force or dash that's force. Before some. OK, so now that is it's all installed. scroll back up here to see now we can go back. To that directory and type mtn start. it's not quite started yet that's fine. Look. login servers running so we can see, we have a web application running on our computer so. let's see Mari. Okay, so. here's a reasonable tutorial setting up whoa. Okay, so we've got. Great creating the. So now, the next thing is to install react bootstrap. Which is. version of the bootstrap. Libraries written in react. So we can see things are still. Looking at. Jason. So miserable mcs we're using bootstrap by 1.3. react 17. and so forth. These are the scripts. So you say mpm start. Writing react scripts start. there's not too much. here. source directory. So there's that. let's go back to. web page. Alright, so let's put some. So we have header. text. So let's put a button on the page as well. So this way we're not. importing the whole. library we're just importing specific. pieces there components so we're going to use the button so important button from react bootstrap button.
-
Oh.
-
it's. If you hover over it styling changes, a little bit. So, how does that seem. feel like I. didn't quit. anyway. having trouble getting to my chat window. So, since. Thursday I will i've had some problems with my MAC book. So I upgraded the operating system. It seems to have helped. But i'm still having some strange behavior. So that's put me behind on the things I wanted to do. Like. Like the exam marks. and so on. So my apologies there. This is one example of a problem, having is not getting the focus. just getting beeps. Okay. So we'll get that sorted out. So I think that's working. better than. My access to the chat window and zoom. So the idea with the lts is. Get the long term support long term stability. version. Little little bit behind. recurring so we're at 17.8 for the current. With the 16 point 14.2 is. Very that'll be supported over time. I really wish I could take them Swindon. Okay. how's this for. people other than a on. So. I guess my answer to the question was never used an end vm no burn version management. I didn't think so, but. Looking at the active path. seems like I have. Those are wise words. I feel like. very useful program would be not just sure node in mpm. throw or mpm. For. Other environments for Python Ruby. I feel like I have more than one. one set of. binaries installed and. that's not helping my computer run any better. So I meant to. give you a bit of introduction today to note and react js. So. mind. an assignment that will. Let you build on the example that we did today in class. So that's one part of it, and the other part, is to. Think about your experience and in installing the different pieces that are required. To. Get the application running. So have it written up for Thursday. Then we can discuss it further than. You see, the chat again. yeah that helps. So there's a node js website. Years react website.
Zoom Chat Transcript
-
Hello!
-
Good thank you.
-
hi sir.good,,how are you?
-
https://youtu.be/2Q8glNkMY3M
-
Yes, on a Mac. But I don’t like installing Node.js on the local machine. I use Docker instead or Vagrant. Also, not a fan of npm.
-
I’m somewhat familiar with docker. Which package manager do you use?
-
For node.js? npm
-
Have you used nvm?
-
For managing different versions?
-
no…
-
You need to install it globally
-
Currently it’s installed on the project
-
npm install -g n
-
It’s trying to pull in the packages within /usr directory
-
If you don’t want to use sudo, please set N_PREFEIX
-
N_PREFIX
-
Long term support
-
This is why I prefer docker or VM. It’s quite easy to throw everything away and start from scratch. Otherwise, it’s very easy to mess up the system. Also, regular installation often breaks with OS upgrades.
-
https://nodejs.org/en/
-
https://reactjs.org/
-
I didn’t quite get what are we supposed to do.
-
Create a simple app using react-bootstrap that illustrates the ARIA best practices applied to some bootstrap components.
-
And consider your process and experience in creating the app…
-
I will have a full version for discussion on Thursday…
-
https://react-bootstrap.github.io/getting-started/introduction/https://react-bootstrap.github.io/getting-started/introduction/
-
https://www.pluralsight.com/guides/how-to-set-up-a-react-bootstrap-app
-
ok? it looks like we are out of time for today. See you Thursday?
-
Attendence?
-
right
-
Student password
-
ok?
-
Take care and see you in 2 days :-)
-
goodbye?!
-
Thank you
-
thank you
-
thank you .bye
-
Have a nice day.
Responses
What important concept or perspective did you encounter today?
- Today, I learned how to use the Accessible Rich Internet Applications attribute, more commonly known as ARIA, to enable users with disability. We did some experiments by building a web application with Node.js, React, and Bootstrap.
- important details about the web accessibility initiative.
- Is how to use git and it functions.
- Got in touch with node.js and react is wonderful experience . I learn how node.js worked in asynchronous mode of operation. This event driven input-output make work not only user-friendly but also its developer friendly
- I have learned about the fundamentals of React and Node js for design purpose.
- On the beginning of the session sir made a pol asking how many of us know node js or react js . And then sir explained the difference of both .sir also took us to his github and showed his repository
Was there anything today that was difficult to understand?
- hi, we are talking about using react-bootstrap.also about macbook ,updating nade on mac.I prefer docker.it is very easy
Was there anything today about which you would like to know more?
- same bootstrap and node js. seems like i would need to do exclusive reading and practicing. but i don't know where to start.
- Todays session was all about react and node and ARIA practices and went through the issues sir was experiencing after updating his mac system
- In the meeting it was discussed about the installation and error solving in mac
- about using nodeJS, bootstrap
- The working with mac os and the working of node with npm.
- Some topic for breakout room discussion should be there.
Wiki
Link to the UR Courses wiki page for this meeting