Home

1. Start Create-react-app is a set of automation tools that is commonly known as a CLI or command line interface. It sets up a new project with a series of utilities like Webpack, which will let you run a live server and a development environment, as well as Babel that can let you manage your code and make it write a version that's more compatible with older browsers. Create-react-app does require at least Node 6, so if things aren't working, make sure you go to the Node.js website and update or download a copy. All you need to do to create a new React app is run the npx command and it looks like this. You say npx create-react-app and then the name that you want your app to have. Let's go ahead and do that. I'm going to go over to this terminal, make sure that I'm on the desktop, but you can put your copy of your project anywhere. Then, I'm going to run the npx create-react-app and I'm going to call this testapp for right now. This is going to take awhile to download and install everything you need for the project. Once the installation is finished, you should see a screen like this and it gives you some options of some commands that you can run. The most common commands are npm start, which runs a live server, and also npm run build, which processes your code so that it can load in a server. Before we do anything else, let's take a look at what we get when we install this package. I'm going to open this up in my favorite text editor. I'm going to use Visual Studio Code for this project. You can see that I have a bunch of different files here including some setup files like this package.json and the package.json log. What this shows you is the name of our application here, as well as the current version which it sets to .1.0 and also, the dependency. This is a set of plugins that it's installing for us. React is the main library. React-dom is a set of tools that manages the dom, or the document object model, for us. React-scripts is a series of automation scripts. All these scripts are listed right here, but the files for these different libraries are actually in this node_modules folder. If you click and open that up, you'll see and you'll have to scroll quite a bit, you can see that we have the react as well as react-dom and react-scripts folder. All these scripts that you see right here are available to you to run in the terminal, but they point to the folders that we've talked about before. In addition to our node_modules folder, which we get when we do an npm install command, we also have a couple of folders here. The public folder has the files like the index.html document. This is the main page that your application is going to use. You don't really need to ever touch this index.html file, but it's a great place to change the title of the application if you don't want it to say React App. You can add some other things if this application were a part of a bigger website. You also have this favicon, which is just the icon that appears on the navigation bar on a browser, as well as the sample manifest file which is a file that mobile devices use when you save the application onto a device. The next folder, and this is the most important folder in this project and in any React project, it's this source folder. This has your actual application. In here, the first file that we need to talk about is this file right here called index.js. This is actually what loads up our application. It imports the libraries, including the react library as well as the react-dom library, and then it also imports our CSS. This is a little weird because you're not importing the CSS into your HTML file. As a matter of fact, if you know HTML, you know that usually you have a link tag right here referring to the CSS, but all that is going to be automatically managed by a Webpack for us, so we don't have to worry about importing the CSS directly. What you do is you simply import a file into a component, like this index.js sort of initializer and the CSS will then be available to that component, and in this case, to any components inside this component. We're also importing another thing right here called App. This is a sub-component, so this is this file right here and then we're also importing a generic registerServiceWorker that is located right here. It creates a nice little service worker to make our application a little bit more modern and compatible with mobile devices. In addition to that, notice that we issue a react-dom command, which is from this library, and we ask it to render our application and we want it to render that into a place which will be in our index.html file that is an element with an ID of root. Again, if you go to index.html, you can scroll down and you can see that there is an element here with an ID of root. Our entire application is going to live inside that tag. Let's go back into index, open that, there's actually nothing else in here that you need to know about except that you also may be wondering, when we say something like import React from react, where is that coming from? It's like, where is it importing this library from? It's actually going into the node_modules folder. Same thing for this ReactDOM, but then when we import individual files, it's relative to the current document. Index.css is a document that's in the same folder as the current file and it is right there. This is where you would put any CSS that you want your entire document to know about. Of course, in this index.js file, we're also calling App. Notice that we didn't have to say App.js and that is how this works. You don't have to use the file extension when you're just calling another component. You just say ./ and then App and it knows that you want this one right here. This is a good example of a simple component. What you can see is that we're also importing React here, but we are also importing a part of the library in React called a component. The component is how you build React applications. You don't build a massive, single application. You build a series of small components that make up a bigger application. Then, we're importing a logo.svg file also in the same directory, so you can see that right there. What it does is actually importing the path of the location, into this variable called logo, and then we can use, right here, an expression to import that image into our document. We're also importing a local CSS file for the app. This CSS file is only going to be relevant to the current application or the current component. They're married together, App.js and App.css are married together by this import command and the CSS will only load if the App.js component is being loaded. To take a look at how this works in a browser, what you can do is run the npm start command. You can do that from a separate terminal, but since I'm using Visual Studio Code, I can come up in here and take a look at my terminal. You can use the command right here and it'll pull up a terminal and you can do npm start. This will open a browser with the sample application. You can see that it has the logo and it says, Welcome to React, and then it has a little bit of text after it. This is what you get when you use create-react-app. It's pretty cool because it sets up an application, as well as some automation for you, and it prepares you for building a React app in a very quick manner.
2. Routing
3. Połączenie do bazy danych
4. rejestracja i logowanie użytkowników
5. Dostęp do danych
6. Wyszykiwanie