#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.

Talk Python's Mastodon Michael Kennedy's Mastodon