{"componentChunkName":"component---src-components-blog-template-js","path":"/blog/introduction-to-react-app/","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Introduction to React App","date":"2019-03-15"},"html":"

I found that there are numerous methods to create a React App, from the free of nitty-gritty configuration to the most heavily configured one.\nThere are even ways to play around with React without creating the app, one of which I found quite useful is codesandbox.

\n

Create React App

\n

The popular method of setting a React app is Create React App created by Facebook, a fully configured environment packed with everything you need to build a React app. It comes with a live development server, test scripts, auto-reload with Webpack, ES6, and even linter to prevent mistakes in code.

\n

To set it up, you would need Node.js 5.2 or higher installed, then use either npm, npx or yarn. I personally like to use npx since it is very convenient. npx is an npm package runner which is great at executing one-off command. In this case, rather than installing create-react-app package globally and maintaining its version, we can use npx to execute it using its latest version.

\n
npx create-react-app react-app-name
\n
\n

Scripts

\n

Once it is finished installing, we can change the directory to the app name created, then we can run scripts such as:

\n
npm start
\n

Run the app in development mode using the live development server. To view it open a browser and go to http://localhost:3000\nIn here, everytime we make changes to the code file, the page will be automatically reloaded.

\n
npm test
\n

Run the test script in watch mode where we can give inputs to navigate the test process.

\n
npm run build
\n

Build the app in build folder that is ready for deployment. The build version file (bundle) is minified and optimised for performance.

"}},"pageContext":{"slug":"/introduction-to-react-app/"}},"staticQueryHashes":[]}