Skip to content
Example of a responsive layout using Reactjs and Bootstrap
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package.json

README.md

react-responsive-layout

Example of a responsive layout using Reactjs and Bootstrap
This is very simple example of setting up a reactive layout using Reactjs and bootstrap
The goal is to create some components and pass some props into the components for display. The color scheme doesn't make sense, it is just to demo different components.

To Run

1. clone repo
2. From project root - npm install  
2. From project root - npm start  
3. Load page public/index.html  

Flow of Reactjs (for this sample)

index.html loads the app
All of the react lives in src main.jsx and components
main.jsx includes the components needed and called using ReactDOM.render
Each one of the ReactDOM.render calls pass in initial props (properties) that are then called in the component it is calling and then assigns it to an element id which is in index.html in this case

Example In index.html there is a div with an id of total-vinyl In main.jsx
StatBox.jsx is included at the top

ReactDOM.render(<StatBox text="Total Vinyl" statDetail="302" textDetail="Total number of records" />, document.getElementById('total-vinyl'));

Now this goes into the StatBox.jsx file to get the component and here there is access to the following props

this.props.text  
this.props.statDetail  
this.props.textDetail  

This is also using watchify to handle changes on the fly while developing. To see how this runs check "scripts" in the package.json file for that command

You can’t perform that action at this time.