#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Bootstrap our app with create-react-app
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Let's start writing some React code. I'm going to use create-react-app, a Facebook utility that bootstraps our app, putting all the defaults in place.
0:13
Pretty convenient as it says, set up a modern web app by running one command. You do need to have NPM or NPX so first
0:24
you want to set up node on your system which I've already done. Node comes with NPM, which is the package manager.
0:33
And starting Python 2 it comes with NPX. So into my demo folder I can just use NPX create-react-app and give it a name.
0:42
And we're going to work with the tips API so just call it tips. And what it's going to do now is install react
0:50
react-dom, and react-scripts, make a package.json file. This will take a while. I think this pulls like 250 megabytes.
1:00
But once that's done I can just run npm start and we should get a fresh new React app we can dive straight into writing the code.
1:14
Awesome. Okay, let me see the into the tips folder and see what we have. So we have the node modules. It's a bunch of dependencies pulled in.
1:26
This is quite a big folder so you want to ignore that in your version control. You got the package.json, which is kind
1:34
of the requirements file in Python. So we got react, react-dom, and react-scripts. In source we have index.css and the app.js
1:45
which we're going to write our code in got a public folder with the index.html which renders the JavaScript, standard readme
1:58
which explains a bit more about create-react-app that's done. And now we're installing dependencies so let's also install axios, which we're going
2:13
to use to query the API, and react-highlight-words which is a plugin which we're going to use in the rendering.
2:31
And when we filter tips by typing that the type bit is highlighted in yellow. Okay, that should have updated the package.json.
2:42
So now we have two more dependencies. And the nice thing is that we can just hand off this package.json to another developer
2:51
who then can install the dependencies using npm install. This point I open a second terminal and I type npm start. And that way I have my app running
3:05
in one terminal and in the first terminal I can write my code. First run takes a little bit and here we have our bootstrapped app.
3:20
But if I open up source app we see that this component is what is showing on the screen. So you're if the logo, let's define a constant
3:34
page title, PyBites Python Tips API. And we can balance that right here in h1.
3:54
And you will recognize this from your typical framework template code where we can embed variables in curly braces.
4:04
Hit save and app now automatically refreshes which is a nice feature. And we see the new title displayed on the page.
4:14
In the next video we're going to define our first component, which will be a Python tip.