React-data-grid as React beginner

Question

I have a task to create an app that looks like this. As a javascript developer I said it is a good opportunity to learn ReactJS. I did some ReactJS tutorials and also have some basic knowledge of npm but the Getting started page isn't very talkative and I just didn't manage to make it work.

Can somebody please make a list of commands and instructions how to start from scratch without any serious knowledge of the framework, so after npm start it looks like this?

For example

cd c:\
md reactgrid
cd reactgrid
npm install react-data-grid --save
...???...
...edit index.js and add some code from...
npm start

Thank you.

What code have you tried so far? – Mike Jun 21 '17 at 08:13 — Mike, Jun 21 '17 at 08:13

score 1 · Answer 1 · answered Sep 14 '17 at 15:36

With create-react-app:

npm install -g create-react-app
create-react-app sample-grid
cd sample-grid
npm install react-data-grid
npm install react-data-grid-addons
npm install react-bootstrap

Start here, read the documentation then go to the source code: http://adazzle.github.io/react-data-grid/examples.html#/basic

Paste source code into App.js, then paste the following code before your Example class:

class App extends Component {
  render() {
    return (
      <div>
        <Example />
      </div>
    );
  }
}

Get your server up with npm start and you are set.

React-data-grid as React beginner

1 Answers1