From 52996198d328d6522cd512abdbce3d88cc1b7d02 Mon Sep 17 00:00:00 2001 From: Manav Sehgal Date: Mon, 1 Aug 2016 06:26:10 +0530 Subject: [PATCH 1/3] Install React Bootstrap Dependency - section added --- template/README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/template/README.md b/template/README.md index f6e6b90af7c..71d5b87dd7f 100644 --- a/template/README.md +++ b/template/README.md @@ -82,6 +82,32 @@ The generated project includes React and ReactDOM as dependencies. It also inclu npm install --save ``` +### Install React Bootstrap Dependency + +**Step 1.** Install React Bootstrap and Bootstrap from NPM. + +``` +npm install react-bootstrap --save +npm install bootstrap --save +``` + +**Step 2.** Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```index.js``` file. + +``` +import './index.css'; +import 'bootstrap/dist/css/bootstrap.css'; +import 'bootstrap/dist/css/bootstrap-theme.css'; +``` + +**Step 3.** Import required React Bootstrap components within ```App.js``` file or your custom component file. + +``` +import React, { Component } from 'react'; +import { Navbar, Jumbotron, Button } from 'react-bootstrap'; +``` + +Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [App.js](https://github.com/manavsehgal/react-eshop/blob/master/src/App.js) redone using React Bootstrap. + ### Import a Component This project setup supports ES6 modules thanks to Babel. From a2ca892dc68b9f2e75ea1233ed44a2a57654072f Mon Sep 17 00:00:00 2001 From: Manav Sehgal Date: Mon, 1 Aug 2016 16:54:57 +0530 Subject: [PATCH 2/3] Updated with short intro clarification --- template/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/template/README.md b/template/README.md index 71d5b87dd7f..43a2bc25fd7 100644 --- a/template/README.md +++ b/template/README.md @@ -82,13 +82,15 @@ The generated project includes React and ReactDOM as dependencies. It also inclu npm install --save ``` -### Install React Bootstrap Dependency +### Install React Bootstrap -**Step 1.** Install React Bootstrap and Bootstrap from NPM. +React Bootstrap is not a dependency for using React however it is a popular alternative for integrating Bootstrap with React apps. It can be integrated with Create React App workflow using following three steps. + +**Step 1.** Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well. ``` npm install react-bootstrap --save -npm install bootstrap --save +npm install bootstrap@3 --save ``` **Step 2.** Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```index.js``` file. From 5b4591e51104f5388df8beeb41acd10375c36a5c Mon Sep 17 00:00:00 2001 From: Manav Sehgal Date: Mon, 1 Aug 2016 19:28:02 +0530 Subject: [PATCH 3/3] Moved React Bootstrap after Add Images --- template/README.md | 56 +++++++++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/template/README.md b/template/README.md index 43a2bc25fd7..17884704e2b 100644 --- a/template/README.md +++ b/template/README.md @@ -82,34 +82,6 @@ The generated project includes React and ReactDOM as dependencies. It also inclu npm install --save ``` -### Install React Bootstrap - -React Bootstrap is not a dependency for using React however it is a popular alternative for integrating Bootstrap with React apps. It can be integrated with Create React App workflow using following three steps. - -**Step 1.** Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well. - -``` -npm install react-bootstrap --save -npm install bootstrap@3 --save -``` - -**Step 2.** Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```index.js``` file. - -``` -import './index.css'; -import 'bootstrap/dist/css/bootstrap.css'; -import 'bootstrap/dist/css/bootstrap-theme.css'; -``` - -**Step 3.** Import required React Bootstrap components within ```App.js``` file or your custom component file. - -``` -import React, { Component } from 'react'; -import { Navbar, Jumbotron, Button } from 'react-bootstrap'; -``` - -Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [App.js](https://github.com/manavsehgal/react-eshop/blob/master/src/App.js) redone using React Bootstrap. - ### Import a Component This project setup supports ES6 modules thanks to Babel. @@ -259,6 +231,34 @@ Please be advised that this is also a custom feature of Webpack. **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify. If you prefer to reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will consider support for this. +### Install React Bootstrap + +React Bootstrap is not a dependency for using React however it is a popular alternative for integrating Bootstrap with React apps. It can be integrated with Create React App workflow using following three steps. + +**Step 1.** Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well. + +``` +npm install react-bootstrap --save +npm install bootstrap@3 --save +``` + +**Step 2.** Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```index.js``` file. + +``` +import './index.css'; +import 'bootstrap/dist/css/bootstrap.css'; +import 'bootstrap/dist/css/bootstrap-theme.css'; +``` + +**Step 3.** Import required React Bootstrap components within ```App.js``` file or your custom component file. + +``` +import React, { Component } from 'react'; +import { Navbar, Jumbotron, Button } from 'react-bootstrap'; +``` + +Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [App.js](https://github.com/manavsehgal/react-eshop/blob/master/src/App.js) redone using React Bootstrap. + ### Display Lint Output in the Editor >Note: this feature is available with `react-scripts@0.2.0` and higher.