Development on React and Bootstrap in 2 days. Day number 1

3r33724. Prelude
First you need to at least understand a bit about HTML, CSS, jаvascript, XML, DOM, OOP and be able to work in the terminal (command line). 3r33737.  
For learning HTML and CSS, I recommend 3r33737.  
To learn jаvascript, I recommend 3r3r14. learn.jа
I recommend 3r318 for exploring XML.
You can read about DOM in jаvascript tutorial learn.jа 3r33737.  
For learning OOP I recommend the video course 3r33737.  
For learning the Windows command line I recommend 3r330.
To explore the terminal in the Mac, I recommend 3r3334.
If you are running Linux, then 3r3373768. bash 3r33800 and analogs know, in extreme cases, man or help will help you. 3r33737.  
To study React I use (which is a translation of the official React documentation: 3r3483.
). 3r33737.  
To study Bootstrap I use (which is a translation of the official Bootstrap documentation: ). 3r33737.  
In order to make friends React and Bootstrap found an excellent article 3r-358.
In this article I will make a squeeze of the minimum necessary for work and we will make the following timer:
Development on React and Bootstrap in 2 days. Day number 1 3r33737.  
http: //localhost: 3000 3r33737.  
The terminal should remain open, without it the application page will not open. If you suddenly closed - it does not matter. Enough with the command cd 3r300. go to the application folder and start it with the command [b] npm start 3r33737.  
Now we install Bootstrap, and the dependencies jquery and popper.js to it,
3r3168. npm install bootstrap jquery popper.js
Next, you need to make changes to the application files, for this we go to the new-app folder, where the application is located in the file src /index.js add lines, they should be first:
3r33737. import 'bootstrap /dist /css /bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap /dist /js /bootstrap.bundle.min';
Now it remains to run the project:
3r3168. npm start
And the browser will open again at http: //localhost: 3000 already with the application, refined using Bootstrap:
3r33177. 3r33737.  
Also for debugging React, you can install the extension “ React Developer Tools 3r33800. "For the browser. Actual links to the extension for 3r3r2182. Chrome
and 3r3184. Firefox 3r3793. and other use cases are listed in the official repository of 3r3186.
Installation and initial setup is complete. 3r33737.  
3r33724. JSX, components and properties
Let's see what we have generated [b] create-react-app
- the source files are in the src directory. First, let's look at the file. index.js - there are a few lines of import. The lines make it clear what they are doing, so I will not comment. 3r33737.  
The most important line in this file is
3r33737. ReactDOM.render (
Today, this is all that I wanted to tell. In the next article I will tell you more about Bootstrap, which I only touched on in this article. In addition to Bootstrap, there are still important topics: lists, tables, forms and thinking in the style of React. 3r33737.  
Finally, the repository in BitBucket, which has all the code for this article:
3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r3808.
+ 0 -

Add comment