An hello-world app demonstrating how easy it can be to setup a new completely custom React project without a lot of cruft.
I'm using of a build/deploy package I built called
soko. It transpiles JS using
browserify and babel
(including object rest/spread and async/await plugins), create source maps, and
compresses it using uglify. It does other things too, so check it out if
you want to know more. NOTE: soko requires Nodejs v8+.
I've also built a component using an alternative structure which avoids using
class, this, new, extends, bind, etc. The point is, there is more than
one way to make a React component. I've created a repo that demonstrates some
different component construction ideas called
es6-react-component if you
want to learn more.
mkdir my-project
cd my-project
npm init
git init
git add -A
git commit -m 'first commit'
Ensure you aren't going to copy a gajillion files into your repo.
- create
.gitignore. - add
node_modulesandbuildto it
npm install react react-dom prop-types --save
npm install soko --saveDev
This is a simple static file that does nothing other than define a container for your React app to target.
- create
assets/index.html - define
<div id="app-container"></div>to be target of react app
- create
app/index.js - use
ReactDOM.render()to create outer wrapper for react app and target the container in the HTML file above usingdocument.getElementById('app-container') - import other custom components and include them here at the top of the tree however you want to build and organize your app
- build using
npx soko build - create custom build commands in
package.jsonscripts
- open
build/index.htmlin your browser