#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.
0:03 I'm going to use create-react-app, a Facebook
0:07 utility that bootstraps our app, putting all
0:10 the defaults in place.
0:12 Pretty convenient as it says, set up a modern
0:15 web app by running one command.
0:19 You do need to have NPM or NPX so first
0:23 you want to set up node on your system
0:27 which I've already done.
0:28 Node comes with NPM, which is the package manager.
0:32 And starting Python 2 it comes with NPX.
0:35 So into my demo folder I can just use NPX
0:38 create-react-app and give it a name.
0:41 And we're going to work with the tips API
0:43 so just call it tips.
0:46 And what it's going to do now is install react
0:49 react-dom, and react-scripts, make a package.json file.
0:55 This will take a while. I think this pulls like 250 megabytes.
0:59 But once that's done I can just run npm start
1:05 and we should get a fresh new React app
1:07 we can dive straight into writing the code.
1:13 Awesome. Okay, let me see the into the tips folder
1:17 and see what we have.
1:18 So we have the node modules.
1:22 It's a bunch of dependencies pulled in.
1:25 This is quite a big folder so you want
1:28 to ignore that in your version control.
1:31 You got the package.json, which is kind
1:33 of the requirements file in Python.
1:35 So we got react, react-dom, and react-scripts.
1:40 In source we have index.css and the app.js
1:44 which we're going to write our code in
1:48 got a public folder with the index.html
1:51 which renders the JavaScript, standard readme
1:57 which explains a bit more about create-react-app
2:00 that's done. And now we're installing dependencies
2:06 so let's also install axios, which we're going
2:12 to use to query the API, and react-highlight-words
2:25 which is a plugin which we're going to use
2:28 in the rendering.
2:30 And when we filter tips by typing that the type
2:34 bit is highlighted in yellow.
2:37 Okay, that should have updated the package.json.
2:41 So now we have two more dependencies.
2:44 And the nice thing is that we can just hand off
2:47 this package.json to another developer
2:50 who then can install the dependencies using npm install.
2:55 This point I open a second terminal and I type npm start.
3:02 And that way I have my app running
3:04 in one terminal and in the first terminal
3:07 I can write my code.
3:09 First run takes a little bit and here we have
3:15 our bootstrapped app.
3:19 But if I open up source app we see that this
3:25 component is what is showing on the screen.
3:28 So you're if the logo, let's define a constant
3:33 page title, PyBites Python Tips API.
3:44 And we can balance that right here in h1.
3:53 And you will recognize this from your typical
3:56 framework template code where we can embed
4:00 variables in curly braces.
4:03 Hit save and app now automatically refreshes
4:07 which is a nice feature.
4:09 And we see the new title displayed on the page.
4:13 In the next video we're going to define
4:15 our first component, which will be a Python tip.