Build Your First React App with Sencha Grid in 10 Minutes

Posted Jun 24, 2017

Guest post by Sandeep Adwankar. Sandeep is a Sr. Product Manager at Sencha and is passionate about innovations in mobile and web technologies. He has experience working for startups in Silicon Valley as well as large companies including Motorola and Time Warner Cable. He has an MBA from DePaul University in Chicago and a Masters in Technology from IIT Bombay.

Sencha ExtReact provides all the components a React developer needs to build winning web applications. You get components that work together, interact with each other seamlessly, and are professionally built, tested and maintained. So you can focus on building your app for the competition, not the components.

You can build your first React app with the ExtReact Grid component in less than 10 minutes. It's really easy to get started. Just follow a few simple steps, and you have a functional React app.

  • Make sure you have a Node environment set up

    First, make sure you have Node 6+ and NPM 4+ set up on your system. You can download the latest Node version from Node web site. If you’ve already installed Node, you can easily check the node and npm versions by using these commands:

    node -v

    npm -v
  • Get your login credentials for the ExtReact NPM repo

    ExtReact NPM packages are hosted on Sencha’s private NPM repo. You log in to that repo once to get access to all ExtReact packages.

    To get login credentials, go to the ReactRiot ExtReact Evaluate page and fill out a few fields. We'll send you an email containing login details as well as links to download Sencha Themer tool and links to examples and docs.

  • Login to ExtReact NPM repo and get Yeoman generator

The next step is to log in to Sencha’s private npm repo, which hosts the ExtReact packages. Use your npm login provided in the email to associate the repo with the @extjs scope, and enter the credentials when prompted.

    npm login --registry=http://npm.sencha.com [email protected]

The next step is to install Yeoman generator and ExtReact generator package.

    npm install -g yo @extjs/generator-ext-react
  • Create your first React App

Run the Yeoman generator to create a your first ExtReact app

    yo @extjs/ext-react

The generator will ask you to name your app, name the npm package, and select a theme. The default Material theme (based on Google's Material design guidelines) is a good choice as a starting theme. The generator will also prompt you to create a new directory for your project. The generator will then download and create your sample application, including relevant dependencies.

  • Run your React App

In the generator output, you will find steps to run your application. It is as simple as changing to your new application directory and running the application using:

    npm start

This will fire up the app, making it available by default on localhost port 8080. Your first react app shows a basic left-hand nav bar and a simple grid with the sorting and searching controls you would expect. You can customize the grid component in the application with 100+ props that you can find in Grid API docs. image alt text

The project is preconfigured with the ExtReact Babel plugin, which allows for ES 6 syntax in source files and clean import syntax for ExtReact components. The Webpack configuration ensures the app uses the theme chosen during generation. The theme itself resides in the ext-react/packages/custom-ext-react-theme directory.

  • Build your winning React App

You now have a great starter app that you can turn into a winning app by using 115+ beautiful UI components. On ExtReact Github, you will also find a comprehensive conference application reactor-conference-app that supports mobile, tablet, and desktop. It uses redux and react-router and you can see it running here.

Good luck and happy hacking!