Development on React and Bootstrap in 2 days. Day number 1
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
I recommend 3r318 for exploring XML. msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih
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
To explore the terminal in the Mac, I recommend 3r3334. ixrevo.me/mac-os-x-terminal
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
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
In this article I will make a squeeze of the minimum necessary for work and we will make the following timer:
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:
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
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:
bitbucket.org/lavsexpert/learn-react-bootstrap 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r33800. 3r3808.
It may be interesting
I am overwhelmed by your post with such a nice topic. Usually I visit your blogs and get updated through the information you include but today’s blog would be the most appreciable. Well done!
Took me time to understand all of the comments, but I seriously enjoyed the write-up. It proved being really helpful to me and Im positive to all of the commenters right here! Its constantly nice when you can not only be informed, but also entertained! I am certain you had enjoyable writing this write-up.