# REACT ENVIORMENT
First thing we need to do is setup our development environment and hook up React. Our end goal will be to get a basic message up on screen. Let's create a new directory and download the packages we need.
```js
mkdir starwars_api
cd starwars_api
npm init -y
npm install --save react react-dom redux react-redux redux-thunk
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react webpack@2.1.0-beta.27 file-loader babel-loader webpack-dev-server@2.1.0-beta.11 react-hot-loader@3.0.0-beta.6
```
Now let's create our entrance file. Create a file at `src/app.js` and put the following in it.
```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { AppContainer } from 'react-hot-loader';
require('./index.html');
// Create app
const container = document.querySelector('#app-container');
// Render app
ReactDOM.render(
, container
);
// Hot module reloading
if (module.hot) {
module.hot.accept('./components/App', () => {
ReactDOM.render(
, container
);
});
}
```
We are displaying a central `App` component. So let's create it! Create a file at `src/components/App.js` and put the following in it.
```js
import React from 'react';
const App = () =>
Hello, World!
;
export default App;
```
We also need to create our `index.html` file that we are including in our `app.js` file. Create a file at `src/index.html` and put the following in it.
```js
React Star Wars
```
This is a basic HTML page. We are including Bootstrap and its basic theme for some simple styles. We also are adding some styles in a `style` tag to help with the sizing of some elements. In the `body`, we are adding our container element and our main app bundle.
Now that we have all that setup, let's create a webpack config that we can use to build our project. Create a file in the root of your project called `webpack.config.js` and put the following in it.
```js
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/app.js',
],
output: {
path: path.resolve(__dirname, './build'),
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
plugins: [
new webpack.NamedModulesPlugin(),
],
};
```
Here we are exporting our config object like normal. We point webpack to start at our `app.js` file and tell everything to output to a `build` directory. We run all HTML files though the file loader. This essentially just moves the file to our `build` directory. Also, we run our JS files through the babel loader to make sure they are transpiled to code that most browsers these days understand. Lastly, we are including a plugin that will give us pretty output in the console.
Let's create a `.babelrc` file to configure babel.
```js
{
"presets": [
["es2015", { "modules": false }],
"react"
],
"plugins": [
"react-hot-loader/babel"
]
}
```
Last thing. Let's create some npm scripts so that we don't need to remember the commands we need to run our application. Add the following scripts to your `package.json` file in the `scripts` section.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://bryan-guner.gitbook.io/my-docs/lambda-website/react-md/react-enviorment.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.