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

3r33724. Prelude
3r33737.  
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 htmlbook.ru 3r33737.  
To learn jаvascript, I recommend 3r3r14. learn.jаvascript.ru
3r33737.  
I recommend 3r318 for exploring XML. msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih
3r33737.  
You can read about DOM in jаvascript tutorial learn.jаvascript.ru/dom-nodes 3r33737.  
For learning OOP I recommend the video course proglib.io/p/oop-videocourse 3r33737.  
For learning the Windows command line I recommend 3r330. cmd.readthedocs.io/cmd.html
3r33737.  
To explore the terminal in the Mac, I recommend 3r3334. ixrevo.me/mac-os-x-terminal
3r33737.  
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 learn-reactjs.ru (which is a translation of the official React documentation: 3r3483. reactjs.org
). 3r33737.  
To study Bootstrap I use bootstrap-4.ru (which is a translation of the official Bootstrap documentation: getbootstrap.com ). 3r33737.  
In order to make friends React and Bootstrap found an excellent article 3r-358. webformyself.com/kak-ispolzovat-bootstrap-s-react
3r33737.  
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.  
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
3r33737.  
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';
3r33737.  
Now it remains to run the project:
 
3r3168. npm start
3r33737.  
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. github.com/facebook/react-devtools
3r33737.  
Installation and initial setup is complete. 3r33737.  
3r33737.  
3r33724. JSX, components and properties
3r33737.  
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 (
3r33737.  
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.  
3r33737.  
Finally, the repository in BitBucket, which has all the code for this article:
bitbucket.org/lavsexpert/learn-react-bootstrap
3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r3808.
3r3808.
+ 0 -

Add comment